Google+ もご覧ください
ユーザーアイコン

cocos2d javascript bindingsでマルチプラットフォーム開発

第十回 2.xの環境におけるデバッグについて

Seasons

第十回 2.xの環境におけるデバッグについて

今回は、cocos2d jsbの環境におけるデバッグについて触れていきたいと思います。デバッグは開発中における重要なテクニックですし、開発効率の向上にもつながります。

cocos2d jsbのデバッグ機能実装の違い

JSBのデバッグ環境は、利用するJSBのバージョン1によってかなり変わってきます。連載で触れているバージョンは2.x系ですが現在、cocos2d-xチームでは3.0のバージョンを開発しており、先日3.0βがリリースされました。 筆者の方でも3.0を試しておりますが、2.xでは対応していない機能が対応されていたり、新しいレンダリングシステムによるパフォーマンス改善があったりと導入メリットが多いです。

今回は2.xの環境におけるデバッグについて触れていきます。さらに次回は3.xにおけるデバッグについて触れていきますので違いを比べて、利用する環境を見直してみるというのも良いかもしれません。

2.xにおけるデバッグ

さて、すでにインストールされている2.xの環境におけるデバッグについて解説していきましょう。

今回は新規プロジェクトでDebugTestというものを作成します。作成後は、ビルドし、実行できることを確認しておいてください。

cc.logによるログ出力

ビルドが出来ることを確認した後は、生成されたプロジェクトのhello.jsを開いてください。サンプルコードがすでに存在しますので、以下のコード(cc.log)を追加してみてください。

self.getPlayScene = function() {
  var scene = new cc.Scene();
  var layer = new cc.LayerGradient();
  layer.init(cc.c4b(0, 0, 0, 255), cc.c4b(0, 128, 255, 255));
  // + add
  cc.log("GameScene Created");
  var lab = "Houston we have liftoff!";

実行すると、Xcodeのコンソール画面に追加したコードの文字列の内容が表示されたかと思います。このようにプログラムを記述し、そのコードがちゃんと動作しているかを調べるには一番ベーシックな方法として、いわゆるprintfデバッグと呼ばれる標準出力に情報を出力するという方法があります。

JSBでは、Objective-CのNSLog、C言語のprintfのようにcc.logという関数が用意されており、実行時の環境にあわせて指定した文字列が標準出力に出力されます。

cc.log("出力したい文字列");

JavaScriptではprintfやNSLogなどのようなフォーマットは用意されていないため、基本的に出力したいオブジェクトを +演算子で結合して出力します。

例えば、サンプルコードのvar layerで宣言したオブジェクトを出力するには、

cc.log(layer);

とするだけでOKです。出力結果は、 Cocos2d: JS: [object LayerGradient]

と表示されます。オブジェクトがLayerGradientということがわかります。

cc.logに渡すオブジェクト

cc.logの引数に渡す際に、数値や文字列はそのまま表示されますが、先ほどの例のようにオブジェクトの種類しか表示されない場合があります。自分で定義したオブジェクトも同様です。

こういった場合には、JavaScriptの言語で用意されている関数を利用してデバッグ用の関数を作ってしまうのもありです。

例としてcc.pの座標オブジェクトを出力する関数を作成してみます。

dumpCCPの実装

    function dumpCCP(p) {
        if (!(typeof(p) == 'object'))
            return;
        if (p.hasOwnProperty('x') && p.hasOwnProperty('y')) {
            cc.log("(X:Y)" + " = " + p.x + ":" + p.y);
        } else {
            cc.log(p + " don't have x&y property");
        }
    }

JavaScriptの組み込み関数であるtypeofにて渡されたオブジェクトがまずobjectであること、次にオブジェクトが持つ関数hasOwnPropertyを使い、出力したいプロパティが含まれているかどうかを調べて含まれていればその値を出力する。という実装になります。

次のプログラムは、その利用例です。

var p = cc.p(200, 200);
dumpCCP(p);

このプログラムは、次のように出力されます。

Cocos2d: JS: (X:Y) = 200:200

この関数を応用して、是非、自分専用のデバッグ関数を作成してみてください。

まとめ

このようにJSBにおけるデバッグはcc.logの出力によるデバッグが基本であり、不便な点が多々あります。また、JavaScriptという動的な言語の特徴でもありますが、予期せぬところでクラッシュしてしまうと、原因が推測しづらいのも確かです。

そのため、デバッガによるブレークやウォッチといった機能が必要になりますが、2.xでは残念ながら実装はされているものの、使い易い代物ではないため今回はあえて割愛します。

次回予告

次回は、cocos2d-x 3.xにおけるデバッグ手法について解説します。基本的に2.xと同じcc.logが使えますが、それ以上に高機能なデバッガ環境が提供されており利用方法、接続方法について触れていく予定です。

今回のサンプルプロジェクトは、こちらからダウンロードできます。

ここでは、cocos2d-xのJSBを指す


Cocos2d jsb
タグ:

記事をリクエストする

関連記事

コメント

qxcxb@twitter

qxcxb@twitter2014-02-15T18:17:35Z 返信

たいへん勉強になります。ありがとうございます!