簡単アニメーション！Pixi.jsを触ってみる！
〜（1）テキストを動かしてみる〜

突然ですが、 Pixi.js を触ってみることにしました。
（前フリ無しw）

Pixi.jsとは?

Pixi.jsは、Goodboy Digital社が配布している2D描画用のjavascriptライブラリです。
下記サイトで配布されています。

MITライセンスに基づくオープンソースソフトウエアとして開発が進められています。

このライブラリを使って作ったアニメーションは、WebGLを自動的に使ってくれるようです。
（非対応のデバイスではCanvasを使う）。
難しそうなWebGLを覚えなくて使えるのはうれしいです。

pixi.jsのexampleページでデモが紹介されていますので、いくつか見てみましょう。(スクリーンショット画像クリックで本家pixijs.comサイトのexampleページに飛びます)

Example4 [Lot o' Sprites]

どや！ってな感じに、たくさんのスプライトを表示するデモ。

Example14 [Masking]

パンダ〜！

pixi.js exampleページには、他にもたくさんのサンプルがあります。気になる方はチェックしてみてくださいね〜

それでは、さっそく使ってみます。

Pixi.jsのインストール

Pixi.jsかPixi.jsのgithubリポジトリからダウンロードしてください。
ドキュメントなども、一式入手することができます。

ダウンロードしたpixi.js-master.zipを展開すると、下記のようにファイルがたくさんでてきます。

pixi.js-master/bin/pixi.jsかpixi.js-master/bin/pixi.dev.jsをロードすればPixi.jsの機能を利用することができます。
今回は、実装を確かめながら進めることになると思いますので、pixi.dev.jsの方を使ってみます。

    <script src="pixi.dev.js"></script>

さて、これでPixi.jsを使う準備ができました。いよいよ何か動くものを作ってみようと思います。

Hello World!（テキストを動かす）

今回は テキストを表示させて動かす ところまで挑戦してみます。

おおまかな流れ

Pixi.jsでのアニメーションは基本的に下記のような流れとなります。

オブジェクト（画像スプライトやテキストなど）、ステージ、レンダラーを作る
ステージにオブジェクトを乗せる
レンダラーのViewをHTMLの要素に追加する
アニメーション処理を作る。この中で1コマで行う処理を書く。オブジェクトを動かしたり。最終的にレンダラーを使ってステージを描画する処理を含める
アニメーション処理を繰り返し実行

自分で理解するために、絵に描いてみました。

。。。見ても良くわかりませんね。。。。すいません。。
気を取り直して実際にコードを見てみましょう。短いコードですので全部載せてみます。

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="pixi.dev.js"></script>
</head>
<body>
<p>pixi.jsのhelloWorldです</p>
<div id="pixiview"></div>
<script>
var width = 600;
var height = 400;

// ステージを作る
var stage = new PIXI.Stage(0x000000);

// レンダラーを作る
var renderer = PIXI.autoDetectRenderer(width, height);

// レンダラーのviewをDOMに追加する
document.getElementById("pixiview").appendChild(renderer.view);

// テキストオブジェクトを作る
var word = "Hello World!";
var style = {font:'bold 60pt Arial', fill:'white'};
var textobj = new PIXI.Text(word, style);
textobj.position.x = 60;
textobj.position.y = height / 2;

// テキストオブジェクトをステージに乗せる
stage.addChild(textobj);

// アニメーション関数を定義する
function animate(){
    requestAnimFrame(animate); // 次の描画タイミングでanimateを呼び出す
    textobj.rotation += 0.01; // テキストを回転する
    renderer.render(stage);   // 描画する
}

// 次のアニメーションフレームでanimate()を呼び出してもらう
requestAnimFrame(animate);

</script>
</body>
</html>

動作サンプル

それでは、最初から見ていきます。

1. オブジェクト、ステージ、レンダラーの作成

ステージの作成（PIXI.Stage()）

ステージは PIXI.Stage() で生成します。

var stage = new PIXI.Stage(0x000000);

パラメータに指定しているのは背景色になります。
0x000000で黒、0xFF0000で赤になります。
このステージに、様々なオブジェクトを登録することで、にぎやかなアニメーションを作成していくことができます。

2014.07.04修正
以前はパラメータに文字列を渡した内容で記載しておりましたが、コメント欄で数値指定が正しいと教えて頂きましたので、記載を訂正しました。
syo-sa1982さん、ありがとうございました！

レンダラーの作成（PIXI.autoDetectRenderer()）

次に、レンダラーです。レンダラーは PIXI.autoDetectRenderer() で生成します。

var width = 600;
var height = 400;
var renderer = PIXI.autoDetectRenderer(width, height);

指定しているのは、レンダラーが扱う画面領域の縦・横サイズです。pixel数で指定します。

オブジェクトの作成

最後にオブジェクトですが、Pixi.jsでは様々なオブジェクトをステージに登録することができます。基本的なオブジェクトには下記のようなものがあります。

オブジェクト	生成するメソッド
アウトラインフォントのテキスト	Text()
ビットマップフォントのテキスト	BitmapText()
画像ファイルから読み込むイメージ	ImageLoader()
円	Circle()
楕円	Ellipse()
長方形	Rectangle()
:	:

Pixi.jsでは、これらのオブジェクトを複数組み合わせてステージに配置することができます。

今回は、文字列1つだけというシンプルなアニメーションを作りますので、この中からPIXI.Text()だけを利用します。

var word = "Hello World!";  // 文字列を指定
var style = {font:'bold 60pt Arial', fill:'white'}; // 文字サイズや色など
var textobj = new PIXI.Text(word, style); // テキストオブジェクトの生成
textobj.position.x = 60;  // 表示位置(x)
textobj.position.y = height / 2; // 表示位置(y)

見たまんまですが、new PIXI.Text(文字列,スタイル) でテキストオブジェクトを生成しています。あとは、positionプロパティで、ステージのX:0, Y:0からの相対座標でステージ上での表示位置を指定しています。

文字列やスタイルをいろいろと変更して遊んでみてください。

2. オブジェクトのステージへの配置（stage.addChild()）

オブジェクトのステージへの登録は、ステージオブジェクトのaddChild()メソッドで行います。

stage.addChild(オブジェクト);

今回は1つだけですが、複数作成した場合、作成したオブジェクトを全てaddChild()でステージに登録するようにしてください。沢山登録すれば、どんどんにぎやかになりますよ。

3. レンダラーViewのHTMLへの追加

いよいよ、対象となるHTMLの要素にレンダラーのViewを紐付けます。
サンプルでは、<div id="pixiview'> という要素に追加していますので、下記のようなコードになっています。

document.getElementById("pixiview").appendChild(renderer.view);

bodyに直接追加する場合、

document.body.appendChild(renderer.view);

と書くこともできます。

4. アニメーションの作成（1コマの動き処理の作成と、繰り返し実行）

さて、いよいよアニメーションを作ります。
実は、今までやってきたことは「段取り」にすぎません。
Pixi.jsを使って モノを動かす 部分は、これから作る処理の中で行います。

アニメーションは下記のように作ります。

1コマ分の「動き」の処理を関数として作成
作成した1コマ分の「動き」処理を繰り返し実行

それでは、それぞれの処理の内容を見ていきましょう。

1コマ分の「動き」処理の関数をつくる

今回テキストを動かすために作った関数animate()はのコードを見てみましょう。

function animate(){
    requestAnimFrame(animate); // ①次の描画タイミングでanimateを呼び出す

    // ↓オブジェクトを動かす処理
    textobj.rotation += 0.01; // ②テキストを回転する
    // ↑オブジェクトを動かす処理

    renderer.render(stage);   // ③描画する
}

ここで、①と③の部分はお決まりの部分です。①のrequestAnimFrame()については後述します。③は描画更新処理です。

②の部分がオブジェクトを動かす処理となり、オブジェクトの数や種類、動かし方によって処理内容が変わる部分です。
上記例では、ただ回転するだけの処理となっていますが、例えば下記のように変更すれば横に動くようになります。

    // ↓オブジェクトを動かす処理
    textobj.position.x += 2; // ②テキストを横移動させる
    if(textobj.position.x > 600){
        textobj.position.x = -450;
    }
    // ↑オブジェクトを動かす処理

横に動くように変更した動作サンプル

是非いろいろ変更してみて、動きを試してみてください！

1コマ分の「動き」処理を繰り返し実行

さて、1コマ分の動きの処理をおこなう関数animate()ができました。
この関数をrequestAnimFrame()に登録することで、次回ブラウザが画面リフレッシュするタイミングで呼び出してくれます。

requestAnimFrame(animate);

ただし、requestAnimFrame()で登録された関数が呼び出されるのは1度だけです。
アニメーションを実現するには、繰り返し呼び出してもらう必要がありますね。
先ほど作成した1コマ分の動きの処理をおこなう関数animate()の中でもrequestAnimFrame()を呼び出していたのはこのためです。
このようにすることで、画面リフレッシュのタイミングに同期してanimate()が常に呼び出されるようになり、チラつきの無いスムーズなアニメーションにすることができます。

メモ：requestAnimFrame()?

名前でピーンと来た方は、その通りです。

requestAnimFrame()は、requestAnimationFrame()というHTML5の標準APIのPolyFill 実装で、pixi.js内で提供されています。
pixi.js内でrequestAnimationFrame()も同様にベンダーPrefixが解決されていますので、requestAnimationFrame()と書いても大丈夫です。

まとめ。次回は

最後までおつきあい頂きありがとうございます。
Pixi.jsのHello World! どうでしたか？
テキストが動いただけで、まだ「簡単アニメーション！」に至っておらず恐縮ですが、Pixi.jsの可能性を少しでも感じて頂けたら幸いです。
次回は、なんと！ 画像を動かす！ に挑戦してみたいと思います！（ベタですね。その次どーすんだ？）
というわけで、次もよろしくお願いします。
それでは！

簡単アニメーション！Pixi.jsを触ってみる！（1）テキストを動かしてみる

簡単アニメーション！Pixi.jsを触ってみる！〜（1）テキストを動かしてみる〜