Talking about Game development, HTML5, Javascript, Phaser and Reviews.
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.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.
