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

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

Kazuya Takato

Kazuya Takato

自席に半袖でいると寒いです。こんにちは、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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

Kazuya Takato
Kazuya Takato 取締役 COO 兼 CTO / DX事業本部長 / 高遠 和也

1983年生まれ。SIerとしてのキャリアをスタートし、JavaやC#を中心に多岐にわたる開発プロジェクトにエンジニアとして参加。その経験を活かし、LIGを創業。バックエンドおよびフロントエンドエンジニアとしての深い知識と経験をもとに、多様なプロジェクトに従事。現在は、取締役COO兼CTO、DX事業本部長として、社内の体制やルールの最適化、AI技術の推進など、経営戦略の一翼を担う。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL