cocos2d-js(cocos2d-html5) v3 で遊んでみる

インストール関連はこちらを参考にしました
http://qiita.com/turusuke/items/741267bbfc81a287438a

とりあえずhello worldを弄ってタッチでスプライトを動かすところまで。

main.js

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

メイン。
サンプルとほぼ変わらず。

app.js

var PLAYER_WIDTH = 24;
var PLAYER_HEIGHT = 32;


var MainLayer = cc.Layer.extend({
    winSize: null, 
    touchDiff: null, 
    player: null, 

    /**
     * コンストラクタ
     */
    ctor:function () {
        this._super();

        // 画面サイズ
        this.winSize = cc.winSize;

        // 自機設定
        var frames = [];
        for (var i = 0; i <= 2; i++) {
            frames.push(cc.SpriteFrame.create(res.Player_png, cc.rect(i * PLAYER_WIDTH, 0, PLAYER_WIDTH, PLAYER_HEIGHT)));
        }
        var animatoin = cc.Animation.create(frames, 0.25);
        this.player = cc.Sprite.create(res.Player_png, cc.rect(0, 0, PLAYER_WIDTH, PLAYER_HEIGHT));
        this.player.setPosition(this.winSize.width / 2, this.winSize.height / 2);
        this.player.runAction(cc.RepeatForever.create(cc.Animate.create(animatoin)));
        this.addChild(this.player);

        // イベント設定
        var self = this;
        cc.eventManager.addListener({
            event: cc.EventListener.TOUCH_ALL_AT_ONCE, 
            onTouchesBegin: function(touches, event) {
                var now = touches[0].getLocation();
                var prev = touches[0].getPreviousLocation();
                self.touchDiff = {
                    x: now.x - prev.x, 
                    y: now.y - prev.y, 
                }
            }, 
            onTouchesMoved: function(touches, event) {
                var now = touches[0].getLocation();
                var prev = touches[0].getPreviousLocation();
                self.touchDiff = {
                    x: now.x - prev.x, 
                    y: now.y - prev.y, 
                }
            }, 
            onTouchesEnded: function(touches, event) {
                self.touchDiff = null;
            }, 
            onTouchesCancelled: function(touches, event) {
                self.touchDiff = null;
            }
        }, this);

        // updateメソッド利用
        this.scheduleUpdate();

        return true;
    }, 

    /**
     * update
     */
    update: function() {
        // 自機移動
        if (this.touchDiff) {
            var pos = this.player.getPosition();
            pos.x = pos.x + this.touchDiff.x;
            pos.y = pos.y + this.touchDiff.y;
            if (pos.x >= this.winSize.width - PLAYER_WIDTH) {
                pos.x = this.winSize.width - PLAYER_WIDTH;
            } else if (pos.x <= PLAYER_WIDTH) {
                pos.x = PLAYER_WIDTH;
            }
            if (pos.y >= this.winSize.height - PLAYER_HEIGHT) {
                pos.y = this.winSize.height - PLAYER_HEIGHT;
            } else if (pos.y <= PLAYER_HEIGHT) {
                pos.y = PLAYER_HEIGHT;
            }
            this.player.setPosition(pos);
        }
    } 

});


var MainScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MainLayer();
        this.addChild(layer);
    }
});

シーン、レイヤー。
イベントの設定がv2系とはかなり変更あり。
v3はListener方式なので要注意。
自機はアニメーションさせています。

resource.js

var res = {
    Player_png : "res/Player.png"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

リソース。
サンプルとほぼ変わらず。