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

自席に半袖でいると寒いです。こんにちは、CTOのづやです。

本日は前回に引き続き、Pixi.jsを使ってアニメーションをさせていきたいと思います。

テキストを利用してみる

前回は画像を動かすことに挑戦しましたが、もちろん画像以外も表示させることができます。今回はテキストを追加して、動かしてみました。

テキストを動かすデモ

コードは前回と変わったところだけを記載しておきます。
画像を取り込んでいたところを、テキストクラスに置き換えた感じです。

/**
前回はこんな感じ
// 画像パスからテクスチャを作成します。
var texture = PIXI.Texture.fromImage("img/taka.jpg");

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


// テキストオブジェクトを新規に生成します。第1引数に表示したい文字列を、第2引数はオプションで決まったstyleが設定できます
var tesxObj = new PIXI.Text("テキストです" , {
	font : 'bold 50px Hiragino' , // 指定しないと、bold 20px Arial この形式でないと渡せない模様
	fill : "#000000" , // 塗りつぶしの色 "red"とか文字列も大丈夫。canvasのfillと一緒
	align : 'center' , // 改行された場合のテキストの位置
	stroke : '#FCFF00' , // 枠線の色。strokeThicknessがデフォルト0なのでそちらを指定しないと効果がない
	strokeThickness : 5 , // 枠線の太さ。デフォルトは0のため枠がつかない
	wordWrap : true , // 改行するかどうか。デフォルトはfalse
	wordWrapWidth : 100 // 改行を判定する横幅。デフォルトが100
});

テキストを複数動かしてみる

続いて、複数の要素を動かしてみたいと思います。

たくさんの文字を動かすデモ

コードは変わったところだけ抜粋しております。
文字の分だけオブジェクトを作成してコンテナに入れつつ、配列にも保持しておきます。

// オブジェクト格納用の空のコンテナを作成
var strContainer = new PIXI.DisplayObjectContainer();

// コンテナをステージに格納
stage.addChild(strContainer);

// 文字の分だけループしてオブジェクトを生成
for(var i = 0;i < arrStrLength;i++) {
	var textObj = new PIXI.Text(arrStr[i] , {
		font : 'bold 20px Hiragino' ,
		fill : "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16)
	});

	// オブジェクトの位置をランダムに設定
	textObj.position.x = Math.floor(Math.random() * ((WIDTH - 20) + 20));
	textObj.position.y = Math.floor(Math.random() * ((HEIGHT -20) + 20));

	// 配列に保持しておく
	arrTextObj.push(textObj);

	// コンテナに格納
	strContainer.addChild(textObj);
}

そしてアニメーション関数の中で、また1つずつプロパティを変更して動かしております。

function animate() {

	// 毎回1個1個ランダムで位置を変える
    for(var i = 0;i < arrStrLength;i++) {
    	var rand = Math.floor(Math.random()*10);

    	// 確率で動かす
    	if(rand === 0) {
    		arrTextObj[i].position.x += Math.round(Math.random() * (1 - (-1)) + (-1));
    		arrTextObj[i].position.y += Math.round(Math.random() * (1 - (-1)) + (-1));
    	}
    }

    // ステージを書き出し直し
    renderer.render(stage);

    requestAnimFrame(animate);

}

複数動かすのも、けっこう簡単に実現できますね。

まとめ

いかがでしたでしょうか。
どう動かすかをちゃんと考えれば、これ以外にも色々できそうですね。

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

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