Pixi.jsでCanvasをカンタンに触ってみよう! 〜パーティクル編〜

Pixi.jsでCanvasをカンタンに触ってみよう! 〜パーティクル編〜

はやち

はやち

どうもですよ、はやちですよ٩( ᐛ )و
以前、こちらの記事でご紹介した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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

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

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む