こんにちは。
WebGLで2Dアニメーションを動かすためのライブラリpixi.jsを試してみました。
pixi.js公式サイト
ビジュアルプログラミング系のフレームワークやライブラリはいろいろありますが、
それを試すときに僕がよくすることは「サインカーブを描かせてみる」ことです。
pixi.jsでも例のごとくサインカーブを描いてみました。
準備
pixi.jsをダウンロードします。
git clone https://github.com/GoodBoyDigital/pixi.js.git
cloneしたディレクトリを開きて/bin/pixi.min.jsを使えばOKです。
あとは公式サンプルを参考にして適当に作っていきましょう。
実装
今回使ったファイルはこれだけ。
画像も必要ですが、WebGLの仕様上ローカルの画像は描画できないため公式サンプルの画像を流用させていただきました。 -> http://www.goodboydigital.com/pixijs/examples/4/assets/bubble_32x32.png
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.jsでサインカーブ</title>
<script src="js/pixi.min.js"></script>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', start, false);
var w = 1024;
var h = 768;
var starCount = 10;
var stars = [];
// WebGLの仕様上ローカルの画像は使えないので注意
var texture = new PIXI.Texture.fromImage("images/myFace.png");
function start() {
// ステージの作成
renderer = PIXI.autoDetectRenderer(w, h);
stage = new PIXI.Stage;
document.body.appendChild(renderer.view);
// 画像オブジェクトの作成
for (var i = 0; i < starCount; i++) {
var temp = new PIXI.Sprite(texture);
temp.position.x = 1;
temp.position.y = 1;
temp.anchor.x = 0.5;
temp.anchor.y = 0.5;
stars.push({ sprite: temp, x: temp.position.x, y: temp.position.y });
stage.addChild(temp);
}
requestAnimationFrame(update);
}
// 無限ループさせて画像オブジェクトの位置を更新する
function update() {
for (var i = 0; i < starCount; i++) {
// 画像オブジェクトの動き
stars[i].sprite.position.x = (new Date().getTime() + i*100)%w;
stars[i].sprite.position.y = h/2 + h*0.3*Math.sin(i + (new Date().getTime())/200);
}
renderer.render(stage);
requestAnimationFrame(update);
}
</script>
</body>
</html>
それらしい動きになりました。
動作するサンプル: http://joytomo.lolipop.jp/pixijsStudy/
簡単ですし、いろいろ使い道がありそうですね！