cocos2d-html5を覗いてみよう

cocos2d-html5で遊んでみたでちょっと触ってみたので、今回はもう少しソースコードを調査してみます。
タッチイベントの実装方法が変更になっているので、タッチでオブジェクトを移動するところまで発展させてみました。

デフォルトのソースコード分析

アプリケーションはmain.jsから始まります。
cc.LoaderScene.preloadでsrc/resource.jsに定義されたg_resourcesを先に読み込んで、callBackで最初のシーンを起動しているようです。
HelloWorldだと少しカッコ悪いので、GameSceneを準備して最初のシーンに指定してみましょう。

GameSceneの準備

src/scene/gameScene.jsを作成してコードを記述していきます。
単純に「タッチ」と表示してみましょう。

var GameScene = (function(){
    //画面レイヤーの定義
	var Layer = cc.Layer.extend({
        //初期化
        init : function () {
            //共通処理
            this._super();
            var size = cc.director.getWinSize();
            //文字描画
            this.obj = cc.LabelTTF.create("タッチ!", "Arial", 38);
            this.obj.setPosition(size.width / 2, size.height/2);
            this.addChild(this.obj, 5);
            return true;
        }
    });
    //画面定義の返却
    return cc.Scene.extend({
        onEnter:function () {
            this._super();
            var layer = new Layer();
            layer.init();
            this.addChild(layer);
        }
    });
})();

その他の準備

res/resource.jsとproject.jsonを修正して準備したシーンを利用できるようにしましょう。

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : true,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",
    "modules" : ["cocos2d"],
	#準備したシーンを追加
    "jsList" : [
        "src/resource.js",
        "src/scene/gameScene.js",
    ]
}

#無駄なファイルを読み込まないようにデフォルトを削除
var res = {
};
var g_resources = [
];

main.jsの修正

最後にmain.jsを書き換えてブラウザで動作させてみましょう。
プロジェクトのディレクトリで簡易webサーバーを起動して確認して下さい。

cc.game.onStart = function(){
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
	cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new GameScene());
    }, this);
};
cc.game.run();

タッチイベントの追加

ゲームシーンのinitでタッチイベントをリスナーに登録します。

・・
this.ship.setPosition(size.width / 2, size.height/2);
this.addChild(this.ship, 5);
//タッチイベント
var self = this;
var touch = cc.EventListener.create({
    event: cc.EventListener.TOUCH_ALL_AT_ONCE,
    swallowTouches: true,                
    //タッチ開始
    onTouchesBegan:function (touches, event) {
        self.touched = touches[0].getLocation();
    },
    //タッチ移動
    onTouchesMoved:function (touches, event) {
        self.touched = touches[0].getLocation();
    },
    //タッチ終了
    onTouchesEnded:function (touches, event) {
        self.touched = null;
    },
    //タッチキャンセル    
    onTouchesCancelled:function (touches, event) {
        self.touched = null;
    }
});
cc.eventManager.addListener(touch,this);
this.scheduleUpdate();
return true;

ゲームシーンのupdateメソッドで文字の移動を行います。

update : function(dt){
    var pos = this.obj.getPosition();
    pos = cc.p(pos.x,pos.y);
    if(this.touched){
        pos.x = this.touched.x;
        pos.y = this.touched.y;
        this.obj.setPosition(pos);
    }
}

画面をリロードして文字をドラッグで移動させてみましょう。

3.0からはcc.eventManager.addListenerにタッチイベントを登録して画面タッチを検出するようです。

確認しながらなので少しづつですが、次回以降も地道に調べてみます。