Cocos2d-JSでアプリを作るにあたりCocos Code IDEを使ってみることにした。
完璧ではないもののコード補完も効くのでテキストエディタでJSのソースを書くよりは格段に楽。
eclipseベースであることに敬遠する人がいるかもしれないが私はありがたく使わせてもらうことにする。
実際に使ってみてはまった点を随時追記していくことにする。
JavaScript Frameworks のパス設定ではまる
Cocos Code IDE で JS を扱うにあたって Preferences ＞ Cocos ＞ JavaScript カテゴリで JavaScript Frameworks を設定する必要がある。
このパスの指定にちょっとしたトラップがある。
GitHub からクローンしたプロジェクトを Frameworks パスとして設定しようとするとエラーとなる。
frameworks/cocos2d-html5 以下が空っぽとなっているためらしい。
エラーダイアログには download-deps.py をエンジンのルートパスで実行するよう案内が出るがそもそもこのファイルが同梱されていない様子。
構築手順を追いかけるのも大変そうなので今回は 公式サイトのダウンロードページ から cocos2d-js-v3.x.zip をダウンロードして使用することにした。
デバッグ用ブラウザのアプリ描画領域の設定ではまる
チュートリアルやサンプルのゲームのコードを見ながらメニュー（cc.Menu）を試しに実装したところクリックに反応する箇所がずれる。
経験上、座標系がずれるのはアプリケーション領域と描画領域の不整合と考え「index.html の canvas タグ」「main.js の cc.view.setDesignResolutionSize() 呼び出し」の領域サイズと思われる箇所を修正してみる。
しかし状況変わらず。
エンジンのバグかと一瞬思ったがここまでばかばかしいバグが残っているはずもない。
そもそもデバッグ用ブラウザのサイズがおかしい。前述の手順で設定した値が反映されていない模様。背景画像がゆがんで表示されていることからもわかる。
しかし IDE の Preferences を確認しても領域サイズを指定するような項目がない。
で、ようやくあるファイルの存在に気づいた。そのファイルとは config.json 。
このファイルに記述されている init_cfg というプロパティの子プロパティに「width」「height」が探していた項目だった。
これらの値を自分が現在想定しているスクリーンサイズに合わせて修正、実行。
無事、期待したとおりに表示され Menu アイテムのクリックも座標がずれることなく反応した。
このプロパティの書き換えが必要な件は公式サイトのチュートリアルやラーニングの最初の流れで説明がない気がする。
私が見落としているだけであればいいが、はまったときに解決法に気づきにくい内容だと思った。
プロパティを上書きしてしまいデバッグ用ブラウザが起動しない状況にはまる
アプリ中の表示物は cc.Sprite を拡張して実装するわけだがこのとき tag というプロパティを自前で用意してしまったために問題発生。
tag は cc.Node で用意されているプロパティ。cocos2dとして重要なもの。
これを上書きする形で用意してしまったためデバッグ用ブラウザのための事前ビルドを行う際にエラーが発生した。
別名のプロパティとすることで解決。
ちなみに今回のケースでは次のようなエラーが出ていた。
JS: C:/{略}/PrebuiltRuntimeJs/debugruntime/script/jsb_cocos2d.js:1483:Error: js_cocos2dx_Node_setTag : Invalid Native Object
対応できた上での推測だが「Invalid Native Object」というエラーであることがポイント。
プロパティを上書きしてしまったため cocos エンジンが期待する構成では無いと判定されている。
これはまあ私がドキュメントをきちんと読んでいなかったために起きたことではあるが、症状から原因が推測しづらい現象だと思う。
jsbでのバインドに失敗するケースがある
これは IDE 自体の不具合ではないものの、結構やっかいな問題。
前述の項目も関連事例と思われる。
IDE が起動するシミュレータは、 JavaScript コードの呼び出しを jsb という仕組みで C++ の呼び出しに置き換えて動作しているようだが、オブジェクトのバインドに失敗してエラーを吐くことがある。
ブラウザベースで動かすと期待通り動作するため、jsb が判断できないケースがある模様。
どのようなパターンで発生するかはまだ絞り込めていないが、こういうことがあるというメモとして記述しておく。
これは PrebuiltRuntime と framework のバージョンが一致していないと発生するようだ。
Cocos Code IDE では runtime へのパスは実行単位ごとの設定なのに framework のパスは IDE の全体設定となるため、注意していないとバージョンのずれが発生してしまう。
気を付けていきたい。
Mac環境でシミュレータが起動しない
Mac 環境で PrebuiltRuntimeJs.app を起動する際にエラーが発生する現象に遭遇。
これはIDEが参照するフレームワークのバージョンとプロジェクトのruntimeフォルダ内の app のバージョンが一致していないと発生するようだ。
もしかすると別項目の jsb のバインド失敗の件（これはWindows環境だった）も同様にフレームワークと exe のバージョンが一致していなかったために起きていたのかもしれない。（確認）