Pixi.jsを初めて触って簡単にアニメーションを作成してみた話（その1）

こんにちは。CTOのづやです。
最近のサイトはぐいんぐいんと動いてたりしますよね。私も負けずにぐいんぐいん動かしたいなと思っていたのですが、素で書くにはなかなか難易度が高そうです。

そんなとき、弊社のエンジニア・ハカセがPixi.jsというライブラリを教えてくれました。Canvasライブラリの中では最速とのこと。
そこで今回は、そのPixi.jsを初めて触って簡単にアニメーションを作成してみた話を紹介したいと思います。

http://www.pixijs.com/

Pixi.jsの基本

まずは公式サイトのダウンロードボタンを押し、遷移先のGitHubよりコードを落としてきます。

https://github.com/GoodBoyDigital/pixi.js

ダウンロードした中のexamplesフォルダの中には、サンプルがたくさんあります。
1つ目のサンプルを見てみましょう。

公式のサンプル1

動物がくるくるまわっております。

script部分は以下のような感じになってました。

// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);

// create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300);

// add the renderer view element to the DOM
document.body.appendChild(renderer.view);

requestAnimFrame(animate);

// create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png");

// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);

// center the sprites anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;

// move the sprite to the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;

stage.addChild(bunny);

function animate() {
    requestAnimFrame(animate);

    // just for fun, let's rotate mr rabbit a little
    bunny.rotation += 0.1;

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

ざっくり言えば、ステージとレンダリング用のエリアを作って画像を配置し、画像の角度をちょっとずつ変えてるみたいなことでしょうか。

Pixi.jsでアニメーションを作成する

先ほどのサンプルのコードを参考に、とりあえず自分でコメントをつけながら書いてみました。以下ご参照ください。

画像を動かしてみるデモ

window.addEventListener('load', function(){

	// 使う変数を指定
	var isScaleUp = true;
	var WIDTH = 640 , // ステージの横幅
	HEIGHT = 640 , // ステージの高さ
	SCALE_CHANGE_NUMBER = 0.05 , // アニメーション1回単位で変化させるスケール
	SCALE_UP_LIMIT = 0.8 , // 最大のスケール
	SCALE_DOWN_LIMIT = 0.2; // 最少のスケール

	// ステージを作ります。引数で背景色が渡せます
	var stage = new PIXI.Stage(0xff00ff);

	// 横幅と高さを指定してステージを作ります
	var renderer = PIXI.autoDetectRenderer(WIDTH , HEIGHT);

	// 描画エリアをbodyに追加します。
	document.body.appendChild(renderer.view);

	// アニメーションフレームで「animet」関数を呼びます
	requestAnimFrame(animate);

	// 画像パスからテクスチャを作成します。
	var texture = PIXI.Texture.fromImage("img/taka.jpg");

	// テクスチャをもったスプライトを作成します。
	var sprite = new PIXI.Sprite(texture);

	// 回転する点を中心にします。(デフォルトは1,1で左上)
	sprite.anchor.x = 0.5;
	sprite.anchor.y = 0.5;

	// スプライトをセンターに配置します。
	sprite.position.x = 320;
	sprite.position.y = 320;

	// スケールを半分にする
	sprite.scale = new PIXI.Point(0.5 , 0.5);

	// ステージにテクスチャを追加します。
	stage.addChild(sprite);

	/**
	 * アニメーション用の関数
	 */
	function animate() {
		// 1回しか呼ばれないので、もう1回自分を呼びます。そうやって永遠に動き続けます
	    requestAnimFrame(animate);

	    // 角度に0.1を追加します。
	    sprite.rotation += 0.1;

	    // あまりにもサンプルのままなので、スケールも変化させてみる
	    var nowScale = bunny.scale ,
	    pointX = nowScale.x,
	    pointY = nowScale.y;

	    // スケールをアップしていったりダウンしていったりさせる
	    if(isScaleUp) {
	    	pointX += SCALE_CHANGE_NUMBER;
	    	pointY += SCALE_CHANGE_NUMBER;

	    	if(pointX > SCALE_UP_LIMIT) {
		    	pointX = SCALE_UP_LIMIT - SCALE_CHANGE_NUMBER;
		    	pointY = SCALE_UP_LIMIT - SCALE_CHANGE_NUMBER;
		    	isScaleUp = false;
	    	}

	    } else {
	    	pointX -= SCALE_CHANGE_NUMBER;
	    	pointY -= SCALE_CHANGE_NUMBER;

	    	if(pointX < SCALE_DOWN_LIMIT) {
		    	pointX = SCALE_DOWN_LIMIT + SCALE_CHANGE_NUMBER;
		    	pointY = SCALE_DOWN_LIMIT + SCALE_CHANGE_NUMBER;
		    	isScaleUp = true;
	    	}
	    }

	    // 新しいスケールの値を設定
	    sprite.scale = new PIXI.Point(pointX , pointY);

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

さいごに

いかがでしたでしょうか。今回自分で書いて、なんとなく感覚がつかめた気がしますので、次回以降もうちょっと試していきたいと思います。

みなさんもぜひチャレンジしてみてください。それでは、また。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。