Create stunning HTML5 particle effects with Phaser Particle Storm

Earlier this week I blogged – once more – about the importance of polishing a game. While in previous post I showed you how to animate a menu to achieve an eye-candy effect, when we talk about polishing there’s nothing as awesome as particle effects.

That’s why you should absolutely get Phaser Particle Storm.

Imagine this is the title screen of your new game. Which one do you prefer? The left one or the right one?

No need to say the rightmost example is way better than the static leftmost example!

And if you think it’s something complicated, here is the source code:

It’s really easy, isn’t it? Thanks to Phaser Particle Storm: an advanced particle system allowing you to easily create stunning special effects in your games with just a few lines of code.

Particle effects are constructed through easy-to-understand JavaScript objects. Multiple properties and options let you quickly put together complex looking visuals with minimum effort.

The user friendly API means you’ll be up and running in seconds, as you can see from the 30+ online examples and from more than 200 examples in the downloadable library.

Do you want to have a look at the features? Here you go:

Over 200 Code Examples included. Learn by studying code!
Extensive JSDoc API Documentation. All properties and all methods.
TypeScript Definitions included.
Adds just 10KB (min/gz) to your game, with all 5 renderers and 10 zones included.
Runs as a native Phaser Plugin. Won’t conflict with other internal systems.
Particles are created from easy to understand JSON data.
5 Renderers are supported: Sprite, BitmapData, Pixel, Render Texture and Sprite Batch.
Renderers extend a common Base class so you can easily add your own.
Particles can be emitted from 10 different types of emitter zone:
Point, Rectangle, Circle, Ellipse and Line based emitter zones.
Image based emitter zone allowing you to create particles from image data.
Text based emitter zone allowing you to create particles from Phaser.Text objects.
Emit particles from Linear Spline, Bezier Curve and Catmull Rom Spline paths.
Zones extend a common Base class, so you can easily create your own.
Run multiple emitters simultaneously. Create as many as you need.
Each emitter has its own force and scroll speed controls.
Emitters manage their own pools of particles for fast re-use.
Powerful time based control graphs. Virtually all particle properties can have control graphs applied to them.
Repeat emitters with easily customised repeat rates.
Delayed emitters, with configurable delay steps.
Particles can emit any other type of particle.
Extensive Particle Properties include:
Lifespan – control how long the particle lives for.
Keep Alive – keep a particle alive when its effect is finished.
Delay – set how long until it starts emitting.
Delay Visible – allow a delayed particle to be seen.
Visible – easily toggle the rendering state of a particle.
Ignore Force – particles can ignore emitter applied forces.
Ignore Scroll Speed – particles can ignore emitter applied scrolling speeds.
Emit – particles can themselves be emitters.
Velocity – control the speed of the particle.
Acceleration – set how quickly a particle accelerates.
Scale – visually scale a particle on either x, y or both axis.
Rotation – control the rotational speed of the particle.
Anchor – set the texture anchor point.
Send to Back – make a particle emit behind the others.
Bring to Front – allow a particle to emit at the front.
Texture – set the particles texture and frame.
Animation – emit fully animated particles.
Scale Mode – control the textures scaling mode.
Blend Mode – use blend modes for incredible effects.
Color Channels – control the red, green and blue color channels.
Alpha – complex alpha control.
HSV – set particle colors based on an HSV color wheel.
Particles can ‘Radiate away from’ given coordinates.
Particles can radiate away from given angles.
Gravity Wells! Suck particles towards or push them away from given points.
Particle data can be loaded externally from JSON files.
Manipulate particle data in real-time.
Handy debug method displays emitter pool and force values.
Works across mobile and desktop browsers.
Getting Started Guide – You’ll be coding in next to no time.
Free Upgrades.
Allowed for use in your own commercial games.
Ready built and minified source files.
Works with Phaser 2.4 and above.

I will definitively use Particle Storm in my future games, and expect some tutorials during next days.

  • Michael C.

    Hi Emanuele,

    Are you going to be doing a performance evaluation of the engine?

    Given the performance bottlenecks we’re already suffering in mobile HTML5 it seems to me that the last thing you would want in a game is particles everywhere.

    • It depends how they’re done. Particle Storm supports both Render Texture and Sprite Batch based particle emitters – so on a mobile device under WebGL that would add just one single draw call (as long as they share textures). If you’re running under Canvas on mobile it’s easy enough to detect to disable them entirely, or cut the quantity down (depends what else you’re doing at the same time really).

  • Pingback: Programming games with Ruby and HTML5()