cocos2d-jsでHTML5版の開発を行うには？
気が付けば、cocos2d-JSが 3.6.1がリリースされており、最近の開発は、Cocos Code IDEを使って簡単にJS版の開発ができるようになっています。
Download Cocos2d-x Cocos2d-html5 Cocos Studio | Cocos2d-x
しかし、問題があり、Cocos Code IDEの現在のバージョンは、デバッグ機能が不完全でブレークポイントは動作するものの、変数のウォッチを行うことができません。
今後、対応されると思いますが、それまではデバッグがちゃんとできる環境でコーディングしたいものです。
私がCocos2d-JSを触っていた時期は、まず HTML5版で開発、デバッグし、ある程度動くようになったら、iOS/AndroidにDeployしてデバッグしていました。
コードの互換性があると言われているCocos2d-JSですが、iOS/AndroidのJSエンジンは、SpiderMonkeyですからブラウザとは異なります。SpiderMonkeyでは通るコードがブラウザに持って行くとエラーになることが多々ありました。
と言う事情もあり、まずは、HTML5版で開発して、iOS/Android版にDeployすることをお勧めします。
さて、本題に写りますが、Cocos2d JSは、Cocos Code IDEを前提としているため、いきなりHTML5版で開発する想定でパッケージが構成されていません。
そのため、付属しているテンプレートのプロジェクトフォルダでサーバーを起動し、実行しても以下のようにLoading画面から進みません。
ブラウザの開発ツールを表示すればエラーがでているので原因はすぐわかるのですが、cocos2d-html5のエンジンの読み込みに失敗しています。
これを修正するには、以下のようにします。
framewors/cocos2d-html5フォルダを実行したいテンプレートプロジェクトのframeworksフォルダにコピーします。
この状態で実行すると以下のようにテンプレートプロジェクトが実行できます。
しれっと書いているテンプレートプロジェクトの実行を行う際のお手軽な方法として、
js-template-default プロジェクトを実行したい場合は、
js-template-defaultを作業フォルダとして、ターミナルで以下のコマンドを実行します。
python -m SimpleHTTPServer
これで js-template-default をルートとして、8000番ポートでサーバーが立ち上がるので、ブラウザに
と打ち込み、開くとjs-template-default内のcocos2d-html5プログラムが動作します。
