Added lots of particles examples.

This commit is contained in:
Richard Davey
2013-09-16 01:08:06 +01:00
parent 8c9a7c8bc7
commit e705509d29
9 changed files with 456 additions and 39 deletions
+5
View File
@@ -44,6 +44,11 @@ Change Log
Version 1.0.2
* Added optional parameter to Animation.stop: resetFrame. If true the animation will be stopped and then the current frame reset to the first frame in the animation.
* Fixed an issue causing 'explode' particle bursts to ignore the quantity parameter.
* Added 'collideWorldBounds' to Emitter.makeParticles function.
* Added Emitter.angularDrag
* Changed Emitter.bounce from a number to a Point, so now set its x/y properties to control different amounts of bounce per axis.
Version 1.0.1
+236
View File
@@ -0,0 +1,236 @@
{"frames": [
{
"filename": "ball_1.png",
"frame": {"x":218,"y":38,"w":16,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
"sourceSize": {"w":16,"h":16}
},
{
"filename": "ball_2.png",
"frame": {"x":218,"y":20,"w":16,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
"sourceSize": {"w":16,"h":16}
},
{
"filename": "ball_3.png",
"frame": {"x":218,"y":2,"w":16,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
"sourceSize": {"w":16,"h":16}
},
{
"filename": "ball_4.png",
"frame": {"x":200,"y":38,"w":16,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
"sourceSize": {"w":16,"h":16}
},
{
"filename": "ball_5.png",
"frame": {"x":200,"y":20,"w":16,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
"sourceSize": {"w":16,"h":16}
},
{
"filename": "brick_1_1.png",
"frame": {"x":98,"y":21,"w":32,"h":17},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":17},
"sourceSize": {"w":32,"h":17}
},
{
"filename": "brick_1_2.png",
"frame": {"x":98,"y":2,"w":32,"h":17},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":17},
"sourceSize": {"w":32,"h":17}
},
{
"filename": "brick_1_3.png",
"frame": {"x":270,"y":17,"w":30,"h":13},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":1,"y":1,"w":30,"h":13},
"sourceSize": {"w":32,"h":17}
},
{
"filename": "brick_1_4.png",
"frame": {"x":54,"y":52,"w":24,"h":9},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":4,"y":4,"w":24,"h":9},
"sourceSize": {"w":32,"h":17}
},
{
"filename": "brick_2_1.png",
"frame": {"x":236,"y":19,"w":32,"h":15},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":15},
"sourceSize": {"w":32,"h":15}
},
{
"filename": "brick_2_2.png",
"frame": {"x":236,"y":2,"w":32,"h":15},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":15},
"sourceSize": {"w":32,"h":15}
},
{
"filename": "brick_2_3.png",
"frame": {"x":270,"y":2,"w":30,"h":13},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":1,"y":0,"w":30,"h":13},
"sourceSize": {"w":32,"h":15}
},
{
"filename": "brick_2_4.png",
"frame": {"x":236,"y":50,"w":24,"h":11},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":4,"y":3,"w":24,"h":11},
"sourceSize": {"w":32,"h":15}
},
{
"filename": "brick_3_1.png",
"frame": {"x":166,"y":20,"w":32,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
"sourceSize": {"w":32,"h":16}
},
{
"filename": "brick_3_2.png",
"frame": {"x":166,"y":2,"w":32,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
"sourceSize": {"w":32,"h":16}
},
{
"filename": "brick_3_3.png",
"frame": {"x":236,"y":36,"w":30,"h":12},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":1,"y":2,"w":30,"h":12},
"sourceSize": {"w":32,"h":16}
},
{
"filename": "brick_3_4.png",
"frame": {"x":28,"y":52,"w":24,"h":10},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":4,"y":3,"w":24,"h":10},
"sourceSize": {"w":32,"h":16}
},
{
"filename": "one.png",
"frame": {"x":66,"y":2,"w":30,"h":48},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":1,"y":16,"w":30,"h":48},
"sourceSize": {"w":32,"h":64}
},
{
"filename": "paddle_big.png",
"frame": {"x":98,"y":40,"w":48,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":48,"h":16},
"sourceSize": {"w":48,"h":16}
},
{
"filename": "paddle_small.png",
"frame": {"x":148,"y":38,"w":32,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
"sourceSize": {"w":32,"h":16}
},
{
"filename": "power_down.png",
"frame": {"x":200,"y":2,"w":16,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
"sourceSize": {"w":16,"h":16}
},
{
"filename": "power_up.png",
"frame": {"x":182,"y":38,"w":16,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
"sourceSize": {"w":16,"h":16}
},
{
"filename": "brick_4_1.png",
"frame": {"x":132,"y":20,"w":32,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
"sourceSize": {"w":32,"h":16}
},
{
"filename": "brick_4_2.png",
"frame": {"x":132,"y":2,"w":32,"h":16},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":32,"h":16},
"sourceSize": {"w":32,"h":16}
},
{
"filename": "brick_4_3.png",
"frame": {"x":270,"y":32,"w":30,"h":12},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":1,"y":2,"w":30,"h":12},
"sourceSize": {"w":32,"h":16}
},
{
"filename": "brick_4_4.png",
"frame": {"x":2,"y":52,"w":24,"h":10},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":4,"y":3,"w":24,"h":10},
"sourceSize": {"w":32,"h":16}
},
{
"filename": "three.png",
"frame": {"x":34,"y":2,"w":30,"h":48},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":1,"y":0,"w":30,"h":48},
"sourceSize": {"w":32,"h":48}
},
{
"filename": "two.png",
"frame": {"x":2,"y":2,"w":30,"h":48},
"rotated": false,
"trimmed": true,
"spriteSourceSize": {"x":1,"y":16,"w":30,"h":48},
"sourceSize": {"w":32,"h":64}
}],
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "breakout.png",
"format": "RGBA8888",
"size": {"w":302,"h":64},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:c510ff2f709e8d175b059cd1cbe64773$"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

+13 -33
View File
@@ -7,20 +7,13 @@
(function () {
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
var p;
var p2;
var emitter;
function preload() {
// game.load.image('carrot', 'assets/sprites/carrot.png');
// game.load.image('star', 'assets/misc/star_particle.png');
game.load.image('diamond', 'assets/sprites/diamond.png');
// game.load.image('dude', 'assets/sprites/phaser-dude.png');
// game.load.image('coke', 'assets/sprites/cokecan.png');
// game.load.atlasJSONHash('pixies', 'assets/sprites/pixi_monsters.png', 'assets/sprites/pixi_monsters.json');
game.load.spritesheet('balls', 'assets/sprites/balls.png', 17, 17);
}
@@ -28,20 +21,10 @@
game.stage.backgroundColor = 0x337799;
p = game.add.emitter(0, 0, 200);
emitter = game.add.emitter(0, 0, 200);
p.makeParticles('diamond');
// Steady constant stream at 250ms delay and 10 seconds lifespan
// p.start(false, 10000, 250, 100);
// p.start(true, 10000);
// explode, lifespan, frequency, quantity
// p.minParticleSpeed.setTo(-100, -100);
// p.maxParticleSpeed.setTo(100, -200);
p.gravity = 10;
// game.add.tween(p).to({ x: 700 }, 1000, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true);
emitter.makeParticles('diamond');
emitter.gravity = 10;
game.input.onDown.add(particleBurst, this);
@@ -49,19 +32,16 @@
function particleBurst() {
p.x = game.input.x;
p.y = game.input.y;
p.start(true, 2000, 10, 10);
// Position the emitter where the mouse/touch event was
emitter.x = game.input.x;
emitter.y = game.input.y;
}
// The first parameter sets the effect to "explode" which means all particles are emitted at once
// The second gives each particle a 2000ms lifespan
// The third is ignored when using burst/explode mode
// The final parameter (10) is how many particles will be emitted in this single burst
emitter.start(true, 2000, null, 10);
function update() {
// p.y = game.math.min(100, game.input.y);
}
function render() {
}
})();
+48
View File
@@ -0,0 +1,48 @@
<?php
$title = "Collision";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });
var emitter;
function preload() {
game.load.spritesheet('veggies', 'assets/sprites/fruitnveg32wh37.png', 32, 32);
}
function create() {
emitter = game.add.emitter(game.world.centerX, game.world.centerY, 250);
emitter.makeParticles('veggies', [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], 200, true, true);
emitter.minParticleSpeed.setTo(-200, -300);
emitter.maxParticleSpeed.setTo(200, -400);
emitter.gravity = 8;
emitter.bounce.setTo(0.5, 0.5);
emitter.particleDrag.x = 10;
emitter.angularDrag = 30;
emitter.start(false, 8000, 400);
}
function update() {
game.physics.collide(emitter, emitter);
}
})();
</script>
<?php
require('../foot.php');
?>
+40
View File
@@ -0,0 +1,40 @@
<?php
$title = "No Rotation";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
function preload() {
game.load.image('alien', 'assets/sprites/space-baddie.png');
}
function create() {
var emitter = game.add.emitter(game.world.centerX, game.world.centerY, 250);
emitter.makeParticles('alien');
emitter.minParticleSpeed.setTo(-300, -300);
emitter.maxParticleSpeed.setTo(300, 300);
// By setting the min and max rotation to zero, you disable rotation on the particles fully
emitter.minRotation = 0;
emitter.maxRotation = 0;
emitter.start(false, 4000, 15);
}
})();
</script>
<?php
require('../foot.php');
?>
@@ -0,0 +1,51 @@
<?php
$title = "When Particles Collide";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });
var leftEmitter;
var rightEmitter;
function preload() {
game.load.image('ball1', 'assets/sprites/red_ball.png');
game.load.image('ball2', 'assets/sprites/blue_ball.png');
}
function create() {
leftEmitter = game.add.emitter(50, game.world.centerY - 200);
leftEmitter.bounce.setTo(0.5, 0.5);
leftEmitter.setXSpeed(100, 200);
leftEmitter.setYSpeed(-50, 50);
leftEmitter.makeParticles('ball1', 0, 250, 1, true);
rightEmitter = game.add.emitter(game.world.width - 50, game.world.centerY - 200);
rightEmitter.bounce.setTo(0.5, 0.5);
rightEmitter.setXSpeed(-100, -200);
rightEmitter.setYSpeed(-50, 50);
rightEmitter.makeParticles('ball2', 0, 250, 1, true);
// explode, lifespan, frequency, quantity
leftEmitter.start(false, 5000, 20);
rightEmitter.start(false, 5000, 20);
}
function update() {
game.physics.collide(leftEmitter, rightEmitter);
}
})();
</script>
<?php
require('../foot.php');
?>
+36
View File
@@ -0,0 +1,36 @@
<?php
$title = "Zero Gravity";
require('../head.php');
?>
<script type="text/javascript">
(function () {
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
function preload() {
game.load.spritesheet('balls', 'assets/sprites/balls.png', 17, 17);
}
function create() {
var emitter = game.add.emitter(game.world.centerX, game.world.centerY, 250);
emitter.makeParticles('balls', [0, 1, 2, 3, 4, 5]);
emitter.minParticleSpeed.setTo(-400, -400);
emitter.maxParticleSpeed.setTo(400, 400);
emitter.gravity = 0;
emitter.start(false, 4000, 15);
}
})();
</script>
<?php
require('../foot.php');
?>
+27 -6
View File
@@ -86,6 +86,11 @@ Phaser.Particles.Arcade.Emitter = function (game, x, y, maxParticles) {
*/
this.particleDrag = new Phaser.Point();
/**
* The angular drag component of particles launched from the emitter if they are rotating.
*/
this.angularDrag = 0;
/**
* How often a particle is emitted in ms (if emitter is started with Explode == false).
*/
@@ -103,9 +108,9 @@ Phaser.Particles.Arcade.Emitter = function (game, x, y, maxParticles) {
this.lifespan = 2000;
/**
* How much each particle should bounce. 1 = full bounce, 0 = no bounce.
* How much each particle should bounce on each axis. 1 = full bounce, 0 = no bounce.
*/
this.bounce = 0;
this.bounce = new Phaser.Point();
/**
* Internal helper for deciding how many particles to launch.
@@ -204,7 +209,7 @@ Phaser.Particles.Arcade.Emitter.prototype.update = function () {
*
* @return This Emitter instance (nice for chaining stuff together, if you're into that).
*/
Phaser.Particles.Arcade.Emitter.prototype.makeParticles = function (keys, frames, quantity, collide) {
Phaser.Particles.Arcade.Emitter.prototype.makeParticles = function (keys, frames, quantity, collide, collideWorldBounds) {
if (typeof frames == 'undefined')
{
@@ -212,7 +217,12 @@ Phaser.Particles.Arcade.Emitter.prototype.makeParticles = function (keys, frames
}
quantity = quantity || this.maxParticles;
collide = collide || 0;
collide = collide || 0;
if (typeof collideWorldBounds == 'undefined')
{
collideWorldBounds = false;
}
var particle;
var i = 0;
@@ -250,6 +260,8 @@ Phaser.Particles.Arcade.Emitter.prototype.makeParticles = function (keys, frames
particle.body.allowCollision.none = true;
}
particle.body.collideWorldBounds = collideWorldBounds;
particle.exists = false;
particle.visible = false;
@@ -317,7 +329,15 @@ Phaser.Particles.Arcade.Emitter.prototype.start = function (explode, lifespan, f
this._explode = explode;
this.lifespan = lifespan;
this.frequency = frequency;
this._quantity += quantity;
if (explode)
{
this._quantity = quantity;
}
else
{
this._quantity += quantity;
}
this._counter = 0;
this._timer = this.game.time.now + frequency;
@@ -347,7 +367,7 @@ Phaser.Particles.Arcade.Emitter.prototype.emitParticle = function () {
particle.lifespan = this.lifespan;
particle.body.bounce.setTo(this.bounce, this.bounce);
particle.body.bounce.setTo(this.bounce.x, this.bounce.y);
if (this.minParticleSpeed.x != this.maxParticleSpeed.x)
{
@@ -386,6 +406,7 @@ Phaser.Particles.Arcade.Emitter.prototype.emitParticle = function () {
particle.body.drag.x = this.particleDrag.x;
particle.body.drag.y = this.particleDrag.y;
particle.body.angularDrag = this.angularDrag;
}