Toolkit for CreateJS 1.1 と Haxe を用いて、html5 canvas で動作するシンプルなシューティングゲームの制作を行いました。リンク先には QR コードを配置しています。スマートフォンでの動作確認にご利用ください。

http://www.dango-itimi.com/html5/1/

ローディング画面は制作していないため、初めは少々真っ暗な画面が表示されたままとなります。

サウンド再生周りに関して

Windows7 上では、html5 audio タグによるサウンド再生周りは以下の様な結果になりました。左に行くほど良い結果となります。

　IE9 > Opera > Google Chrome > Firefox

なんと音周りでは IE9 が一番良く、ほぼ問題なく再生されました。(ただし、スクリプトによる音量調節は不可能)
Opera はサウンドループ時 微妙な間が空きます。
Google Chrome は BGM のループサウンドがにじんで聞こえます。
Firefox は BGM のループサウンドはにじみ、弾の発射音等 連続再生されると音が聞こえなくなります。
Android や iOS 上では、以前の報告通り音はほぼ鳴りません。

Flash ゲーム制作との比較

私の Flash ゲーム制作にかかる手間を 1 とすると Toolkit for CreateJS & Haxe による html5 ゲーム制作にかかる手間は 1.5 倍くらいでしょうか。今までの調査と、先日記事にした IntelliJ IDEA のおかげで、かなり Flash 制作と同等の制作工程に近づけたと思います。IntelliJ IDEA の Refactor 機能が無いと、制作物の規模が大きくなればなるほど比例して制作の手間は増加していきそうです。
(一点ほど新たに Toolkit for CreateJS 1.1 での出力データに関して やや面倒な仕様があることに気付いたため、別途記事にするかもしれません。)

制作の手間は 1.5倍ほどとはいいましたが、あくまでその制作物が 再生側で正常に動作してくれれば、の話となります。
今回のゲームはマウスドラッグ処理を用いている箇所があり、端末によっては こちらの意図通り動作してくれない恐れがあります。よって、端末によって異なる動作に対応するための調査時間など、通常制作以外で別途時間が必要になってきます。
マウスドラッグを必要とはせず、マウスダウン処理のみで済むゲームであるならば、あらゆる端末で同じ動作となってくれそうではあります。

html5 制作

今回は html5 canvas ゲーム制作を行いましたが、html のレイヤー機能を用い canvas の上に DOM を表示する等行えば、ウネウネ動作する html5 サイトや html5 アプリケーションの制作が可能になります。

　参考) canvas と HTML のハイブリッド実装をする
　http://www.ibm.com/developerworks/jp/web/library/wa-htmlmark/index.html#N10282

ただしネット上で見る感じ、レイヤー機能はレイヤー機能でまた色々な問題がありそうです。

その他、バグが多いらしく採用されるかどうかはわかりませんが、次期バージョンの CreateJS では 直接 DOM を操作する事が可能になるクラスが実験的に用意されているようです。端末間の動作の違いを吸収してくれるのであれば、こちらにも期待したい所です。

今後

そろそろ次期バージョンの CreateJS が出るらしい、という点と、最近 Haxe の新バージョンが公開されたので、それらに対応した Toolkit for CreateJS & Haxe 用ライブラリ制作を行う予定です。
追記)すみません、まだ Haxe 新バージョンは公開されておらず仕様が公開されただけかもしれません。

個人的に Toolkit for CreateJS & Haxe で何か html5 関連の制作を行うかどうかは未定です。AIR によって、Flash ゲームとモバイル端末(Android, iOS)向けのアプリケーション制作が同時に行えるため、制作するなら Flash or AIR 優先となりそうです。

Haxe は Javascript 以外にも、Action Script(AS3) に変換したり、swf を出力する機能も持ち合わせているので、初めからすべて Haxe で作ってしまう、という手もありますが、これは場合によりけりとなりそうです。Flash 制作には AS3 用エディタ FDT があり、このツールの存在は大きいです。

Android, iOS でもブラウザ上で遊べる Web ゲームや Web アプリ制作を行いたい、という事になったらば、Toolkit for CreateJS & Haxe は活躍してくれそうです。

[ FLASH ] [ tips ] [ update ] 投稿者 siratama : 2013年02月11日 20:38