PhotoShopCS5をドット絵ツール化 その2

2011.06.15
以前に書いた記事「PhotoShopCS5をドット絵ツール化」の続きになります。
初めてご覧の方は前の記事から見てください。


前回は基本的なドット絵作業環境を整えることができたわけですが、あれから私自身もPhotoShopCS5に慣れてきたり、新たなツールを見つけたりで、PhotoshopCS5をさらにドット絵ツール化するアイデアがいくつかたまってきました。


○アニメーションの確認

まずは、前回もちょっと課題となっていたアニメーションの確認。
Photoshopのアニメーション確認はアニメのコマ画像を一つ一つレイヤーにわける必要がありました。
これでもアニメーションの確認自体は問題ありませんが、実際ゲームで使う場合にはPhtoshopのレイヤーを認識させるのは難しいので、下の画像のようにアニメのコマ画像を1枚の画像に並べた実際ゲームで使用する状態でアニメーションを確認したいところです。
pipo-charachip.png

まあ、精密なアニメーションを作る場合にはレイヤーを使って作るほうが楽ですが、ある程度型が決まっているRPGのキャラチップの歩行アニメの場合は、ゲームでそのまま使用する画像状態でアニメーションを作っても、さほど問題ないと思います。

というわけで、PhotoshopCS5でアニメーションを確認するもう一つの方法として、「アニメチェッカー」というツールを併用します。

アニメチェッカーは元々RPGツクールのキャラチップの歩行アニメ確認用のツールです。
ただ、アニメーションの設定のカスタマイズが可能なので、ウディタなどのキャラチップ画像規格に合わせてアニメーションを確認することができます。

アニメチェッカーを起動し、画像ファイルをドロップし、「アニメ画像として開く」を選択することでアニメチェッカーの画面内でアニメーションの再生が即座に開始されます。
ps5_dot2-07.jpg

他の特徴としては、起動時に他のソフトよりも「最前面に表示」されますので、Photoshopで作業しながらもPhotoshopのウィンドウ上にアニメチェッカーのウィンドウを表示させておくことができます。
最前面にするのは「menuHacker」などのツールを使えば、どんなソフトでも可能ですので、他にいいアニメーション確認ツールを見つけた場合には、menuHackerを使うとより便利になると思います。
ps5_dot2-05.jpg

また、読み込んでいる画像ファイルの「自動更新」ができるので、画像ファイルの内容が更新されたら、再読込することなく即座にアニメーションに反映することができます。これで、Photoshopで作業中にWEB用保存でPNG画像に保存した瞬間にアニメチェッカーに反映されるので、リアルタイム性には欠けますが、容易にアニメーションの確認ができるようになります。


各種設定については「設定メニュー」から行うことができます。
ps5_dot2-06.jpg
「キャラモード ユーザー設定」
 規格がかっちり決まっているキャラチップ画像のアニメーションを再生する場合はこちらを選択して、画像の仕様(アニメのコマ数など)に合わせたアニメーションの再生方法を設定します。
「スライドモード ユーザー設定」
 アニメのコマが横もしくは縦に連続しているエフェクトアニメーションなどを再生する場合はこちらを選択して、画像の仕様(アニメのコマ数など)に合わせたアニメーションの再生方法を設定します。
「ユーザー設定をファイルから読込」
 ファイルに保存されている、キャラモード・スライドモードで設定したアニメーションの設定を読み込みます。
「ユーザー設定をファイルに保存」
 キャラモード・スライドモードで設定したアニメーションの設定をファイルに保存します。
「常に最前面表示」「自動更新」は先ほど説明した機能のON/OFFです。


参考にウディタの「4方向アニメ3パターン」と「8方向アニメ3パターン」のキャラチップ画像の設定ファイルを用意しましたので、ウディタをご利用の方は使ってみてください。
ただし、「8方向アニメ3パターン」のものに関してはウディタのキャラチップの規格とアニメチェッカーの仕様上、8方向全部のアニメーションを一気に表示することができず、カーソルキーの↑↓で4方向ずつの表示を切り替えることになります。
▼こちらからダウンロード
アニメチェッカー用ウディタキャラチップ設定.zip


アニメチェッカーの欠点としてはαチャンネル付きPNGの画像が正しく表示されません。画像自体は認識できますが、透明度が反映されない状態で表示されます。

αチャンネル付きのアニメーション画像を確認したい場合は、また別のアニメーション確認ツール「Dot Anime Player」を使うと下の画像のように正しく表示されます。
ps5_dot2-08.jpg


これでアニメーションの確認については、まだ満足できるところではありませんが、選択肢が増えケースバイケースで最適な方法を選べるようになりました。

続いては細かい部分をちょこちょことご紹介していきます。


○ガイド設定をさらに便利に

ガイドの設定をPhotoshop標準の機能ではなく、下記の記事で紹介されている「GuideGuide」を使用して行います。
入手先、導入方法など詳しい使い方は下記の記事を参考にしてください。

Photoshopの面倒なガイドを簡単に配置するエクステンション -GuideGuide | コリ

GuideGuideを使うと、画像の縦・横・縦横両方の中央に簡単にガイドを表示したり、画像を指定数で分割したガイドを瞬時に表示できたりします。
(元々ImageReadyではできていた機能ではあるのですが……。)
下のようなキャラチップ画像の場合は、横に3分割・横に4分割と入力して、「Create Guides」を押せば、キレイに分割されたガイドが表示されます。
ps5_dot2-02.jpg
グリッドと併用することで、より正確で効率的な作業ができると思います。

ただ、設定を間違えたときにガイドを消すのが面倒になってくるので、「表示>ガイドを消去」にショートカットキーを設定しておくか、前回の記事で紹介した「Adobe Configurator」で作成したパネルに「ガイドを消去」ボタンを設置しておくことをおすすめしておきます。


ガイド関連でもう一つ、PhotoshopCS4以降で500%以上にズームしていくと表示される1ピクセルごとのグリッド「ピクセルグリッド」というのがあるのですが、邪魔になってくる場合があります。
「表示>表示・非表示>ピクセルグリッド」で表示・非表示を切り替えられるので、便利なときもあると思うので覚えておきましょう。
ps5_dot2-09.jpg


○カラーホイール

ドット絵に限ったものではありませんが、カラー選択を便利にするエクステンションをご紹介します。
「Painters Wheel for Adobe Photoshop CS4+」はCS4とCS5で使用することができます。
導入方法はちょうど前のGuideGuideの紹介blogの記事中で説明されているものと同じですので、そちらを参考にしてください。

Painters Wheelは無料で使えるのですが、より高機能なものがシェアウェアとしてあり、下記の記事で紹介されていますので、興味がある方はご覧になってください。

PhotoShopにカラーホイールを追加するプラグイン: CGとかの覚え書きブログ

ps5_dot2-03.jpg


○ファイル保存パネルの作成

前回の記事で紹介した「Adobe Configurator」でファイル保存用のパネルを作成してみました。
ファイルメニューから選択する必要がないので、ちょっと楽です。
「レイヤーに読み込み・レイヤーを書き出し」「ファイル>スクリプト」の中にあった機能を設置したものです。
ps5_dot2-04.jpg


○タブ化をやめる

PhotoshopCS4からだったと思いますが、ファイルを開くと勝手にタブ化されちゃいます。
大きな画像を扱っている場合には、まあタブ化されていても構わないところですが、ゲームグラフィックのように細かいパーツ画像を作成する場合にはいちいちタブを開いていくのは面倒です。
以前のPhotoshopのように表示するには「編集>環境設定>インターフェイス>タブでドキュメントを開く」のチェックを外しましょう。
ps5_dot2-01.jpg


以上になります。
今回は外部ツールやエクステンションなどを利用してドット絵ツール化を進めてみました。
各ツール・エクステンションの作者の方には本当に感謝です!

また何かドット絵ツール化のいいアイデアが見つかったら、続きを書きたいと思います。


関連記事

この記事へのコメント

非公開にする :

トラックバック

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
広告
おすすめ有料素材
ねくらファンタジーマップチップ素材集
ねくらファンタジーマップチップ素材集
ねくらファンタジーマップチップ素材集エクストラダンジョン
ねくらファンタジーマップチップ素材集エクストラダンジョン
SF近未来~現代 タイルセット・マップチップ素材 著作権フリー RPGツクール、ウディタ用
SF近未来~現代 タイルセット・マップチップ素材
ファミコン風RPG基本マップ素材セット
ファミコン風RPG基本マップ素材セット
どうぶつキャラクターチップセット3
どうぶつキャラクターチップセット3
1号のバトラー素材集基礎編vol.1
1号のバトラー素材集基礎編vol.1
RPG用ザコ敵(哺乳類他)48種類セット
RPG用ザコ敵(哺乳類他)48種類セット
立ち絵素材男女
立ち絵素材男女
【立ち絵素材】Aさんのバイト服
【立ち絵素材】Aさんのバイト服
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part03
みにくる背景CG素材集『ファンタジー編』part03
イラストアイコン素材集Vol.1
イラストアイコン素材集Vol.1
ファンタジーゲーム向けアイコン素材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」