またまた新幹線ゲームを作りました。今度はHTML5とJavaScriptです。
遊んでみたいかたはこちらから
http://www.dagage.com/iphone/jsgames/shinkansenjs/shinkansenjs.html
また、動作に関する情報はこちらから。
http://www.dagage.com/news/archives/159
Flashからの移植というか最初から作りなおした感じですね。そこでせっかくですから制作過程を残しておくことにしました。興味のある方はお読みください。とりあえず、ある程度はプログラミングの知識があるものとして話を進めます。知らない人、ごめんなさい。
HTML5版では以下のライブラリを使用しました。作者に感謝。
box2dweb
http://code.google.com/p/box2dweb/
CreateJSからEaselJS
http://www.createjs.com/#!/CreateJS
box2dwebは、お馴染み二次元物理演算ライブラリBox2dのJavaScript版です。CreateJSはFlashっぽい機能を実現したライブラリ群で、今回はその中からEaselJSというスプライト処理用のライブラリを使用しました。
また、以下のアプリケーションも使用しました。
Adobe Flash Professional CS6
http://www.adobe.com/jp/products/flash.html
Visual Web Developer 2010 Express
http://blogs.msdn.com/b/osamum/archive/2011/02/18/visual-web-developer-2010-express.aspx
方針を練る
JavaScriptもHTML5のCanvasもまるで知らない。いや多少は知ってますがちゃんと使ったことがない。なのでまずは下調べから。「Flash版から移行する」という視点であれこれ事前にチェックしました。ハマったときに困りますからね。人生も残り少ないですし。で、悩んだ末にJavaScriptとEaselJSで行く事に。もとがFlashだからってのもありますが、まあAdobe支援て意味合いも。
JavaScript
最初にして最大の難関がこれでした。ご存じない方のために説明しますと、主にブラウザなんかで使われているプログラミング言語です。Google Mapとか派手に使ってますね。こいつ昔は忌み嫌われていましたが、最近はわりと猫も杓子もって感じです。この言語が大好きな方をときどき見かけますが、私は大嫌いでした。今はそれほどでもないですね。小嫌いくらいです。書店の解説本の多さからして苦手な人や嫌いな人が多いんじゃないかと邪推しています。需要が多いだけかもしれませんが。これを他言語より簡単だという人がいますが信じられない。脳の構造が違うんでしょうか。アハ体験でもしたんでしょうか。とはいえ他に選択肢がないので渋々文法を覚えましたとも。最低限のものを。CoffeeScriptとかHaxeとかもっとちゃんとした（！）プログラミング言語を使うこともできたのですが、それらも結局はJavaScriptに落ちるだけなので却下。いやメンテナンスを考えればそういうのもいいんですが、横着をするのはやはりJavaScriptを多少なりとも使えるようになってから。でないと何か起きた時にソースコードを追えませんから。それに、ひょっとすると好きになるかも。ならなかったけど。てへぺろ。てなわけで、書いたり読んだり実行したりの繰り返し。このへんの作業は進化しませんね。まともなエディタもないしデバッグも大変だし荒れていたあの頃。盗んだバイクを売り飛ばす。
box2dweb
いわゆる物理演算ライブラリ。物が落下したりぶつかったりしたときの複雑な計算を代わりにやってくれるありがたい裏方です。メモリー上に仮想空間ができて、そこを長方形とか円とかが跳ねたりネオが電話してると思ってもらえばだいたいあってます。このbox2dweb、Flashで使っていたActionScript版のものとバージョンが少し上がっていて、まあ何とかなるだろうと思ったら仕様がまるで違うんだよ。なんだよこれ。フィクスチャー？知らん。なので簡単なコードを読みながらテストを繰り返しました。ここで早くもブラウザに搭載されたJavaScriptの非互換に悩まされ、一部の仕様変更を余儀なくされます。
EaselJS
画像を表示させるためのライブラリ。Flashに似た構造なのでActionScriptを使っていた人が移行しやすいのがウリ。たしかに似てます。Flashと。しかしまったく同じではない。この「少し違う」のがなかなかの曲者でして「え、できないの？」とか「え、どうやるの？」が頻発。習慣とは恐ろしいものです。まるで違うものなら良かったんだけど。
でもこれを最新のテクノロジーとか未来の技術とかウソで固めてないだけAdobeは偉いと思う。必死でポンコツ環境をなんとかしようという熱意はすばら、おっとHTML5+JavaScriptの悪口はそこまでだ。
Adobe Flash Professional CS6
Adobe社製のFlash作成アプリケーション。主にFlash版の新幹線ゲームから画像データを書きだすのに使用しました。このアプリケーションの拡張機能にToolkit for CreateJSというのが含まれていて、こいつの力を試してみたいというのも今回の移植の目的でした。で結論ですが、うーん。少なくとも現状ではベストの解決策でしょう。なにしろ実行環境側があまりにも不完全なのであまりにも不完全なので（大事なので２回言いました）これ以上は対応のしようがないのでは。ただ、紙芝居みたいなのを簡単に作りたいという（日本の？）市場の要求とは少し離れているような気もしましたね。私はいらないけど。
その他のフレームワーク
ヒットチェックとか場面切り替えとか、そういうのを代行してくれるフレームワークは使いませんでした。Enchant.jsとか有名ですね。あとATARIのやつとか。まあ、そこまで手が回らなかったというのが本音です。どうなんですか？ラクですか？で、各論は次回。
