簡単アニメーション！Pixi.jsを触ってみる！
〜（2）画像を動かしてみる〜
昨日の大雪は凄かった。。。そして今日は都知事選挙。
と書き出したまではいいが、本当に今日のうちにUpできるか謎ですw
前回は、Pixi.jsのインストールとHello Worldを書いてみました。
今回は、いよいよ画像を動かしてみたいと思います。
まず画像を1つだけ動かしてみる
それでは早速Pixi.jsを使って画像を1つだけ動かしてみます。
前回同様、簡単なコードを書いてみようと思ったのですが、ネットで見つかりましたので先に紹介します。
葉っぱ画像が回る！
PeepsQuest.comのPixi.js Basicsのページ
こちらもキャラ画像が回る！
gitHubのREADME.mdの'Usage'
はい。どちらもグルグル回ってますねー。
それでは、上記サイトをまねして（ほぼ丸パクリでw）コードを書いてみます。
前回のHello World!のテキストを画像(コレ)に変更(座標も多少調整)しただけのものです。
<!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で画像を動かしてみる</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 texture = PIXI.Texture.fromImage('img/pixilogo.png');
var logoimg = new PIXI.Sprite(texture);
logoimg.position.x = width / 2;
logoimg.position.y = height / 2;
// スプライトをステージに乗せる
stage.addChild(logoimg);
// アニメーション関数を定義する
function animate(){
requestAnimFrame(animate); // 次の描画タイミングでanimateを呼び出す
logoimg.rotation += 0.01; // スプライトを回転する
renderer.render(stage); // 描画する
}
// 次のアニメーションフレームでanimate()を呼び出してもらう
requestAnimFrame(animate);
</script>
</body>
</html>
はい。動きましたね。
上記コードの動作サンプル
おおまかな流れはテキストと同じ
Pixi.jsを使ったアニメーションは下記のように作ります。
基本的な流れ
- オブジェクト（今回はスプライト）、ステージ、レンダラーを作る
- ステージにオブジェクトを乗せる
- レンダラーのViewをHTMLの要素に追加する
- アニメーション処理を作る。この中で1コマで行う処理を書く。オブジェクトを動かしたり。最終的にレンダラーを使ってステージを描画する処理を含める
- アニメーション処理を繰り返し実行
今回は画像を動かしますので、作成するオブジェクトがスプライトになります。前回の流れとオブジェクトの種類が違うだけで、あとは同じです。
1.〜5.の流れについては、前回記事（（1）テキストを動かしてみる）も併せて参照してください！
画像からスプライトを作る
Pixi.jsで 画像オブジェクト というものを探してみたのですが、見つかりませんでした。
どうやら、画像ファイルは最初に テキスチャ という形式で読み込み、それをさらに スプライト という台紙のようなものに貼付けて利用するようです。
まず最初に、テキスチャを作ります。画像ファイルからテキスチャを作るには、 PIXI.Texture.fromImage() を利用します。
var texture = PIXI.Texture.fromImage('http://img.dfm.lrv.jp/pixi2/pixilogo.png');
次に、スプライトを作ります。
var logoimg = new PIXI.Sprite(texture);
上記のように書くことで、 テキスチャと同じ大きさのスプライトを作って全面にテキスチャを貼付ける ようです。
あとはスプライトの表示位置を調整して終わり。
logoimg.position.x = width / 2;
logoimg.position.y = height / 2;
これで、画像が張り付いたスプライトができましたので、
stage.addChild(logoimg);
と書いて、ステージに貼ります。
あとは、テキストの時と同じです。どうですか？動きました？
いろいろとプロパティを触ってみる（基本的なのだけ）
とりあえず画像が回ったはずですが、ただ回るだけじゃつまらないので、少しずつ、いろいろな動きに挑戦してみたいと思います。
スプライトのプロパティをいろいろ触ってみたい。
というわけで、pixi.jsのリファレンスを見てみます。
なんだか、たくさんプロパティがあります。
うーん、どう使うか解らないプロパティも結構あります。難しいことは（後回しにしてw）おいおい勉強するとして、まずは、基本的なところから触ってみます。
既に使ってるプロパティ: position, rotation
もう使ってるので、既に説明不要かと思いますが、念のため。
positionは、スプライトの位置を決めるプロパティです。
rotationは、オブジェクトを回転させます。正の値で右回り、負の値で左周りになります。単位はラジアンで、1周で6.28のようです。
anchor
anchorは、スプライトの座標を指定する際の「基準」を指定するプロパティです。x:0、y:0で左上隅が基準に、x:1、y:1で右下隅が基準になります。真ん中を基準にするには、x:0.5、y:0.5 とすれば良いようです。
こう書いてもやっぱりよくわからないので、実際に使ってみます。
先ほどのサンプルに、下記コードを追加します。
logoimg.anchor.x = 0.5;
logoimg.anchor.y = 0.5;
anchor.x=0.5, anchor.y=0.5を追加したサンプル
ちゃんと、真ん中を中心にして回ってくれるようになりました！
(前回のうちに、こうやりたかった！w)
width,height
こちらは、だいたい想像がつきますね。
縦・横サイズを変えるプロパティです。
上記anchorのサンプルにさらに下記コードを追加します。
logoimg.width = 60;
logoimg.height = 500;
見たまんまですw
適当な数字を指定すると、（今回のサンプルのように）酷いことになりますので、ご注意を。
scale
scaleは元のサイズからの相対的な倍率を指定するプロパティです。
下記は、縦横を1.5倍にするコードです。
logoimg.scale.x = 1.5;
logoimg.scale.y = 1.5;
。。。見ても面白くないので、サンプルは割愛します。
visible
オブジェクトの可視状態を決めるプロパティです。
logoimg.visible = false;
とすれば、表示されなくなります。
元に戻すには、
logoimg.visible = true;
とします。
alpha
alphaは透過率を指定するプロパティです。
0〜1の間で指定します。
数が大きいほど透けないです。（透過する割合を示す、いわゆる透過度とは逆です）
1で全く透けず、0で透明になります。
。。。という、なぞなぞのような説明だとよくわからないと思うので、サンプルを見てください。
logoimg.alpha = 0.8;
上記alpha指定したサンプルがこちら
※透けてるかどうか解るよう、裏にHello Worldを置いてますw
まとめ。次回は「複数のオブジェクトを動かす！」
さて、ようやく画像を動かすことができました。
なんだか、ノロノロやってますが、学習スピードそのままの更新なので。。。お許しください。
学習しながらの更新となっておりますので、今回の記事を書く中で、前回の記事に書いたことの中で間違いを見つけ、何回か修正させていただきました。今後もそんな感じになると思います。暖かい目で見て頂けたら助かります。もちろん、ご指摘、ご指導お待ちしてます！！
次回は、 複数のオブジェクトを動かす！ に挑戦してみたいと思います！
いよいよ、背景の上で、キャラクターが動く。そんな世界に少し近づけたらと思います。本当に近づけるか？は、やってみないとわかりませんw
最後に、今回紹介したスプライトのプロパティを使ったアニメーションを作ってみました。
昨日の大雪をイメージしましたが、あまり雪に見えないような。。。
いちおう、コード載せときます。（JavaScript部分のみ）
<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 texture = PIXI.Texture.fromImage('img/snow2.png');
var MAX_SNOW = 300;
var snowimgs = [];
// 雪。
for(var cnt=0;cnt < MAX_SNOW;cnt ++){
snowimgs.push(new PIXI.Sprite(texture));
snowimgs[cnt].position.x = Math.random() * 600;
snowimgs[cnt].position.y = Math.random() * 400;
snowimgs[cnt].anchor.x = 0.5;
snowimgs[cnt].anchor.y = 0.5;
var base = Math.random();
snowimgs[cnt].alpha = (base/2) + 0.4;
snowimgs[cnt].scale.x = base/2;
snowimgs[cnt].scale.y = base/2;
stage.addChild(snowimgs[cnt]);
}
// アニメーション関数を定義する
function animate(){
requestAnimFrame(animate); // 次の描画タイミングでanimateを呼び出す
for(cnt=0;cnt <MAX_SNOW;cnt++){
var scale = snowimgs[cnt].scale.x;
snowimgs[cnt].position.x += scale * (Math.random() - 0.5) * 4;
snowimgs[cnt].position.y += (scale * 3) + 1;
if(snowimgs[cnt].position.y > 400){
snowimgs[cnt].position.y = -10;
}
}
renderer.render(stage); // 描画する
}
// 次のアニメーションフレームでanimate()を呼び出してもらう
requestAnimFrame(animate);
</script>
というわけで、次もよろしくお願いします。
それでは！