2D描画ライブラリ「Pixi.js」を使って弊社のMissonを流す

■雑談

飲み物を水筒にして1週間過ぎました。
続いています。

浮いたお金で先週の大雨の日にタクシー使いました。
濡れませんでした。＼(^o^)／

ということでこんにちは。T田さんです。
現場ではCMSを使ったフロントエンド及びバックエンドなお仕事をしています。

趣味ではAdobe系のソフトの練習をしてます。
今はAfterEffectsの練習をしています。あの超分厚い本です。
hontoでこの本の電子版がほしいです。(ㆁᴗㆁ✿)

■Pixi.jsってなに？

Goodboy Digitalという会社が配布しているjavascriptライブラリです。

2D描画が得意な人みたいです。前回はThree.jsという3Dの描画が得意な人でしたね。
公式サイト見た感じだと2Dと言いつつ、結構すてきな感じです。
Pixi.js公式サイト
 github

githubの英語を見ると
「without having to dive into the WebGL API or deal with browser and device compatibility.」
つまり
「WebGLのことわからなくてもいいし、画面サイズのことも気にしないでいいよ」
とありますね。

ということで今回はコレを触っていきましょう。
ちなみになんでコレを触るのかというと偶然目にしたからです。ლ(´ڡ`ლ)ﾄﾞｧﾔ

作業環境はWindows7、ブラウザはChromeをつかいます。

■完成イメージ

このような感じになります。スクリーンセーバーっぽいかんじ。╭( ・ㅂ・)و ̑̑

「テキストを右から左に流す」を繰り返し「途中フォントサイズと縦位置をランダムで変更」するアニメーションです。

■Pixi.jsを入手

それでは実際に作っていきましょう。

・ライブラリをダウンロード

ライブラリをgithubからダウンロードします。
※右上の「Clone or download」のリンクをクリックする。
「pixi.js-master.zip」がダウンロードされるので、デスクトップに展開します。

・配置

展開するとpixi.js-masterフォルダができます。このフォルダの中の
pixi.js-master/bin/pixi.min.js がPixi.jsのライブラリです。

これでPixi.jsのライブラリファイルの配置はOKです。
つづいてHTMLを作っていきます。

■index.htmlを作成

デスクトップに以下のindex.htmlを作成します。ˉ̞̭ ( ›◡ु‹ ) ˄̻ ̊
※以降、コードウインドウでは「＜」「＞」「”」「’」の記号が全角ですので、コピペする場合はこれらの記号を半角へ全置換して下さい。

＜!doctype html＞
＜html lang=”ja”＞
＜head＞
＜meta charset=”UTF-8”＞
＜title＞Pixi.jsで弊社MISSIONを左から右へながす＜/title＞
＜script src=”pixi.js-master/bin/pixi.min.js”＞＜/script＞
＜/head＞
＜body＞
＜div id=”pixiview”＞＜/div＞
＜style＞#pixiview canvas{ width: 100%; height: 100% }＜/style＞
＜script＞
var width = 600;
var height = 400;

/* ①ステージを作成 */
var stage = new PIXI.Container();

/* ②オブジェクトを作成 */
// テキスト配列（弊社MISSIONを配列にする）
var text = [
”中小企業で働くITエンジニアの労働環境を変える”,
”私はかつて、長い間エンジニアとして客先に常駐し仕事をしていました。”,
”そんななかで最も感じたのは、IT業界、特に中小企業における労働環境の劣悪さ。”,
”その劣悪な環境を改善していきたいという考えは日に日にその強さを増していきました。”,
”その強い思いはエージェントグローという会社の原点であり、「中小企業で働くITエンジニアの労働環境を変える」という私たちのミッションの源となったのです。”,
”エンジニアにとっての労働環境の問題は、次の5つに集約されます。”,
”1．会社の将来への不安”,
”2．給料への不満”,
”3．希望する案件に参加できない”,
”4．残業が多い”,
”5．帰属意識が低い”,
”私たちは、「エンジニア超第一主義」でこれらの問題に立ち向かい、すべてのエンジニアが最高の環境で最高のパフォーマンスを発揮できるよう努めてまいります。”,
”私たちはこの方針が、結果的にお客さまに最高の満足を提供できる最良の方法であると考えております。”,
”代表取締役　河井智也”,
”株式会社　エージェントグロー”
];
var textIndex = 0;

// テキストオブジェクト配列
var textObj = [];
// 移動終了位置配列
var endOfPosition = [];
// フォントサイズ
var fontSize = 60;

// テキストオブジェクト配列を作成し、ステージにのせる。
for (textIndex = 0 ; textIndex ＜ text.length ; textIndex++){
// フォントサイズはランダムで決定する（最小：30　最大：100）。randFontStyle関数内でfontSize変数を更新。
textObj[textIndex] = new PIXI.Text(text[textIndex], randFontStyle(30, 100));

// 開始位置は画面右端で固定
textObj[textIndex].position.x = width;

// 縦位置（position.y）は乱数で決定する。（最小：100　最大：300）
textObj[textIndex].position.y = randVerticalPosition(100, 300);

// 移動終了位置（【画面横サイズ + フォントサイズ + フォントサイズ×テキストの長さ】←この分だけ移動する）
endOfPosition[textIndex] = -(width + fontSize + fontSize * text[textIndex].length);

/* ③ステージにのせる */
stage.addChild(textObj[textIndex]);
}
textIndex = 0;

/* ④レンダラを作成し、DOMに追加 */
var renderer = PIXI.autoDetectRenderer(width, height);
renderer.backgroundColor = 0xCC0033;
document.getElementById(”pixiview”).appendChild(renderer.view);

/* ⑤アニメーションさせる */
function animate(){
requestAnimationFrame(animate);

// 左へ移動
textObj[textIndex].position.x -= 8;

// テキストが流れきったら
if(textObj[textIndex].position.x ＜ endOfPosition[textIndex]){
// 流れきったテキストを初期位置へもどす
textObj[textIndex].position.x = width;

// 次のテキストを指定
textIndex += 1;
if(text.length ＜= textIndex){
textIndex = 0;
}
}
// 描画
renderer.render(stage);
}
/* 再描画 */
requestAnimationFrame(animate);

// フォントのサイズをランダムで取得（戻り値をスタイルで返す）
function randFontStyle(min, max){
var style = {font:’bold 60px Bully’, fill:’white’};
fontSize = Math.floor( Math.random() * (max + 1 - min) ) + min;
style[’font’] = ’bold ’ + fontSize + ’px Bully’;
return style;
}

// 縦位置をランダムで取得
function randVerticalPosition(min, max){
return (Math.floor(Math.random() * max + 1 - min) + min);
}
＜/script＞
＜/body＞
＜/html＞

①～⑤でコメントを入れておりますので、１つずつ見ていきましょう。(っ´ω`)っ

用語説明

用語	説明
ステージ	2Dが表示される領域。アナログでイメージすると「紙」
オブジェクト	ステージに配置する物（データ）。アナログでイメージすると「アタマの中にある、紙に描こうと思っている内容」
レンダラ	縦と横のサイズを指定し、その範囲に表示すること。アナログでイメージすると「アタマの中にある、紙に描こうと思っている内容を紙に描き出すこと」

表示の手順は
「ステージを作成」→「オブジェクトを作る」→「オブジェクトをステージに追加」→「レンダラを作成し、DOMに追加」→「アニメーションさせる」
になります。

①ステージを作成

/* ①ステージを作成 */
var stage = new PIXI.Container();

ステージを作ります。
Container（コンテナ：入れ物）というものがいわゆる「紙」ですね。
※ちなみに紙の色はレンダラの作成時に指定します。後で指定しますので一旦置いておきましょう。٩( ‘ω’ )و

②オブジェクトを作成、③ステージにのせる

/* ②オブジェクトを作成 */
// テキスト配列（弊社MISSIONを配列にする）
var text = [
”中小企業で働くITエンジニアの労働環境を変える”,
”私はかつて、長い間エンジニアとして客先に常駐し仕事をしていました。”,
”そんななかで最も感じたのは、IT業界、特に中小企業における労働環境の劣悪さ。”,
”その劣悪な環境を改善していきたいという考えは日に日にその強さを増していきました。”,
”その強い思いはエージェントグローという会社の原点であり、「中小企業で働くITエンジニアの労働環境を変える」という私たちのミッションの源となったのです。”,
”エンジニアにとっての労働環境の問題は、次の5つに集約されます。”,
”1．会社の将来への不安”,
”2．給料への不満”,
”3．希望する案件に参加できない”,
”4．残業が多い”,
”5．帰属意識が低い”,
”私たちは、「エンジニア超第一主義」でこれらの問題に立ち向かい、すべてのエンジニアが最高の環境で最高のパフォーマンスを発揮できるよう努めてまいります。”,
”私たちはこの方針が、結果的にお客さまに最高の満足を提供できる最良の方法であると考えております。”,
”代表取締役　河井智也”,
”株式会社　エージェントグロー”
];
var textIndex = 0;

// テキストオブジェクト配列
var textObj = [];
// 移動終了位置配列
var endOfPosition = [];
// フォントサイズ
var fontSize = 60;

// テキストオブジェクト配列を作成し、ステージにのせる。
for (textIndex = 0 ; textIndex ＜ text.length ; textIndex++){
// フォントサイズはランダムで決定する（最小：30　最大：100）。randFontStyle関数内でfontSize変数を更新。
textObj[textIndex] = new PIXI.Text(text[textIndex], randFontStyle(30, 100));

// 開始位置は画面右端で固定
textObj[textIndex].position.x = width;

// 縦位置（position.y）は乱数で決定する。（最小：100　最大：300）
textObj[textIndex].position.y = randVerticalPosition(100, 300);

// 移動終了位置（【画面横サイズ + フォントサイズ + フォントサイズ×テキストの長さ】←この分だけ移動する）
endOfPosition[textIndex] = -(width + fontSize + fontSize * text[textIndex].length);

/* ③ステージにのせる */
stage.addChild(textObj[textIndex]);
}
textIndex = 0;

// フォントのサイズをランダムで取得（戻り値をスタイルで返す）
function randFontStyle(min, max){
var style = {font:’bold 60px Bully’, fill:’white’};
fontSize = Math.floor( Math.random() * (max + 1 - min) ) + min;
style[’font’] = ’bold ’ + fontSize + ’px Bully’;
return style;
}

// 縦位置をランダムで取得
function randVerticalPosition(min, max){
return (Math.floor(Math.random() * max + 1 - min) + min);
}

イメージでは「アタマの中で何を、紙のどこに描くか考える」といった感じです。まだ描いてません。(*’-‘)

基本の流れは「流すテキストとスタイルを決める」→「テキストオブジェクトを作成」→「テキストオブジェクトの表示位置を決める」です。

フォントサイズ（size）と縦位置（textObj[textIndex].position.y）は上限と下限を決めてランダムに作成した数字を代入しています。
※フォントサイズはrandFontStyle関数、縦位置はrandVerticalPosition関数を作成してまとめました。

テキストの長さによって移動量が異なるので、テキストの長さとフォントサイズで移動終了位置（endOfPosition[textIndex]）を計算します。

テキストオブジェクトを作成し終わったら添字のtextIndexを最初の0に設定します。

テキストオブジェクトを作成したらステージにのせます。
ステージに載せたら「紙の上に描かれた状態」です。実際の紙では「描く」作業はこれで終了ですが
最後に画面に表示する作業（レンダリング）が必要です。(´﹃｀)

現状だと「描いたデータだけある」状態のため、画面に出力する必要があります。
ここが紙とデータの描き方の違いです。

画面に出力するにはレンダラを作成します。

④レンダラを作成し、DOMに追加

/* ④レンダラを作成し、DOMに追加 */
var renderer = PIXI.autoDetectRenderer(width, height);
renderer.backgroundColor = 0xCC0033;
document.getElementById(”pixiview”).appendChild(renderer.view);

レンダラを作成し、DOMに追加して画面に表示します。背景色はワインレッドな感じにしました。
表示だけならここで終了です。

でも止まってて楽しくないので、動かします。
٩(๑′∀ ‵๑)۶•¨•.¸¸♪

⑤アニメーションさせる

/* ⑤アニメーションさせる */
function animate(){
requestAnimationFrame(animate);

// 左へ移動
textObj[textIndex].position.x -= 8;

// テキストが流れきったら
if(textObj[textIndex].position.x ＜ endOfPosition[textIndex]){
// 流れきったテキストを初期位置へもどす
textObj[textIndex].position.x = width;

// 次のテキストを指定
textIndex += 1;
if(text.length ＜= textIndex){
textIndex = 0;
}
}
// 描画
renderer.render(stage);
}
/* 再描画 */
requestAnimationFrame(animate);

animate関数をループさせるようにしてテキストを動かします。

テキストが画面の外に流れきったら、流れきったテキストオブジェクトを初期位置へ戻します。

添字（textIndex）を更新し、次のテキストオブジェクトを描画します。

全てのテキストオブジェクトが流れきったら添字（textIndex）を最初の0に設定します。
こうすることでまた最初の文字列が流れ始めます。
※テキストが画面の外に流れきったら、流れきったテキストオブジェクトを初期位置へ戻さないと流れきってそのままになるため、テキストがどんどん画面の見えない所で移動してしまいます。

これで横から文字が流れるようなアニメが出来ましたね！(๑•̀ㅁ•́๑)✧