ゲーム制作記とゲーム制作に役立つ画像素材や情報記事を公開しています

Photoshop でゲーム用のドット絵などを作成する際に一番面倒だったのはアニメーションする素材の作成でした。
Photoshop にもアニメーションを作成プレビューできる機能はあるのですが、レイヤーアニメーション(レイヤーの表示状態を切り替えてフレームごとのアニメを作る)のため、アニメーションを作ってからゲームで使用する規格(パターンの配置)にアニメーションの各パターンを並べ直す作業が必要になることがありました。

八百雨(@yaosame)さんが作成されたフリーの汎用アニメーション確認ソフト「ウディチップビューア」のおかげでゲームで使用する規格のまま、アニメーションを確認しながら絵を作っていくことが出来るようになりました。

以前の記事でも簡単に紹介しています。
最近公開されたゲーム制作時の画像加工などに便利なツール : ぴぽや
http://blog.pipoya.net/blog-entry-511.html


今回は、2013年に追加された PhotoshopCC の新機能「アセットの生成」を使用してウディチップビューアとの連携し、アニメーション作成の作業効率を高める方法をご紹介していきます。
ドット絵に限らず、アニメーション素材の作成なら通常のイラスト等でも活用できますので、PhotoshopCC をお使いの方はご自分の作業内容に合わせて取り入れてみてください。



※PhotoshopCC は Adobe Creative Cloud による月額払いで利用できるソフトです。
　2018年2月現在ですと、最安のフォトプランで月額980円(税別)で利用可能です。
　キャンペーンで安くなることもあります。

Creative Cloudの価格とメンバーシッププラン | Adobe Creative Cloud
https://www.adobe.com/jp/creativecloud/plans.html?promoid=695P7SPW&mv=other

PhotoshopCC アセット生成機能とは

「アセット生成機能」とは簡単に言うと、レイヤー名・レイヤーグループ名に「image.png」などとファイル名を記述することによって、そのレイヤー・レイヤーグループを「image.png」というファイル名でPNG画像ファイルとしてドキュメント編集中でも自動的に出力してくれる機能です。

ウディチップビューアは画像ファイルが更新されたら再読込してくれるので、この「アセット生成機能」でリアルタイムに出力される画像ファイルをウディチップビューアに表示しておけば、Photoshop で描画しながらアニメーションもほぼリアルタイムにプレビューできるというのが今回のキモとなるわけです！

「アセット生成機能」について詳しくは、下記の PhotoshopCC のWEBマニュアルなどを参考にしていただくと理解が深まると思いますが、今回は私がいつもドット絵素材を作る際に使っている部分のみ説明していきます。

Photoshop マニュアル＞Photoshop でのレイヤーから画像アセットの作成
https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

ベテランほど知らずに損してるPhotoshopの新常識（4）まだスライスで消耗してるの？「画像アセットの生成」でスライス不要のサクサク切り出し – Adobe Creative Station
https://blogs.adobe.com/creativestation/dtp-photoshop-kihon-tips-04

アセット生成機能を使う準備

まずは PhotoshopCC であることが前提ですが、CCでもいくつかバージョンがあり、Adobe Creative Cloud を利用していれば CS6,CC 以降の最新までの各バージョンを利用可能ですが、CC(2014)以降を利用するのが、「アセット生成機能」の強化もあり必須になります。
バージョンによって使っていたプラグインが動かなくなるとか、放置されているバグがあるとかどのバージョンも一長一短ってところはあるので、自分の環境と相性がいいものを使いましょう。


今回はCC2018(19.1)での設定内容になり、他のバージョンのものとはUIとメニューの並びなどが少し違う場合がありますのでご了承ください。

ちなみに各バージョンはメジャーナンバーであれば同居可能なようです。
私もCC2014(15.0)とCC2018(19.1)をインストールしてありますが、どちらも起動可能です。

さて、あとは Photoshop で「アセット生成機能」を使うための機能を有効にします。

上部メニューから「編集＞環境設定＞プラグイン」と進み、「Generatorを有効にする」をチェックします。


これで「アセット生成機能」が利用可能になりました。

アセット生成機能を使う

それでは何かしらドキュメントを開いて、「アセット生成機能」を使ってみます。

新規ドキュメントで行う場合は、一度どこかにPhotoshopファイル(PSD,PSB)として保存しておかないと、「アセット生成機能」で出力された画像ファイルが変なところに保存されてしまうので、ご注意ください。

さて、手元にあるPSDファイルを読み込んでみました。


グラフィック合成器というパーツを組み合わせて自由にキャラ画像を作成できるソフト用として作った猫キャラのドキュメントになります。
ぴぽや32×32グラフィック合成器用パーツ　猫にんセット : ぴぽや
http://blog.pipoya.net/blog-entry-520.html

パーツごとにレイヤー分け・フォルダ分けしているので少し複雑ですが、レイヤー名・レイヤーグループ名にファイル名を記述しており、そのファイル名でレイヤー名・レイヤーグループ名の状態が画像ファイルとして生成されます。

記述の種類は下記のようになっています。

～.png　で 32bitPNG
～.png24　で 24bitPNG
～.png8　で 8bitPNG(256色)

こちらの猫キャラドット絵のようなものであれば、本来は「～.png8」とするのがファイルサイズも小さくなるのでベストになります。

今回はPNGでの説明だけですが、他にJPEG,GIF,SVGでも出力することができます。


レイヤー名・レイヤーグループ名にファイル名を記述したら、上部メニューの「ファイル＞生成＞画像アセット」を選択しチェックを入れて「アセット生成機能」を有効にしておきます。


これはドキュメント毎の「アセット生成機能」の有効/無効になり、他の開いているドキュメントや新たなドキュメントには影響しません。

PSDファイルで保存して再度読み込んでも機能は有効になっていますが、PSDファイルを他のフォルダに移動してから再度開いた場合は無効になりますので、PSDファイルを移動させた場合には注意してください。

これでPSDファイルと同じフォルダ内に、「PSDファイル名-assets」というフォルダが自動的に出来、このフォルダに中にレイヤー名・レイヤーグループ名で指定したファイル名の画像ファイルが出力されています。




この画像ファイルは Photoshop 上で編集を加える度にリアルタイムで更新されていきます。


今回のようなゲーム用素材を作っていく場合以外にも、いちいちレイヤー毎・レイヤーグループごとに表示状態を揃えてPNG画像として保存していくという面倒な作業が必要なくなり、いろんなケースに応用できる機能ですので、ぜひ活用してください。

アセット生成機能の注意点

さて、「アセット生成機能」は非常に便利なのですが、いくつか注意する点があります。

画像の余白部分の書き出し

「アセット生成機能」でレイヤー・レイヤーグループを画像出力する際には、レイヤー・レイヤーグループ内の外側の余白透明部分をトリミングして、画像出力されてしまいます。

例えば、こういうパーツ画像があった場合に、本来はカンパスサイズで画像出力したいのですが、


実際は赤くした余白部分は透明になっているので、ここを抜いた画像として出力されてしまいます。


都合が良い場合もありますが、キャラチップ画像などを作成するときは問題があります。

こういうときの対応策は簡単で、レイヤー・レイヤーグループを出力したい範囲でマスクするだけです。
カンパス全体を出力したい場合は、選択範囲を作成せずにそのまま「ベクトルマスクを追加」とするだけでカンパス全体のマスクが作成されます。

画像生成時の負荷

画像をリアルタイムに保存していくので、画像の量やサイズによって負荷がかかり、Photoshop が一瞬カクついてしまう場合があります。
作業状況に応じて、上部メニューの「ファイル＞生成＞画像アセット」で「アセット生成機能」の有効/無効を切り替えましょう。

今回の目的のようにリアルタイムにアニメーションを確認する必要がなければ、仕上げのときだけ有効にすればいいですね。

また、Windowsのエクスプローラでファイルアイコンが画像ファイルのサムネイル画像になるようにしてある場合には、当然エクスプローラにも保存と表示の負荷が発生しますので、出力されているフォルダは最小化しておくなどした方がいいです。

内包レイヤーの表示状態の確認

レイヤーグループ名でアセット画像を生成する場合には、内包しているレイヤー・レイヤーグループの表示/非表示の状態が反映されます。

画像生成したレイヤーグループの画像ファイルが意図した画像になっていない場合は、内包しているレイヤー・レイヤーグループの表示/非表示の状態を確認しましょう。

レイヤー名変更のショートカットキー設定

これは注意点というわけではないのですが、Photoshop でレイヤー名・レイヤーグループ名を変更する時に名前部分をダブルクリックすると思うのですが、上手く元の文字領域部分をダブルクリックできないと入力フォーカスが有効にならなくてイライラしちゃうことがあります。
そんなときは「レイヤー名の変更」にショートカットキーを設定しておくと便利です。

上部メニュー「編集＞キーボードショートカット...」でショートカットキーを設定しておきます。
「レイヤー名の変更」は「エリア：アプリケーションメニュー」「レイヤー」のカテゴリ内にあります。


私の場合はWindows標準に合わせて、「F2キー」を割り当てています。
F2～F12のファンクションキーはアクションでショートカットキーに割り当て可能なキーなので、ちょっともったいないところではありますが。

ウディチップビューアとの連携

Photoshop の「アセット生成機能」の説明が長くなりましたが、ようやくウディチップビューアを起動させて、連携させていきます。

ウディチップビューアは元々PSDファイルも読み込めるので、Photoshop で編集中にPSDファイルを上書き保存して、ウディチップビューアが自動的に再読込してアニメーション表示を更新してくれますが、「アセット生成機能」で出力した画像ファイルをウディチップビューアで表示されておけば、Photoshop での編集している状態を自動的にほぼリアルタイムでウディチップビューアのアニメーション表示に反映することができますし、PSDファイルの読み込みだと確認できるアニメーションは一つですが、「アセット生成機能」で出力した画像ファイルを読み込む場合は１つのPSDファイルから複数の画像を出力して複数のアニメーションを確認することができます。

これでPhotoshopに新たなリアルタイムアニメーションプレビュー機能が追加されたぐらいのインパクトで一気に作業効率が上がります。

さて、さらにPhotoshopとウディチップビューアの連携を高めていきましょう。

統合表示とパーツ画像を個別に確認する

今回サンプルに使用しているものですと、パーツ分けしているので、パーツのみのアニメーションと他のパーツと合成された統合状態でのアニメーションを両方確認したい場合もあると思います。


そういうときは、Photoshop のレイヤーの状態をこのように、パーツ画像ごとのレイヤー・レイヤーグループにファイル名を設定して画像生成し、さらにそのパーツ画像のレイヤー・レイヤーグループをまとめて内包したレイヤーグループを作ってファイル名を設定して画像生成します。


こちらの画像のレイヤー表示状態ですと、一番上の「test.png」と設定してあるレイヤーグループがパーツ画像をまとめたものになっています。

というわけで、パーツ画像をまとめた「test.png」と個別に確認したいパーツ画像ファイルをウディチップビューアに読み込み表示させればいいわけです。

ウディチップビューアをPhotoshopのワークエリアに表示する

マルチモニター環境でしたら、ウディチップビューアをサブモニター上に表示することもできますが、ドット絵作業のような細かな調整を連続して行いながらアニメーションを確認したい場合は、作業を行っているメインモニターでPhotoshopのワークエリア内に表示させておきたいところです。

通常だと、Photoshop で作業中にはウディチップビューアが Photoshop のウィンドウに隠れてしまいますが、ウディチップビューアのメニューから「ウィンドウ＞最前面表示」をチェック、もしくはショートカットキー「Ctrl+Q」を押せば大丈夫です。


これで、常にPhotoshopのウィンドウより上にウディチップビューアが表示されるようになるので、Photoshopのワークエリア上に配置することができます。

自動フォーマット判別機能の使用

ウディチップビューアに画像ファイルを読み込む際には、「スプライトの設定」ウィンドウが表示され表示フォーマットを選択する操作が必要になりますが、読み込む画像のファイル名や画像ファイルがあるフォルダ名による「自動フォーマット判別機能」を利用することによって、「スプライトの設定」ウィンドウを介さずすぐにアニメーションを表示することができます。


詳しくはこちらに。
ウディチップビューア　マニュアル　自動フォーマット判別機能
http://yaosame.m22.coreserver.jp/apps/autotile/manual/index.html#page07

上記のページに「自動フォーマット判別機能」の設定を簡単に作成できる「autoformat.xmlくりえいたー」がありますので、こちらを使って設定を作っていきましょう。


できたxmlの書式をコピーして、ウディチップビューアの実行ファイルがあるフォルダを開き、「autoformat.xml」をメモ帳などテキストエディタで開きます。


「～」内にコピーした書式をペーストして保存します。


Photoshop 側では、ファイル名を条件にするならレイヤーのファイル名に「ファイル名_3x4chara.png」というように「_3x4chara　パターンの並びが横３×縦４のキャラチップ」という自分で意味がわかる識別子を考えて、「autoformat.xmlくりえいたー」で画像ファイル名で「_3x4chara」「を含む」で設定を作ればいいわけです。

フォルダを条件にする場合も、「アセット生成機能」にはフォルダを作成する書式もありますので、とても簡単です。

例えば、「装備」というフォルダを作成する場合は、「装備/メダル001-01.png」というようにファイル名の前にフォルダ名を追記するだけです。


すると、こんなかんじでフォルダが作られて、その中に画像も出力されています。


あとはファイル名の時と同じように「autoformat.xmlくりえいたー」で設定を作成すればOKです。

この「アセット生成機能」のフォルダを作成する設定は、パーツ画像ごとにフォルダ分けしたい場合などにもたいへん便利です。

おまけ　Photoshop をドット絵作業に

最近は下記のようなアニメーション編集機能が強い海外のドット絵作成ソフトなども普及してきており、Photoshop＋ウディチップビューアでもこれらの専用ソフトにはかなわないところがありますが、使い慣れたPhotoshopで作業できるのは大きいところです。

Aseprite
http://store.steampowered.com/app/431730/Aseprite/?l=japanese
Pro Motion NG
http://store.steampowered.com/app/671190/Pro_Motion_NG/

今回のウディチップビューアとの連携も含め、過去記事でも Photoshop でドット絵を作業をする際の便利機能の紹介などしてきましたが、おまけでちょっとした部分ですが PhotoshopCC でのドット絵作業が便利になる機能・設定を紹介します。

PhotoShopCS5をドット絵ツール化 : ぴぽや
http://blog.pipoya.net/blog-entry-84.html
PhotoShopCS5をドット絵ツール化　その２ : ぴぽや
http://blog.pipoya.net/blog-entry-115.html
PhotohsohpCC2014～2018用ドット絵作業パネル : ぴぽや
http://blog.pipoya.net/blog-entry-604.html

タブを分離

Photoshop のいつのバージョンからは忘れてしまいましたが、ドキュメントを編集する際にタブに格納されるのがデフォルトになってしまいました。
私の場合は下記の画像のようなかんじで作業したいので、タブに格納されるのは作業しにくく、デフォルトの設定を変更し、タブに格納ではなく従来通りの個別のウィンドウで表示されるようにしています。


設定方法は上部メニュー「編集＞環境設定＞ワークスペース」で「タブでドキュメントを開く」のチェックを外すだけです。


ちなみに上の画像の左下のウィンドウは右側の大きいウィンドウのクローン表示なので、右側のウィンドウで編集した内容が左下のウィンドウにも反映されます。
ドット絵作業では別の倍率表示で確認できて便利です。
ナビゲーターパネルでも同じように確認できますが、倍率の調整ができないので、こちらを使っています。

設定方法は上部メニュー「ウィンドウ＞アレンジ＞～の新規ウィンドウ」を実行します。
ショートカットキーを設定しておくと便利です。

ピクセルグリッドの表示/非表示

ドット絵作成専用ソフトでは大抵１ピクセルごとのグリッドが表示する機能がありますが、Photoshopでも500％より大きく拡大すると１ピクセルごとのグリッド「ピクセルグリッド」が表示されます。


ドット絵作業に慣れていない方にとっては１ピクセルの感覚というのがわかりにくと思いますので、便利な機能ではあるのですが、ある程度慣れてくると邪魔になってくることがあります。

作業内容に応じて、表示/非表示できるといいですね。
表示/非表示を切り替えるには、上部メニュー「表示＞表示・非表示＞ピクセルグリッド」を実行します。
これもショートカットキーを設定しておくと便利です。

まとめ

PhotoshopCC の「アセット生成機能」とウディチップビューアとの連携によって、Photoshopにおけるゲーム用のドット絵アニメ素材を作成する環境は劇的改善が可能になりました。

ウディチップビューアの作者の八百雨さんには感謝感謝です！

今回の記事内容はドット絵作業の用途に限らず、他にも応用の効く機能や用法だと思いますので、皆さんの作業にお役立ていただければうれしいです。

Photoshop でのドット絵作業に関しては最近実用しだしたカスタマイズもあり、また別の機会にご紹介したいと思いますのでご期待下さい。

関連記事

• ウディタのオートタイルをＲＰＧツクール・SRPGStudio用に変換 2018/07/25
• ウディタ・RPGツクール規格のキャラチップ画像をSMILE GAME BUILDER用に変換 2018/03/17
• ドット絵アニメ作業効率化　PhotoshopCCとウディチップビューアの連携 2018/02/26
• Photoshopのカラーピッカーアドオン「Coolorus」 2018/01/24
• 2017年お気に入りAfterEffectsプラグイン３点 2018/01/04

カテゴリ ： ソフト紹介 ｜ Comments (0) ｜ Trackbacks (0) ｜ 【記事編集】