2015.05.18

pixi.jsを勉強する[3] -Textured Mesh-

本稿はpixi.jsを勉強する[1] -基礎-
pixi.jsを勉強する[2] -PIXI Particles-の続きです。

今回は「公式のサンプル」を習作に勉強しようと思います。

Textured Meshはテクスチャに対してポイントを設定し、そのポイントを移動することで、テクスチャを歪曲(自由変形)させるというものみたいです。

今回はこんな鯉の画像をうねうねさせようと思います。
(イラストはシルエットデザインさんのを拝借してます。)

koi2

早速全文です。(9割サンプルのコピペです。)

var renderer = PIXI.autoDetectRenderer(400, 800, {backgroundColor: 0xAAEEFF});
document.body.appendChild(renderer.view);

// create the root of the scene graph
var container = new PIXI.Container();


var count = 0;

// build a rope!
var ropePoint = 20;
var ropeLength = 816 / ropePoint;

var points = [];

for (var i = 0; i < ropePoint; i++)
{
    points.push(new PIXI.Point(0,i * ropeLength));
}

var strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('http://jsrun.it/assets/6/V/p/W/6VpWB.png'), points);

container.addChild(strip);

container.rotation = -Math.PI/2;
container.position.x = 200;
container.position.y = 780;

var g = new PIXI.Graphics();

g.x = strip.x;
g.y = strip.y;
container.addChild(g);

stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);

// start animating
animate();

function animate() {

    count += 0.05;

    // make the snake
    for (var i = 0; i < points.length; i++) {

        points[i].y = Math.sin((i * 0.5) + count) * 15;

        points[i].x = i * ropeLength + Math.cos((i * 0.3) + count) * 15;

    }

    // render the stage
    renderer.render(container);

    renderPoints();
    
    stats.update();

    requestAnimationFrame(animate);
}

function renderPoints () {

    g.clear();

    g.lineStyle(2,0xffc2c2);
    g.moveTo(points[0].x,points[0].y);

    for (var i = 1; i < points.length; i++) {
        g.lineTo(points[i].x,points[i].y);
    };

    for (var i = 1; i < points.length; i++) {
        g.beginFill(0xff0022);
        g.drawCircle(points[i].x,points[i].y,10);
        g.endFill();
    };
}

上から見ていきます。

var count = 0;

変数countは、アニメーションさせるときに使うものです。

var ropePoint = 20;
var ropeLength = 816 / ropePoint;

続いてロープを作ります。

変数ropePointに分割数を入れて、画像の長さをropePointで割って、20分割した場合の1分割分の長さをropeLengthにいれてます。

var points = [];
 for (var i = 0; i < ropePoint; i++)
{
    points.push(new PIXI.Point(0,i * ropeLength));
}

そうしたら、変数pointsに「PIXI.point(x,y)」を使ってx,y座標をpushしていきます。

var strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('http://jsrun.it/assets/6/V/p/W/6VpWB.png'), points);

container.addChild(strip);

container.rotation = -Math.PI/2;
container.position.x = 200;
container.position.y = 780;

pointsを入れ終わったら「PIXI.mesh.Rope(texture,points)」で、テクスチャとメッシュ分割するpointsを設定して変数stripに入れます。

入れ終わったら、今回は縦に向けるために90度回転させてさらに位置を調整しています。

var g = new PIXI.Graphics();

上で作成したpointsをグリグリアニメーションで動かす際に、pointsが可視化できるように、グラフィック用の変数作ってます。ここはサンプルのママなので(アニメーションの中も)省きます。

count += 0.05;

// make the snake
for (var i = 0; i < points.length; i++) {

points[i].y = Math.sin((i * 0.5) + count) * 15;

points[i].x = i * ropeLength + Math.cos((i * 0.3) + count) * 15;

}

あとは、グリグリとアニメーションさせていきます。

変数カウントを増加させていくことで、常に動いていくようになります。数値が大きいほどうねりが大きくなります。

あとは各ポイントの位置を三角関数を使って変更させていきます。
(ここの三角関数もサンプルのままです。。。)

と、こんな感じで簡単にうねうねさせることが出来ました!!

凄いっすね。pixi.js!!

下にサンプル貼っておきます。
(テクスチャが表示されないので、線だけがうねうね動いてるかと思いますが・・・)
鯉がうねうね泳いでるのは下記リンクを開いて見てみてください。
pixi.jsデモ3(Textured Mesh)