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:
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Particle Storm Example</title>
        <script src="phaser.min.js" type="text/javascript"></script>
        <script src="particle-storm.js" type="text/javascript"></script>
        <style type="text/css">
            body {
                margin: 0;
            }
        </style>
    </head>
    <body>

       

        <script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, "", { preload: preload, create: create});

var manager = null;
var emitter = null;

function preload() {
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.setScreenSize = true;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
    game.forceSingleUpdate = true;



    game.load.image('sky', 'sky10.png');
    game.load.image('cloud', 'cloud.png');
    game.load.image('star', 'star.png');
    game.load.image('phaser', 'phaser.png');

}

function create() {

    game.add.image(0, 0, 'sky');

    game.add.image(328, 240, 'phaser');

    manager = this.game.plugins.add(Phaser.ParticleStorm);

    var data = {
        ignoreForce: true,
        lifespan: 5000,
        image: 'cloud',
        scale: { min: 0.25, max: 1.5 }
    };

    //  The stars have ignoreScrollSpeed set, which will disable
    //  them from being influenced by the emitters scroll speed.

    var stars = {
        ignoreScrollSpeed: true,
        lifespan: 3000,
        image: 'star',
        sendToBack: true,
        vx: { min: -1.5, max: 1.5 },
        vy: -3
    };

    manager.addData('basic', data);
    manager.addData('stars', stars);

    line = manager.createLineZone(328, 240, 472, 240);

    manager.addData('basic', data);

    emitter = manager.createEmitter();

    //  The Scroll Speed adds a value to the particles x and y
    //  coordinates every frame. It doesn't adjust their velocities
    //  or acceleration, just their final positions each frame.
    emitter.scrollSpeed.y = -3;

    //  The force adjust acceleration
    emitter.force.y = 0.1;

    emitter.addToWorld();

    emitter.emit('basic', [0, 800], 700, { repeat: -1, frequency: 2000 });
    emitter.emit('stars', 0, 0, { zone: line, total: 6, repeat: -1, frequency: 150 });


}


        </script>


    </body>
</html>
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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers