グラフィック合成器パーツ画像作成にPhotoshopCCの機能を活用！ : ぴぽや旧ブログ

グラフィック合成器パーツ画像作成にPhotoshopCCの機能を活用！

2016.08.22

最近、グラフィック合成器用のパーツ画像素材を作るのが楽しくなっていてちょこちょこアップしているのですが、実は楽しい理由の一つにめんどくさい作業が減ったというのが大きかったりします！

ぴぽや32×32グラフィック合成器用パーツ　基本セット修正版
ぴぽや32×32グラフィック合成器用パーツ　猫にんセット

まず、グラフィック合成器とは何？って方はこちらをご覧ください。
グラフィック合成器を使ってみよう - はじめてのウディタ　挫折して再び Wiki*

簡単に説明すると、キャラクターの服や帽子といったパーツ画像を単体で何種類か用意して、それを自由に組み合わせて好きなキャラクター画像を作れるというものです。
RPGツクールMV・VXAceなどにもキャラクター生成機能がありますねぇ。
ちなみにグラフィック合成器はWOLF RPGエディターに同梱(別にダウンロードも可能)されているツールですが、WOLF RPGエディター以外での利用も可能です。

話を戻し。
めんどくさい作業というのはパーツ画像を一枚一枚ファイル名をつけて保存することでした。
私の場合はPhotoshopを使って、キャラクターチップ画像を作成しているのですが、当然パーツ画像はレイヤーごとにわけて合成時の表示状態を確認しながら作成し、保存時に保存したいレイヤーだけ表示させて、ファイル名を入力してPNG画像で保存としていました。
数点なら大したことない作業ですが、パーツ画像が増えるごとに、いちいち面倒な作業になります。

PhotoshopCC(2014以降かな？)になって、「画像アセットの生成」という機能が実装されました。
この機能が非常に便利で、元々はWEBデザイン向けの機能なんですが、グラフィック合成器用の画像パーツ作成ととっても相性がいいんです！
簡単に説明すると、Photoshopファイル(PSD)の「レイヤー名もしくはフォルダ名」に「拡張子付きのファイル名」を指定しておくと、自動でそのレイヤーを画像ファイルとして保存してくれるという機能です。

詳しくはこちらをご覧ください。
Photoshop ヘルプ / レイヤーからの画像アセットの生成
【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコト | デザイナーズコラム

さて、どんなかんじでこの機能を使っていくかを実際の作業ファイルを例に説明していきます。

まずは、Photoshopでグラフィック合成器用の作業ファイル(PSDファイル)を開きます。
こんなかんじの猫にんのキャラチップです。

レイヤーをみると、パーツの種類ごとにフォルダわけ、パーツ画像ごとにレイヤーわけしてあります。

例えば、レイヤー名もしくはフォルダ名を「メダル001-01.png」とすることによって、そのレイヤー・フォルダ上の画像をファイル名が「メダル001-01.png」のPNG画像として保存してくれます。

ただし、この機能はあらかじめPSDファイルごとに有効に設定する必要があります。
上部メニューの「ファイル＞生成＞画像アセット」をチェックします。
私が使用しているのがPhotoshopCC2014で最新バージョンではありませんので、バージョンによっては表示場所や名称が違うかもしれません。
画像を自動でガンガン保存していってしまうので、ディスクアクセスが気になる場合は任意のタイミングでON/OFFするのがいいと思います。

これで、レイヤー名にファイル名を指定したものが自動で保存されるようになりました。
PSDファイルと同じ場所にPSDファイルのファイル名に「-assets」と付いたフォルダができています。

フォルダの中を見ると、パーツ画像として生成されたものがぎっしりと。
ちなみに、レイヤー名を「マント/メダル001-01.png」とすることで、「マント」というサブフォルダを作って、その中に「メダル001-01.png」とファイル保存することもできます。
また、Photoshopの方でレイヤー名・フォルダ名を変更した場合は、以前の名前のファイルは自動削除されます。

これで、煩わしいパーツ画像ごとの保存作業から開放され、絵を描くことだけに集中できるというわけです。
ファイル名をあらかじめ決めてレイヤー名に入力しておくことで、画像の修正時のファイル名の入力間違えなども発生しませんしね。

１点注意なのですが、この機能はPSDファイルの画像サイズではなく、レイヤー内の画像が存在している領域のサイズで保存してしまうようなので、レイヤー上に余白・透明部分がある場合はレイヤーマスクを設定する必要があります。

レイヤーマスクがない状態だと、画像(ドット)が存在している領域のサイズになってしまいます。
この画像だと実際に保存された画像サイズは77×99pixelで、PSDファイルの画像サイズは96×128pixelです。
この状態だと、グラフィック合成器で使用した場合に他のパーツ画像と表示位置がずれてしまいますね。

画像中では何も選択していない状態(選択範囲がない状態)で、対象のレイヤーもしくはフォルダを選択し、レイヤーパレットの下部のアイコンなどから「レイヤーマスクを追加」します。

これでPSDファイルの画像サイズでレイヤーの画像が保存されますので、グラフィック合成器で表示位置がずれることはありません。

おまけ。

今回例で使用したPSDファイルのレイヤーの構成なのですが、すべてのパーツ種のフォルダを「test.png」と名前をつけたフォルダに内包しています。
こうすることによって、「test.png」フォルダ以下の現在の表示状態で「test.png」という画像ファイルを自動保存してくれます。

パーツ画像ごとじゃなくて、PSDファイルでの表示状態であるパーツ画像が重なった画像が保存されます。
こんなかんじですねぇ。

これをウディチップビューアという、キャラチップ画像のアニメーションを確認するツールに放り込んでおくと…
「test.png」は表示状態に変更があれば自動保存されていくのに加えて、ウディチップビューアも自動リロード機能があるため、Photoshopで作業しながら、ほぼリアルタイムでキャラクターのアニメーションを確認することが出来ます。

Photoshopにもアニメーションの機能はありますが、レイヤーアニメーションのため、特定の規格のアニメーションを再生することは出来ませんから、キャラチップ画像の作成に非常に便利です。

と、おまけもありましたが、PhotoshopCCの「画像アセットの生成」機能はとっても便利！

「グラフィック合成器」　以外でも、
「海賊版グラフィック合成器」や「Otter's Graphic Synthesizer」といったグラフィック合成器の互換拡張ツールや、「キャラクターなんとか機」といったグラフィック合成器と同じ仕組みでパーツ画像を組み合わせるツールや、「RPGツクールMV・VXAce」などのキャラクター生成機能のパーツ画像の作成などにも活用できます。

関連記事