pixi.jsを使って雪を降らせてみた。


andre_151130_img01

こんにちは。安心してください、(彼女の座)空いてますよ。アンドレです。

いよいよ寒くなってきた今日この頃。もう冬ですね。
ということで、先日使ったpixi.jsで今度は雪っぽいものを降らせてみました。

See the Pen wKVpeq by Takamasa Okada (@NP-okada) on CodePen.

簡単にコード解説すると、

snows.push(new PIXI.Graphics().beginFill(0xFFFFFF,0.7).drawCircle(0,0,7).endFill());

で、半径7かつ白色の円を生成(=雪として)しつつ配列に追加し、そのオブジェクト情報を保持します。次に

snows[i].position.x = Math.random() * WIDTH;
snows[i].position.y = Math.random() * HEIGHT;

で先ほど追加したオブジェクト(雪)の、x,y位置を描画領域内のランダムな位置に変更、

snows[i].scale.x = scale;
snows[i].scale.y = scale;

で基本サイズに対して0.5〜1.0倍にサイズを調整し、
最後に(オブジェクトをグループ化して保持するための)コンテナに追加します。

しかる後に、animate関数内のループ

for (var i = 0; i < SNOW_LIMIT; i++) {
	var scale = snows[i].scale.x;
	snows[i].position.x += (Math.random() - 0.5) * 1 * scale;
	snows[i].position.y += (scale * scale) + 0.1;
	if (snows[i].position.y > HEIGHT) {
		snows[i].position.y = -10;
	}
}

で1つずつ雪のオブジェクトを取り出し、そのサイズ比率を基に動きをつけ(小さな雪は移動量が小さくなる=奥にあるように見える…といいな)、下方向に見切れた際には描画領域より10px上に戻しています。ちなみにそのままだと輪郭がハッキリしすぎて雪っぽくないので、

var bFilter = new PIXI.filters.BlurFilter();
bFilter.blur = 2;
stage.filters = [bFilter];

で雪のオブジェクトのコンテナ全体にブラーフィルターをかけています。

これだけだと寂しいので背景をつけてみたバージョンも。

See the Pen WrNoQM by Takamasa Okada (@NP-okada) on CodePen.

そのまま背景をつけるだけだと背景までボヤけるので、

var snow_container = new PIXI.Container();
var bFilter = new PIXI.filters.BlurFilter();
bFilter.blur = 2;
snow_container.filters = [bFilter];
snow_container.setParent(stage);

で、雪は雪用のコンテナを作ってそれに対してフィルターをかけ、setParentで親子関係を作って雪が前面に表示されるようにしています。
(ところで、Math.random()って、「現在時刻をシードとして乱数を生成」するため、うまくズラして取得しないと変な偏り方するんですね。勉強になりました。)

最後になりましたが、皆様が素敵なクリスマスを過ごされることをお祈り申し上げております。