読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

物理モデルにテクスチャを貼るところ

Cocos2d-JS

 前回の続き。
 前回の描画はcc.PhysicsDebugNodeにお任せだったが、一応テクスチャを貼っておこう。ここには魔法のメソッドはない。毎割り込み地味に位置と角度を調べて貼り直すだけだ。

 まずaddBody()の最後にコードを追加して、シェイプと同じ大きさのスプライトも作って貼っておく。

    addBody:function (x, y, width, height, isDynamic) {
        ...
        // 以下を追加
        var sprite = new cc.Sprite("res/HelloWorld.png"); // 面倒なのでいつもの画像
        sprite.setPosition(x, y);

        // 画像のサイズが800x450なので、shapeに合うように縮小して使います
        sprite.scaleX = width / 800.0;
        sprite.scaleY = height / 450.0;
        this.addChild(sprite);

        // 後で使うので配列に保存しておく
        shape.image = sprite;
        shapeArray.push(shape);
    },

 shapeArrayはとりあえずグローバルで定義しておくことにして。

var shapeArray = [];

 毎割り込み通るupdateメソッドに更新処理を書く。

    update:function (dt) {
        world.step(dt);

        // 以下を追加
        for (var i = 0; i < shapeArray.length; i++) {
            var shape = shapeArray[i];
            shape.image.x = shape.body.p.x;
            shape.image.y = shape.body.p.y;
            var angle = Math.atan2(-shape.body.rot.y, shape.body.rot.x);
            shape.image.rotation = angle * 180 / 3.14;
        }
    },

 これだけだ。

f:id:funige:20150321183138p:plain

 ちょっともの足りないので、イベントリスナーを改造して、クリックで消せるようにするテスト。

var listener = new cc.EventListener.create({
    event:cc.EventListener.TOUCH_ONE_BY_ONE,
    onTouchBegan:function (touch, event) {
        var pos = touch.getLocation();

        // すでに箱がある場所をタップしたら箱が消えるようにしてみよう
        for (var i = 0; i < shapeArray.length; i++) {
            var shape = shapeArray[i];
            if (shape.pointQuery(cp.v(pos.x, pos.y)) != undefined) {
                world.removeBody(shape.getBody());
                world.removeShape(shape);
                gameLayer.removeChild(shape.image);
                shapeArray.splice(i, 1);
                return;
            }
        }

        // 何も無い場所をタップしたときは箱を追加する
        gameLayer.addBody(pos.x, pos.y, 50, 50, true);
        return true;
    },
});

サンプル

広告を非表示にする