PIXI.jsで描画を行う その２（HTML5でブラウザゲームを作る）

前回のスプライトを表示の続きです。

Pixi.jsを使用しWebGLで描画することが出来ましたが、何が凄いのかが良くわからない人も多いと思います。
WebGLの利点はそのパフォーマンスです。通常のWebではなかなか実現できない描画速度が得られます。

速度を実感するにはアニメーションサンプルを作ってみます。
今回はパフォーマンスを知るためのサンプルなので実際にスプライトを動かしそのフレームレートを表示したいと思います。

#フレーム処理
まず、描画更新を行うためのフレームループを作ります。この中で各フレームの処理を行う事になります。
JavaScriptで時間単位のループといえばsetTimeout、setInterval等が思い浮かびますが、これらは精度が出ず高速ループには全く向きません。
今回は「requestAnimationFrame」を利用します。これはブラウザ側が提供してくれている描画更新用の仕組みで、処理したい関数を渡すことで1/60間隔のタイミングでそれを実行してくれるという物です。（厳密には少し違います）
実行は一度のみなのでsetInterval的な動きではなくsetTimeoutの様な動きです。
連続で実行したい場合はその関数の中で自分を再度キックする処理を記述する必要があります。

// 1/60間隔で処理を実行
var animationLoop = function () {

	// ※ここに実際のフレーム処理を記述

	window.requestAnimationFrame(function () {
		animationLoop();　// 1/60のタイミングで自分自身を実行
	});
};

この例だと、最初にanimationLoop関数を一度呼ぶだけで、1/60間隔で処理（フレーム処理）が実行され続けます。
この処理の中でスプライトを動かします。
スプライトを動かす方法はx,y座標（プロパティ）を更新するだけです。
例えば、1/60間隔で1pxずつ右に移動させたいのであれば、sprite.x += 1; という処理をこのループで実行すればOKです。
そして忘れてはいけないのはPixi.jsの描画更新は基本的に手動だということです。
なので、renderer.render(stage);でステージの更新を行う必要があります。
これもフレーム処理内で実行されるようにします。

#FPSの表示
stats.jsという便利なライブラリがありますのでそちらを使用します。
https://github.com/mrdoob/stats.js/

var stats = new Stats();
stats.setMode(0);

// 表示用エレメントのスタイル指定
$(stats.domElement)
	.css("position", "absolute")
	.css("z-index", 9999)
	.css("top", 0)
	.css("right", 0)
	;

// DOMへ追加　※$parentは追加したい親
$parent.append(stats.domElement);

これで画面右上にFPS表示用の枠が表示されます。
そして実際にFPSを更新するためのメソッドを先ほどのフレーム処理内に記述します。

　　stats.update();

これだけです。

ここまで用意できれば後は、実際にフレーム毎のアニメーション処理を書くだけです。
サンプルとしてトランプカード54枚ほどスプライト化してステージに追加してランダム方向に移動させました。

実際の動くサンプルはこちらでご覧いただけます。
http://hasemonmon.net/blog/01/
※10秒後にアニメーションが止まるようにしています。画面クリックで時間をのばせます。

最近のスマホであれば問題なく60fps出ると思います。

PIXI.jsを利用して作成したブラウザゲーム(ハイブリッドアプリ)

リバーシ
Mine Reversi

実際にインストールしてプレイ後にストアでレビューしてもらえると嬉しいです。