Quick Snow Effect

Winter may be coming to an end (at the time of writing), but a nice snow effect can really spice up the look of your game. And in HaxeFlixel, such an effect is very easily implemented. So let’s take a quick look at how to create a quick and easy snowfall effect!

First of all, we’ll need to create a FlxEmitter. This is a special class that emits particles (of type FlxParticle) and automatically recycles them, making this a performant way of filling the screen with particles.

var snowMachine:FlxEmitter;

snowMachine = new FlxEmitter(0, 0, 300);

We position the emitter in the top-left corner and give it a total particle capacity of 300. You can modify this number depending on your needs.

Next, we’ll need to fill the emitter with particles. While you could use your own sprites here, we’ll just draw simple ones from scratch. I said this would be quick and easy!

for (i in 0...150)
{
	var p = new FlxParticle();
	var p2 = new FlxParticle();

	p.makeGraphic(2, 2);
	p2.makeGraphic(4, 4);

	snowMachine.add(p);
	snowMachine.add(p2);
}

Since our emitter can hold 300 particles, we create a total of 300…well, particles. However, to make the snow look a bit more authentic, we’re creating smaller and bigger particles. That’s why the for loop only goes from 0 to 150, as we’re actually creating two particles each iteration. Again, instead of makeGraphic, you could also just simply load an existing sprite.

Okay, now we’ve got an emitter loaded up with particles and ready to go. However, we still need to make sure the snow will fall as we want it to. In order to do that, we have to modify some settings of the emitter itself:

snowMachine.width = FlxG.width;
snowMachine.launchMode = SQUARE;
snowMachine.velocity.set(-10, 80, 0, 120);
snowMachine.lifespan.set(0);

First, we stretch the emitter to cover the entire width of the screen, thereby making sure that the snow will fall everywhere. Then, in order to be able to set the velocity of the particles, we set the launchMode to SQUARE. This allows us to set the starting velocities of the particles in this emitter. Using the settings above, we’ll get particles with velocities between -10 and 0 on the x-axis, and between 80 and 120 on the y-axis. By modifying these values, you can determine what direction the wind is blowing from and how hard the snowfall is.

Finally, we set the lifespan for all particles to 0. This makes it so particles are only killed when they get recycled, and not before. This ensures they’ll stay visible for as long as possible.

And that’s it! Now we just need to add the snowmachine to the state and fire it up:

add(snowMachine);
snowMachine.start(false, 0.05);

By changing the frequency value 0.05, you can once again determine the severity of the snowfall.

And there you go, now you should have something that looks like this!

Scrolling

If your game uses scrolling, you’ll quickly notice that you can run away from the snow. This makes sense, as our snow machine is an object in the world that we placed at (0,0) and with a width of one screen width (aka FlxG.width). You might consider stretching the width to span across the entire level, but that’s very problematic. Since particles are emitted across the entire area of the emitter, you’d have to drastically increase the total amount of particles in your emitter to ensure there’s always enough currently visible. Naturally, this is extremely wasteful.

So, what to do instead? Simple: Just move the emitter along with the camera, by putting this in the update loop of your state!

snowMachine.x = FlxG.camera.scroll.x;
snowMachine.y = FlxG.camera.scroll.y;

This way, the emitter will always be positioned at the top-left position of the camera viewport.

And that’s exactly how I implemented the snow effect in Go! Go! PogoGirl!

You can of course make a more complex snow effect with parallax and the like, but this is a really quick and easy way to create an effect that doesn’t look half bad, if I do say so myself.

If you have any questions, comments or criticism, post them in the comments below or reach out to me on Twitter @ohsat_games!