Subscribed unsubscribe Subscribe Subscribe

Season

FaZe UP

cocos2d-jsでHTML5版の開発を行うには?

cocos2d cocos2djs

気が付けば、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画面から進みません。

f:id:Seasons:20150627231610p:image

ブラウザの開発ツールを表示すればエラーがでているので原因はすぐわかるのですが、cocos2d-html5のエンジンの読み込みに失敗しています。

 

これを修正するには、以下のようにします。

f:id:Seasons:20150627232530p:image

framewors/cocos2d-html5フォルダを実行したいテンプレートプロジェクトのframeworksフォルダにコピーします。

この状態で実行すると以下のようにテンプレートプロジェクトが実行できます。

f:id:Seasons:20150627232753p:image

しれっと書いているテンプレートプロジェクトの実行を行う際のお手軽な方法として、

js-template-default プロジェクトを実行したい場合は、

js-template-defaultを作業フォルダとして、ターミナルで以下のコマンドを実行します。

python -m SimpleHTTPServer

これで js-template-default をルートとして、8000番ポートでサーバーが立ち上がるので、ブラウザに

http://localhost:8000

と打ち込み、開くとjs-template-default内のcocos2d-html5プログラムが動作します。