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

フニゲの開発日記

Electronとか...

メッシュ変形

Pixi.js

 Pixi.jsのメッシュ操作は気が抜けるぐらい簡単だ。昔Cocos2d-html5でこれと同じ事をやろうとして何日かかったことか。

var renderer = PIXI.autoDetectRenderer(800, 600);
//var renderer = new PIXI.CanvasRenderer(800, 600); // Canvasでも動くぞ
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();

var verts = new Float32Array([0, 0, 300, 0, 0, 300, 400, 400]);
var uvs = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
var triangles = new Uint16Array([0, 1, 2, 3, 2, 1]);

var texture = PIXI.Texture.fromImage('res/ship.png');
var ship = new PIXI.mesh.Mesh(
    texture,
    verts, uvs, triangles, 
    PIXI.mesh.Mesh.DRAW_MODES.TRIANGLES);

var touchMove = function (event) {
    // 矩形の右下の点を移動するテスト
    verts[6] = event.data.global.x;
    verts[7] = event.data.global.y;
    ship.dirty = true;
};

ship.on("mousemove", touchMove);
ship.on("touchmove", touchMove);
ship.interactive = true;
stage.addChild(ship);

animate();

function animate() {
    requestAnimationFrame(animate);

    renderer.render(stage);
}

 PIXI.mesh.MeshはPIXI.Spriteと同じように移動・回転・スケールもできる。anchorの設定はできない。頂点データに触ったらdirtyフラグをセットするだけで再計算してくれる。
 あと、長細いものをうねうね動かしたいときは、専用のPIXI.mesh.Ropeというクラスが用意されているのでそっちを使えばいいはず。

f:id:funige:20150527122319p:plain

サンプル

広告を非表示にする