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

フニゲの開発日記

Electronとか...

あれっぽいあれを作ってみる

Cocos2d-JS

 あれというのはちょっと前にヒットした物理ゲーム「Q」です。これは本当に面白い。
 ググるとサンプルコードが見つかるので、ああこれをパクっちゃえばいいのねと思うわけだが、残念ながらこれはBox2Dのようなので、
Pedro's Tech Mumblings: Freehand drawing with Cocos2d-x and Box2d

 流れ的に、ここはChipmunk2dで作ってみたいところ。
 前回・前々回のソースコードを流用して、必要なところだけ手を入れる。

...
var GameLayer = cc.Layer.extend({
    ctor:function () {
        ...
        world.gravity = cp.v(0,-100);
        ...
    },

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

    addBody:function (x, y, width, height, isDynamic) {
        ...
    },

    radius:20,
    addCat:function (array) {
        // 手書きのストロークを引数にして、シェイプをworldに追加する
        var center = this.getCatCenter(array);
        var moment = this.getCatMoment(array, center);

        var body = new cp.Body(array.length, moment);
        body.setPos(center);

        for (var i = 0; i < array.length; i++) {
            var x = array[i].x - center.x;
            var y = array[i].y - center.y;
            var shape = new cp.CircleShape(body, this.radius, cp.v(x, y));
            shape.setFriction(0.9);
            shape.setElasticity(0.1);
            world.addShape(shape);
        }
        world.addBody(body);
    },

    getCatCenter:function (array) {
        // 重心の計算...
    },

    getCatMoment:function (array, center) {
        // 慣性モーメントの計算...
    },
});

 重心はまあいいとして、慣性モーメントがわからない。適当に剛体力学のページをぐぐってモーメントの計算を入れておこう。

    getCatCenter:function (array) {
        var x = 0;
        var y = 0;
        for (var i = 0; i < array.length; i++) {
            x += array[i].x;
            y += array[i].y;
        }
        x /= array.length;
        y /= array.length;
        return cp.v(x, y);
    },

    getCatMoment:function (array, center) {
        var sum = 0;
        for (var i = 0; i < array.length; i++) {
            var x = array[i].x - center.x;
            var y = array[i].y - center.y;
            sum += cp.momentForCircle(1, 0, this.radius, cp.v(x, y));
        }
        return sum / array.length;
    },

 間違ってるかもしれないけど、まあ、ゲームだからね。
 タッチイベントのリスナーはこんな感じ。指の動きを配列に記録して、onTouchEndedでシェイプを作成する。

var pointArray = [];

var listener = new cc.EventListener.create({
    event:cc.EventListener.TOUCH_ONE_BY_ONE,
    onTouchBegan:function (touch, event) {
        var pos = touch.getLocation();
        pointArray = [pos];
        return true;
    },

    onTouchMoved:function (touch, event) {
        var pos = touch.getLocation();
        pointArray.push(pos);
    },

    onTouchEnded:function (touch, event) {
        var pos = touch.getLocation();
        pointArray.push(pos);
        gameLayer.addCat(pointArray);
        return true;
    },
});

f:id:funige:20150321201313p:plain

 いろいろ直したいところもあるけど、基礎はこんな感じで十分だろう。

サンプル

広告を非表示にする