SpriteStudio for CreateJS

ID部の藤岡です。

弊社も案件で使っている「SpriteStudio」にはHTML5書き出しの機能があります。
書き出したデータをSpriteStudio専用のHTML5 Playerで再生することで、ブラウザ上でSpriteStudioで制作したアニメーションを再現することができるようになってます。

今回これを応用し、専用のHTML5 Playerを使わずにCreateJSでSpriteStudio書き出しデータを読み込むライブラリを自作して、簡単なミニゲームを作ってみました。

ssforcjs2
→別タブで開く

([P]キーでパンチ、[K]キーでキック、左右の[←→]キーで移動)

ワンテンガーはSpriteStudioからの書き出しを自作ライブラリを通じてCreateJSで読み込み、それ以外はCreateJSで普通に画像を読み込んでます。
最適化はしてませんが、スマホでもひとまず動作します。(操作はタップのみ)
 


SpriteStudioのHTML5書き出しの良いところは、アニメーションをSpriteStudioで作って、ブラウザ上ではパーツ画像とアニメーションデータを読み込むことでアニメーションをcanvas上で再現できるところです。
この方法だと、コマ画像を用意するよりもファイルサイズをぐっと抑えることができます。

詳しくはSpriteStudio公式ブログをごらんください。
http://www.webtech.co.jp/blog/products/spritestudio/3036/

ただ、単体で使うならSpriteStudio専用のHTML5 Playerで十分に便利だと思うのですが、canvasに直接描き込む仕組みのため、CreateJSなどのcanvas描画ライブラリとの連携には向いてません。
そこで、SpriteStudioからHTML5用の書き出しをしたデータをCreateJSで扱えるようにするライブラリを自作してみました。

ssforcjs1
→別タブで開く

([P]キーでパンチ、[K]キーでキック)

今回使ったワンテンガーのデータは、弊社の白井が下記で使ったものとまったく同じです。
http://labs.1-10.com/blog/spritestudio.html

↑と同じくこのような画像を読み込んでます。
ss_ss_tex

Unityに読み込んだ時と比べると足の伸縮など一部再現できてないものがありますが、HTML5のcanvasの仕様の関係で頂点変形が再現できないというSpriteStudio公式情報があるのでそのためかと思います。
実用する際はSpriteStudioで頂点変形を使わない工夫が必要そうです。
 


コードだけで細かいアニメーションを作るのは大変ですが、逆にコードで管理・記述した方が良い表現や状況もたくさんもあります。

そういった場合でも連携がとりやすくなるので、
表現の幅が広がったり、
細かなアニメーション制作ができるようになったり、
アニメーターとコードを書く人との作業分担できるようになったり、
キャラクター・エフェクト単位でアニメーションを用意できるようになったり、
コマ画像がいらなくなってファイルサイズが減ったり、
と色々とメリットが大きいです。

デメリットとして、コマ画像のアニメーションと比べると処理負荷が少し増える場合もあるので、必要に応じてコマ画像も併用するのが良いかもしれません。

Flashのようなタイムラインツールや製作用のGUIツールが無いことがHTML・javascript制作の弱点の一つだと思いますが、そこを補おうと様々なツールが世に出始めています。
ただ、そのようなツールは他のものと連携ができないことも多く、応用しにくかったりする場合があります。
今回試したSpriteStudioとの部分的な連携のような手法は応用しやすく、今後重要になっていきそうだと思っています。


related article