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

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


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


○アニメーションの確認

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


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

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

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

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


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


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


各種設定については「設定メニュー」から行うことができます。

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


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


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

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



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

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


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

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

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

GuideGuideを使うと、画像の縦・横・縦横両方の中央に簡単にガイドを表示したり、画像を指定数で分割したガイドを瞬時に表示できたりします。
（元々ImageReadyではできていた機能ではあるのですが……。）
下のようなキャラチップ画像の場合は、横に３分割・横に４分割と入力して、「Create Guides」を押せば、キレイに分割されたガイドが表示されます。

グリッドと併用することで、より正確で効率的な作業ができると思います。

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


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



○カラーホイール

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

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

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




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

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



○タブ化をやめる

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



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

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

関連記事

• 『RPGツクールVX Ace』体験版・サンプルゲーム公開 2011/12/05
• 『RPGツクールVX Ace』公式サイト公開 2011/11/07
• PhotoShopCS5をドット絵ツール化　その２ 2011/06/15
• 画像管理に便利なソフト紹介 2011/06/09
• エフェクト作成ツールまとめ 2011/06/06

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