FC2ブログ
ぴぽやフレンズについて

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 :

プロフィール

ぴぽ

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

TwitterYoutubeチャンネルtwitchチャンネル
Fantia-ぴぽやフレンズCi-en ぴぽやフレンズ

▼運営サイト
・ぴぽや倉庫
 公開した素材のまとめ

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

ご感想・ご連絡


カテゴリ
最新コメント
リンク

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

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

タイルセット
ねくらファンタジーマップチップ素材集
ねくらレトロフューチャーマップチップ素材集
普通シティ 現代日本都市タイルセット
ファミコン風RPG基本マップ素材セット

背景イラスト
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part03
砂漠の戦闘背景 サファイアソフト素材 Vol2
雪の戦闘背景 サファイアソフト素材 Vol1

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

キャラチップ
ぴぽやキャラチップ素材集 乗り物10種
どうぶつキャラクターチップセット3

キャラ立ち絵
中世ファンタジーRPG風2Dキャラクターパック【キャラクター画像素材】
立ち絵素材男女
【立ち絵素材】Aさんのバイト服
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)

エフェクトアニメ
物理攻撃エフェクト素材集1 71点収録
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット

アイコン
イラストアイコン素材集Vol.1
ゲーム製作用アイコン集#01
ぴぽや感情&状態アイコンアニメ素材集
ファンタジーゲーム向けアイコン素材1

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