ぴぽやフレンズ Fantia
ぴぽや - ゲームグラフィック素材販売 -

グラフィック合成器パーツ画像作成に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 :

プロフィール

ぴぽ

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

TwitterFantia-ぴぽやフレンズYoutubeチャンネルtwitchチャンネル

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

・ぴぽやリンク
 素材配布サイトリンク集
・はじめてのウディタ
 ウディタお勉強wiki

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


最新記事一覧
ファンティアでファンクラブを開設しました! 2018/02/22
戦闘エフェクトアニメ 円盤から雷撃 2点+おまけ1点 2018/02/20
ファンティアでファンクラブの開設準備中です 2018/02/12
ゲーム制作&ゲーム向け素材情報 2018年1月分 2018/02/01
2018年1月 DLsite.comで発売されたゲーム向け素材紹介 2018/02/01
カテゴリ
最新コメント
リンク

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

RSS
広告
おすすめ有料素材
同人誌、同人ゲーム、同人ソフトのダウンロードショップ - DLsite.com

タイルセット(マップチップ)
ねくらファンタジーマップチップ素材集
ねくらレトロフューチャーマップチップ素材集
ファミコン風RPG基本マップ素材セット

背景イラスト
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part03

エネミーイラスト
イラスト素材集-baroque-
イラスト素材集-異界のアリス-
RPG制作に使えるデフォルメ素材集~モンスター娘編~ Vol.3

キャラチップ
どうぶつキャラクターチップセット3

キャラ立ち絵
立ち絵素材男女
【立ち絵素材】Aさんのバイト服
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)

エフェクトアニメ
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット

アイコン
イラストアイコン素材集Vol.2-和-
イラストアイコン素材集Vol.1
ゲーム製作用アイコン集#01
ファンタジーゲーム向けアイコン素材1
ファンタジーゲーム向けアイコン素材2

ゲーム制作ソフト
SMILE GAME BUILDER
SRPG Studio
ティラノビルダー PRO