スマホ用ドット絵エディタログ

=前置き=

 ローグライク用の画像を作成する「ボクセルエディタ」を作り、動作検証から簡単な画像の作成までは完了したのでそこら辺のログ。

=ボクセルエディタ=

 ローグライク用の画像作成の問題は、「斜め方向の画像も作らないといけないので、合計8方向の画像を用意する必要があり、コストが高い」という点と、「斜めを向いた画像は絵を描けない人間にとってはとてもむずかしい」という点の2つ。

 これを解消するために「元データを1つ作っておいて、それを8方向から見た時の画像を自動で生成する」という手法をとることにした。一般的にはポリゴンモデルを作って対応するのが常套手段だと思うけど、ポリゴンモデルを作るのも初心者には厳しいし、ドット絵との相性がやや悪い。

 そこで今回考えたのは「ボクセルで描いて、それを8方向から見る」というもの。ボクセルとは、ピクセルを3次元に拡張した概念のこと。つまり、ピクセルが2次元上に四角形を並べた形で表現されるのに対し、ボクセルは3次元上に立方体を並べた形で表現される。厳密にはちょっと違うけど、電撃 - PS3で80年代を遊ぶとどうなる!? 『3Dドットゲームヒーローズ』を全力で紹介にあるような表現になる。

Flash

 というわけで作ったのがこちら。Flashだとロード機能が動かないので、その部分は削除しているため、セーブ&ロードはできない。(Android版は動作が重かったり色々あるので仮UPも保留)

VoxelEditorTest.swf 直


 ちなみに、良い出来ではないけど以下のような画像を1つ10〜15分程度で作れる。



 あと、ついでに前回の「ドラッグ&ドロップ ドット絵エディタ」もFlash版(セーブ&ロード機能がないもの)を一応UPしておく。

DragDropDotEditorTest.swf 直

=現状=

 ある程度は想定した通りの挙動になったものの、以下の問題があり実用にはもう少し足りない状態。

  • 動作が単純に重い(ノートPCやスマホではもたつく)
  • 陰影付けがドット絵よりもポリゴン寄りになってる(ポリゴンで作った場合とあんまり変わらない)
  • 削りが上手くできない(1ボクセルに向きの情報まで加えてしまっているのが問題)


 そういうわけで、これで本番用の画像を作るのは難しいけれど、これをトレース画像にして旧キャラ絵エディタで絵を描くことはできるかなという状態。

=予定=

 とりあえず仮の画像は用意できるようになったので、平日はこの画像をもとにローグライクを作っていく予定。
 土日は上記の問題を解決するため「Stage3Dによるエッジ検出」の実験を進めようかと思う。Stage3DはFlashによる本格的な3Dのサポートなので高速化が期待できるし、エッジ検出ができればそこに陰を置くことでドット絵っぽくなるはず。