AS3で歩行グラフィックビューワー
前回に引き続き、歩行グラフィックについてもう少し検証してみます。
最終的には、歩行グラフィックの簡易ビューワー的なものを作りたいと思います。
キャラクターチップを描画するには、BitmapData#copyPixelsがだいたいにおいて効果的でした。
描画方法はこれで問題ないとして、あとはキャラクターチップをどのように取り込むかです。
この歩行グラフィックには一定の規格がないため、それを利用するエディタによって構成が違います。
たとえば、アニメーションフレームが収められた縦列の分割数や、方向パターンをおさめた行の並び順などがまちまちです。
方向行の組み合わせでよく見かけるのが 前・左・右・後 という並びと 後・右・左・前 という並びでした。
他にもあるかもしれませんが、ともかくこの要素は決め打ちできないことは確かです。
この問題に関するアプローチは、こちらが参考になります。
http://blog.tarotaro.org/archives/96
ゲームで利用するのであれば、たいていは画像はembedしてると思うのでこの方法がスマートだと思います。
今回はビューワーなので、表示クラスは抽象的なままの実装としておきます。
それから背景色も必ずしも透明ではないようです。
上の画像のように、緑で塗りつぶしてある箇所は透過させて表示させるようです。
これに関しては、BitmapData#thresholdが使えるので、AS側で実現できます。
簡単にまとめると
- アニメーション（縦列）の列数は3〜5が多い（それ以上もある）
- 方向パターン（横列）の並びには複数のパターンがある
- 背景は必ずしも透過ではなく、特定の色が背景色として塗りつぶされていることもある（この場合、背景色を透過させる）
要件的にはこんな感じでしょうか。
UIコンポーネントでもって、これらの要素を編集できるようにしておけば、ビューワーとして成立しそうです。
とりあえず、ざくざくっと作ってみたので手元にキャラクターチップがあったら遊んでみてください。
とりこめる画像は、4方向単体画像のみです。
CharacterSprite Viewer - wonderfl build flash online
各コンポーネントの役割
- [import]ボタン キャラクターチップの読み込み
- 元画像の表示倍率を変更（1倍と2倍）
- 透過色が指定できるピッカー
- アニメーション列の分割数
- 方向行をプリセット、または個別に指定
- 1行目に格納されている方向を Front/Left/Right/Back から選択
- 2行目に格納されている方向を Front/Left/Right/Back から選択
- 3行目に格納されている方向を Front/Left/Right/Back から選択
- 4行目に格納されている方向を Front/Left/Right/Back から選択
- フレームレートの変更
- キャラクターの移動量の変更
元画像の上にマウスを乗せると、マウス位置にある色がピックアップされます。
透過させたい色（塗りつぶされている背景色など）の上でクリックすると、透過色に設定します。
キャラクターはカーソル操作できるので、向きは実際にその方向のキーを押して確認してください。
方向行の指定ですが、キャラクターチップの並び順にあわせてボタンで選択していくか、プリセットから選びます。
- プリセットA 前、左、右、後
- プリセットB 後、右、左、前
ツクールシリーズでいえば、プリセットAが「VX」「XP」、プリセットBが「2000」にあたります。
