From e705509d2903a1483cd84b5d1e547a7c128425ad Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Mon, 16 Sep 2013 01:08:06 +0100 Subject: [PATCH] Added lots of particles examples. --- README.md | 5 + examples/assets/sprites/breakout.json | 236 ++++++++++++++++++ examples/assets/sprites/breakout.png | Bin 0 -> 2423 bytes examples/particles/click burst.php | 46 +--- examples/particles/collision.php | 48 ++++ examples/particles/no rotation.php | 40 +++ examples/particles/when particles collide.php | 51 ++++ examples/particles/zero gravity.php | 36 +++ src/particles/arcade/Emitter.js | 33 ++- 9 files changed, 456 insertions(+), 39 deletions(-) create mode 100644 examples/assets/sprites/breakout.json create mode 100644 examples/assets/sprites/breakout.png create mode 100644 examples/particles/collision.php create mode 100644 examples/particles/no rotation.php create mode 100644 examples/particles/when particles collide.php create mode 100644 examples/particles/zero gravity.php diff --git a/README.md b/README.md index 16067d3b..2d7f7aea 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/examples/assets/sprites/breakout.json b/examples/assets/sprites/breakout.json new file mode 100644 index 00000000..a21b339d --- /dev/null +++ b/examples/assets/sprites/breakout.json @@ -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$" +} +} diff --git a/examples/assets/sprites/breakout.png b/examples/assets/sprites/breakout.png new file mode 100644 index 0000000000000000000000000000000000000000..85f75c82f5a72b37c55f734d54966f902571fc1f GIT binary patch literal 2423 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 literal 0 HcmV?d00001 diff --git a/examples/particles/click burst.php b/examples/particles/click burst.php index 76128377..44bf8691 100644 --- a/examples/particles/click burst.php +++ b/examples/particles/click burst.php @@ -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() { } })(); diff --git a/examples/particles/collision.php b/examples/particles/collision.php new file mode 100644 index 00000000..6a5ad7ba --- /dev/null +++ b/examples/particles/collision.php @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git a/examples/particles/no rotation.php b/examples/particles/no rotation.php new file mode 100644 index 00000000..40dfa3de --- /dev/null +++ b/examples/particles/no rotation.php @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git a/examples/particles/when particles collide.php b/examples/particles/when particles collide.php new file mode 100644 index 00000000..d6098dab --- /dev/null +++ b/examples/particles/when particles collide.php @@ -0,0 +1,51 @@ + + + + + \ No newline at end of file diff --git a/examples/particles/zero gravity.php b/examples/particles/zero gravity.php new file mode 100644 index 00000000..6ee94bc0 --- /dev/null +++ b/examples/particles/zero gravity.php @@ -0,0 +1,36 @@ + + + + + \ No newline at end of file diff --git a/src/particles/arcade/Emitter.js b/src/particles/arcade/Emitter.js index 6393abc4..d8d886f3 100644 --- a/src/particles/arcade/Emitter.js +++ b/src/particles/arcade/Emitter.js @@ -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; }