グラフィック合成器パーツ画像作成に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ファイル)を開きます。
こんなかんじの猫にんのキャラチップです。
20160822-01.png

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

20160822-03.png

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

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

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

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

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

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

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

20160822-11.png

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

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

20160822-10.png


おまけ。

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

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

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

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


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

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

この記事へのコメント

非公開にする :

トラックバック

URL :

プロフィール

ぴぽ

管理人:ぴぽ
フリーのグラフィックデザイナーという傍ら、「ゲームを作りたいなぁ♪」と奮闘中です!
Twitter

▼関連サイト
・ぴぽや - ゲーム画像素材販売 -
 有料素材の販売
・ぴぽや倉庫
 公開した素材のまとめ

・ぴぽやリンク
 素材配布サイトリンク集
・はじめてのウディタ
 ウディタお勉強wiki
・ニコニ・コモンズ
 動画素材を登録中

ご感想・ご利用報告・ご連絡

素材のご利用報告・ご感想をいただける場合はこちらにお願いします。

お仕事のご相談などはこちらをご覧ください。

作ってほしいゲーム用画像素材のご要望はこちらにどうぞ。
最新記事一覧
ゲーム制作&ゲーム向け素材情報 2017年6~7月分 2017/07/31
2017年6~7月 DLsite.comで発売されたゲーム向け素材紹介 2017/07/31
ファイルのダウンロードについて 2017/06/18
2017年5月 DLsite.comで発売されたゲーム向け素材紹介 2017/06/03
ゲーム制作&ゲーム向け素材情報 2017年5月分 2017/06/03
カテゴリ
最新コメント
リンク
ウディタ公式サイト
ツクールweb
Degicaツクールストア
にほんブログ村 ゲームブログ ゲーム制作へ
にほんブログ村
ビットゲームメーカー公式(ゲーム制作ができるスマホアプリ)

リンクして頂ける場合はこちらのバナー画像をお使いください。
※バナー画像なしのリンクでも全く問題ありません。

RSS
広告
おすすめ有料素材
ねくらファンタジーマップチップ素材集
ねくらファンタジーマップチップ素材集
ねくらレトロフューチャーマップチップ素材集
ねくらレトロフューチャーマップチップ素材集
ファミコン風RPG基本マップ素材セット
ファミコン風RPG基本マップ素材セット
イラストアイコン素材集Vol.2-和-
イラストアイコン素材集Vol.2-和-
イラストアイコン素材集Vol.1
イラストアイコン素材集Vol.1
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part03
みにくる背景CG素材集『ファンタジー編』part03
どうぶつキャラクターチップセット3
どうぶつキャラクターチップセット3
1号のバトラー素材集基礎編vol.1
1号のバトラー素材集基礎編vol.1
RPG用ザコ敵(哺乳類他)48種類セット
RPG用ザコ敵(哺乳類他)48種類セット
立ち絵素材男女
立ち絵素材男女
【立ち絵素材】Aさんのバイト服
【立ち絵素材】Aさんのバイト服
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット
ファンタジーゲーム向けアイコン素材1
ファンタジーゲーム向けアイコン素材1
ファンタジーゲーム向けアイコン素材2
ファンタジーゲーム向けアイコン素材2
ゲーム製作用アイコン集#01
ゲーム製作用アイコン集#01
フリー素材音楽 Vol.1・2・3バンドル (MP3で289曲収録 - Vol.2/3無限ループ再生/RPGツクールにも対応)
フリー素材音楽 Vol.1・2・3バンドル (MP3で289曲収録 - Vol.2/3無限ループ再生/RPGツクールにも対応)
RPG向けフリー素材BGMデラックスパック
RPG向けフリー素材BGMデラックスパック
著作権フリーオリジナルBGM集 Vol.1 『RPG tail』
著作権フリーオリジナルBGM集 Vol.1 『RPG tail』
ドットゲーム支援音楽集 〜中世ファンタジー編 2巻〜
ドットゲーム支援音楽集(MIDI) 〜中世ファンタジー編 2巻〜
フリー素材SE Vol.ABCバンドル (効果音1865個収録)
フリー素材SE Vol.ABCバンドル (効果音1865個収録)
SMILE GAME BUILDER
3DRPG制作ソフト SMILE GAME BUILDER
SRPG Studio
シミュレーションRPG作成ソフト「SRPG Studio」
ティラノビルダー PRO
ノベルゲーム開発ソフト「ティラノビルダー PRO」