どうもですよ、はやちですよ٩( ᐛ )و
以前、こちらの記事でご紹介したPixi.js。
今回はパーティクルを使用して、ちょいと「雪が降ってる風」の演出を実装する方法をご紹介します( ˇωˇ)☝
導入方法
npmはこちらからインストールしてお使いください。
npm install pixi.js
実装方法
それでは実装方法ご紹介します( ˘ω˘)☞三☞ｼｭｯｼｭｯ
土台の設定
はじめに表示するCanvasを用意します。
Canvasはサイズと背景色も設定できます( ˇωˇ)☝
let app = new PIXI.Application(800,600,{backgroundColor : 0x1099bb});
document.body.appendChild(app.view);複製させる画像の数を決めておきます( ˇωˇ)☝
//表示をする画像の数
let totalSprites = 100;パーティクルの設定をします。
引数に表示をする画像の数、アニメーションさせるオプションを設定します( ˇωˇ)☝
let sprites = new PIXI.particles.ParticleContainer(totalSprites, {
scale: true,
position: true
});設定したものをステージに反映( ˇωˇ)☝
app.stage.addChild(sprites);複数の画像を表示する設定
複数の画像を表示させるための配列をつくるために空の箱を用意。
let hayachi = [];表示する分の回数をループして画像と、画像の中心地を設定。
//画像分をtotalSprites回数分ループ
for (let i = 0; i < totalSprites; i++){
// 画像の設定
let dude = PIXI.Sprite.fromImage('http://hayachi.github.io/images/hayachi-blue.png');
// 画像の中心地をきめる
dude.anchor.set(0.5);画像のサイズをランダムに決める。
dude.scale.set(0.01 + Math.random() * 0.1);画像の位置をランダムに散らす。
dude.x = Math.random() * app.screen.width;
dude.y = Math.random() * app.screen.height;速度をランダムに設定します。
dude.speed = (200 + Math.random() * 0.5) * 0.5;はじめに用意した変数に格納します。
hayachi.push(dude);ループのデータを反映します。
sprites.addChild(dude);
}アニメーションの設定
アニメーションの初期値値を設定。
let tick = 0;アニメーションでステージの高さをとるために設定。
const HEIGHT = 620;画像のアニメーションの設定。
app.ticker.add(function() {画像を繰り返し処理して位置を更新しているなかで、ステージ内で上から下まで通った後に縦の位置をリセット、横の位置をランダムに配置します。
for (let i = 0; i < hayachi.length; i++) {
//配列を代入
let dude = hayachi[i] ;
//横の位置
dude.x += (Math.random() - 0.5) * 1 * dude.scale.x;
//縦の位置
dude.y += dude.scale.y * dude.speed;
//画面の一番下に行った時縦の位置をリセット、横の位置をランダムに配置
if (dude.y > HEIGHT) {
dude.y = -10;
dude.x += (Math.random() - 0.5) * 1 * dude.scale.x;
}
}ティッカーを増やして繰り返します。
tick += 0.1;
});完成したものがこちらになります( ˘ω˘)☞三☞ｼｭｯｼｭｯ卍
See the Pen Pixi.js by Kayoko Hayashi (@Hayachi) on CodePen.
はやちめっちゃ降ってる✌(´ʘ‿ʘ｀)✌
まとめ
今回は雪の表現を試してみましたが、もくもくしたものを使用すれば炎的な表現にもなります。パーティクルを一つ覚えることによって、表現の幅は大きく広がるのではないのでしょうか。それではまた( ˇωˇ)☝
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
