簡単アニメーション！Pixi.jsを触ってみる！
〜（7）新しいサンプルを触ってみる
Pixi.jsはJavascriptで簡単にアニメーションが作れるライブラリです。
しばらく見ていない間に公式サイトのexamplesに新しいサンプルが追加されたようです。（いや、お前が見てなかっただけだろ！という感じではあるのですがw）
というわけで、今更のように見ているうちに、それこそ今更のような気付きがいろいろとありましたので、恥ずかしがらず、いくつか紹介したいと思います。
(Pixi.js、まだまだ奥が深いですね。。。いつになったら入門終わるのやら。。)
example.15c Filters-a-plenty!
[画像：http://www.pixijs.com/examples/より]
これは必見！
Pixi.jsの色々なフィルタの効果を、このサンプル1つで確認することができます。
フィルタの使い方。
サンプルを見てるうちに、フィルタの使い方が判ってきました。
フィルタはStageや、Container、Spriteなどの.filters要素にフィルタオブジェクトの配列を登録することで有効になるようです。
例えば、Stageにフィルタを登録するには、下記のように書きます。
// Stageを作る
var stage = new PIXI.Stage(0x000000);
var prev = $("#pixiview").get(0); // jQuery
var renderer = PIXI.autoDetectRenderer(width, height);
prev.appendChild(renderer.view);
// Blurフィルタ
var blurFilter = new PIXI.BlurFilter();
blurFilter.blur.x = 32;
blurFilter.blur.y = 32;
// StageにBlurフィルタを登録
stage.filters = [blurFilter];
こんな感じになります。
blurの利き具合を後で調整したい時などは、
animate()などで、blurFilter.blur.xやblurFilter.blur.yを調整する感じですね。
もちろん、フィルタには様々な効果が用意されていて、このサンプルで確認することができるので、いろいろ触ってみてください。
念のため、このサンプルで使われてるフィルタのドキュメントへのリンクを貼っておきます。
- DisplacementFilter
- BlurFilter
- PixelateFilter
- InvertFilter
- GrayFilter
- SepiaFilter
- TwistFilter
- DotScreenFilter
- ColorStepFilter
- CrossHatchFilter [なんかドキュメントがありませんねぇ。。。]
- RGBSplitFilter [なんかドキュメントがありませんねぇ。。。]
あれれ？最後の方、ドキュメントがありませんでしたw
フィルタはWebGL環境でしか有効にならない
便利なフィルタですが、WebGL環境でしか使えないようです。
ドキュメントに、下記記載があります。
IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. To remove filters simply set this property to 'null'
dat.gui
ちょっとPixi.jsから外れますが、このサンプルでは、パラメータを変更するためのUI作成に、dat.guiというライブラリを利用しているようです。
今まで知らなかったけど、パラメータを変更して効果を確認するサンプルにもってこいなライブラリですね。素晴らしい！
example.18 Bunnymark.. with sweatbands
[画像：http://www.pixijs.com/examples/より]
これも是非触ってみてください！
クリック！クリック！クリックしまくって！！！
すると、どしゃ〜！っと、四角いウサギが降ってきますw
私のMBA2013だと3万匹くらい出て来ても、60FPS近くで動く！
気付き。$(window).resizeへの対応
で、サンプルの本質ではないんでしょうけど、今更ながら、このサンプルを見ていて全画面対応していることに気付きました。
ソースの冒頭でリサイズイベントに対応するための処理が記載されています。
$(window).resize(resize)
window.onorientationchange = resize;
window.onorientationchange時もリサイズ処理が呼び出されるので、スマホの画面回転にも対応できますね。
実際のリサイズ処理の中身は下記のようになっています。
function resize()
{
var width = $(window).width();
var height = $(window).height();
:
renderer.resize(width, height);
}
renderer.resize()でリサイズしてくれるようです。
というわけで、今更ではあるのですが、以前書いたサンプル（sample12）を全画面対応に修正してみました。
うん。こっちの方が良いですね〜。
example.22 Snake
[画像：http://www.pixijs.com/examples/より]
続いては、かわいらしいヘビ？がウネウネ動くサンプルです。
コレ、どうやら、まっすぐな画像を「曲げて」このような動きを表現しているようです。すご！
PIXI.Rope()の使い方
画像を「曲げる」ために、PIXI.Rope()というものを利用しているようです。
PIXI.Rope()を使って「ヘビ」のオブジェクトを作っている部分のソースです。
(一部、無駄なコード削除したりコメントを入れたりしていますが、http://www.goodboydigital.com/pixijs/examples/snake/index.htmlのコードの抜粋です)
var length = 918 / 20; // これは、画像の横幅のpixel数
points = []; // 座標の中での曲げる部分の点(X,Y)の集合
for (var i = 0; i < 20; i++) { // 20カ所まげている。
points.push(new PIXI.Point(i * length, 0)); // 横一列等間隔に点を並べている
};
// ヘビの絵を持つRopeを作る
strip = new PIXI.Rope(PIXI.Texture.fromImage("snake.png"), points);
strip.x = -918/2; // Ropeはanchorが使えないようなので、中央表示のためにOffsetしてる
// ヘビを入れるコンテナを作って画面中央に配置
var snakeContainer = new PIXI.DisplayObjectContainer();
snakeContainer.position.x = window.innerWidth/2;
snakeContainer.position.y = window.innerHeight/2;
// 画面幅に収まるように縮小
snakeContainer.scale.set( window.innerWidth / 1100);
// Stageにヘビ入れるコンテナを追加
stage.addChild(snakeContainer);
// コンテナにヘビ入れる
snakeContainer.addChild(strip);
これで、ヘビが配置されました。
次に、アニメーション処理を見てみます。
var count = 0;
function animate() {
count += 0.1;
var length = 918 / 20;
for (var i = 0; i < points.length; i++) {
points[i].y = Math.sin(i *0.5 + count) * 30;
points[i].x = i * length + Math.cos(i *0.3 + count) * 20;
};
// render the stage
renderer.render(stage);
requestAnimFrame(animate);
}
上記のように、アニメーション処理の中でPIXI.Rope()に指定したpoints[].x、points[].yを更新することで、うねうねと動かしているようです。
まとめ
Pixi.jsのサンプルを眺めることで、フィルタやRopeなど、これまで知らなかった面白い機能に気付くことができました。
まだまだ勉強不足。もっともっと触ってみたいと思います。