[Cocos2d-x]新しいCocos Code IDE 1.0.0-rc1でC++コードとLua・JavaScriptコードの同時デバッグができるようになりました

2014.08.14

Cocos Code IDE 1.0.0-rc1がリリースされました!

本日Cocos Code IDE 1.0.0-rc1がリリースされたので早速導入してみます。

主な変更点は以下です。

  • C++コードとの同時デバッグ
  • スプライトシートのプレビュー
  • Eclipseプラグインのサポート
  • Cocos2d-x v3.0以降のLua、jsbプロジェクトのインポート
  • コード補完の適正化
  • キャメルケース補完の追加
  • バグの修正

C++との同時デバッグはCocos2d-xをバージョンアップし、異なる挙動になってしまった時の確認に使えますね。

公式のサンプルGIFアニメーションだと、Spriteクラスを呼び出した時のTextureCacheの挙動についてデバッグしています。

スプライトシートのプレビューと補完は便利だと思います。存在しないフレームを呼び出すミスがなくなります。

あとの変更はEclipse本来の機能が使えるようになっている印象です。

Cocos Code IDE 1.0.0-rc1の導入(Mac環境)

前提条件

  • Cocos2d-x v3.0以降がインストール済み(Cocos Code IDEがCocos2x 3.2をバンドルしているので3.2推奨
  • Xcodeがインストール済み

スクリーンショット 2014-08-14 11.39.26

Cocos Code IDE for Mac JDK 64bitをダウンロードします。

ダウンロードしてきたcocos-code-ide-mac64-1.0.0-rc1.dmgをダブルクリックでマウントし、ドラッグ&ドロップでアプリケーションディレクトリへ入れます。

スクリーンショット 2014-08-14 11.42.31

これでインストールは終わりました。

既存のCocos Code IDEをインストールしている方は以下のようになると思われます。

スクリーンショット 2014-08-14 11.45.10

既存のCocos Code IDEは消してしまっても構いません。心配でしたら古い方をリネームすることをお勧めします。

スクリーンショット 2014-08-14 11.55.50

早速、起動しようとしたら以下のダイアログが出ました。

スクリーンショット 2014-08-14 11.48.34

実行するには

[システム環境設定][セキュリティとプライバシー] → 左下の鍵マークを解除し、[ダウンロードしたアプリケーションの実行許可]のラジオボタンをすべてのアプリケーションを許可に変更します。

一度実行したら設定を戻して構いません。

次にワークスペースを確認されます。好みのパスを指定したらOKを押します。

Cocos Code IDEの設定は以前私が書いた10分でできるCocos Code IDEの導入手順をご覧下さい。

Xcodeとの同時デバッグ

前回と同様、プロジェクト作成時にデモで用意されている、CocosLuaGameを作成します。

スクリーンショット_2014-08-14_12_04_21

右下のPlayを押したら開始されます。

スクリーンショット 2014-08-14 12.05.56

以上が動作することを確認したら、C++のコードプロジェクトを作成します。

スクリーンショット 2014-08-14 12.12.16

[プロジェクトを右クリック] → [Cocos Tools] → [Add native Code Support]

スクリーンショット 2014-08-14 12.16.49

Androidのパッケージ名を聞かれます。基本的には逆ドメインやプロジェクト名の逆ドメインを設定します。私はjp.classmethod.cocos2dx.CocosLuaGameにしました。

数分かかるよ、という旨のダイアログが出ます。CocosLuaGameプロジェクトで1分かからないくらいで終わりました。

スクリーンショット 2014-08-14 12.23.08

Finderでワークスペース内の

[CocosLuaGame] → [frameworks] → [runtime-src] → [proj.ios_mac] → [CocosLuaGame.xcodeproj]

を開きます。適当なところでブレークポイントを張ります。音が出ていたのでAudioの箇所でブレークポイントを張りました。CDAudioManager.mの90行目と96行目BGMのロードと再生の箇所にしました。(Cocos2d-x v3.2の行数です。)

スクリーンショット 2014-08-14 13.01.18

ターゲットを[Cocos Lua Game Mac]にして、Command + Rでいつもの長いビルドを実行します。ビルドが終わると実行されます。最初の画面を表示したままCocos Code IDEに戻ります。

Cocos Code IDEでもブレークポイントを張りましょう。私はmain.luaの213行目と215行目、同じくBGMロードと再生の箇所にブレークポイントを張りました。

スクリーンショット 2014-08-14 13.04.38

その後Cocos Code IDEでもデバッグ起動をします。

スクリーンショット 2014-08-14 12.30.11

[プロジェクトを右クリック] → [Debug As] → [Debug Configurations...]

スクリーンショット 2014-08-14 13.03.12

こちらの一番下にあるRemote Debugのラジオボタンを有効にし、

  • Platform: Mac
  • Host IP: 127.0.0.1
  • Target IP: 127.0.0.1

を設定し、右下のDebugボタンを押します。

まず、XcodeのCDAudioManager.mの90行目のブレークポイントで止まります。この時点でCocos Code IDEとXcodeのログが同期されているのがわかります。

Xcodeのブレークポイントを流すと96行目でまた止まりますのでさらに流して下さい。

Cocos Code IDEのデバッグはファイル変更の保存時に実行されるようで、main.luaの75行目を

x = x + 10

に変更して保存したら、Cocos Code IDEのブレークポイントで止まるのが確認できます。その後、XcodeのCDAudioManager.mのブレークポイントで再び止まり、Cocos Code IDEを経由して戻ってくる事が確認できました。

スクリーンショット 2014-08-14 14.53.55

スクリーンショット 2014-08-14 14.54.39

参考:How_to_Debug_Cocos2d-x_Lua_Game_Using_Code_IDE#How-to-Debug-C

まとめ

C++との同時デバッグはVisualStudioとCocos Code IDEでも行えるようなので、Win環境の人にもありがたい機能だと思います。

元々Eclipseに慣れていた方は、Cocos Code IDEがEclipseと微妙に違って使いづらかったかもしれませんが、Cocos Code IDE 1.0.0-rc1で今一度確認してみると良いかもしれません。

Eclipseのプラグインが入れられるようになったので、vimバインドやプロジェクトのバージョン管理が使いやすくなりました。

Lua・JavaScriptバインディングでは、Cocos Code IDEはほぼ必須だと思いますので、是非とも有効活用して下さい。