Let There Be Snow!
I’ll admit I’m not anywhere near snow while writing this, but I love it as an effect in a game, and since it is seasonal to Christmas time, I was inspired to put this together.
The original code
Originally I had placed several flakes, which was a simple Phaser graphic and looping through the group with a forEach
this.snowGroup.forEach(function(flake){
flake.y++;
}.bind(this))
This worked fine at first, but the problem came when I tried to increase the number of flakes from 50 to 200, and then as a test up to 500. The code started going sluggish, and then I remembered an old interview question about a starfield. I have to admit I failed that interview question but looked the answer up later after becoming obsessed with the problem.
A linked list
A linked list works by each child of a group having a reference to the child before or after it, or sometimes both. Once you have the reference you call a function of the first or last child in the group, and that function then calls the same function in the next or previous child, and it starts a chain reaction. This can be incredibly fast! I implement this in the move function of the flake class below.
Click the image to see the result
How to use
//change width and height if you only want to use a //small area var snow=new Snow(game.width,game.height);
The Code
The Snow Class
class Snow extends Phaser.Group {
constructor(w = 200, h = 200) {
super(game);
this.w = w;
this.h = h;
this.lastFlake = null;
//
//
//
this.makeFlakes();
}
makeFlakes() {
for (var i = 0; i < 250; i++) {
var flake = new Flake(this.w, this.h);
//if the last flake exists
//place it as the prev flake
if (this.lastFlake != null) {
flake.prevFlake = this.lastFlake;
}
this.lastFlake = flake;
}
}
update() {
//move the last flake
//this will start a chain reaction
this.lastFlake.move();
}
}
The Flake Class
class Flake extends Phaser.Group {
constructor(w, h) {
super(game);
//make the graphic
var f = game.add.graphics();
f.beginFill(0xffffff, 1);
f.drawCircle(0, 0, 10);
f.endFill();
this.add(f);
//
//
this.w=w;
this.h=h;
//
//
//init properties
this.y = game.rnd.integerInRange(0, h);
this.reset();
}
reset()
{
//re-init properites
this.x = game.rnd.integerInRange(0, this.w);
this.drift = game.rnd.integerInRange(-1, 1) * (.05 + Math.random() * .1);
this.fallSpeed = 1 + Math.random() * 10;
this.scale.x = .1 + Math.random();
this.scale.y = this.scale.x;
this.alpha = .1 + Math.random();
}
move()
{
this.x+=this.drift;
this.y+=this.fallSpeed;
if (this.y>this.h)
{
//take back to top
this.y=-10;
this.reset();
}
if (this.prevFlake)
{
//move the previous flake
this.prevFlake.move();
}
}
}
Happy Holidays Looking forward to more Phaser in 2018!