Search the Community

Showing results for tags 'emitter'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 47 results

  1. Click on emitter particles doesn't work

    Hi, I am new on Phaser framework actually, but i am trying to find out. I have an easy test game, where emitter moving from left to right, and drop particle, which is candy with 3 different state. So i have to click on particle, and it has to change animation frame. When i click 3 time, particle have to disapear. Here is my game code, but actually, i cannot make click event working. It looks like something wrong with my code, but i don't know where <script> function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var game = new Phaser.Game('100%', '100%', Phaser.AUTO, '', { preload: preload, create: create, update: update }); var emitter; function preload() { game.load.spritesheet('waffle', 'waffle_sprite.png', 150, 150, 3); } function create() { // game.physics.startSystem(Phaser.Physics.ARCADE); emitter = game.add.emitter(game, 100, 100, 20); emitter.inputEnableChildren = true; emitter.onChildInputDown.add(onDown, this); emitter.gravity = 0; emitter.minRotation = -100; emitter.maxRotation = 100; emitter.setYSpeed(150, 300); emitter.setXSpeed(50, 50); emitter.makeParticles('waffle', 0); setInterval(function(){ emitter.x=getRandomInt((game.width * 0.1), (game.width - game.width * 0.1)); emitter.start(true, 5000, null, 1); }, 1000) } function update() { } function onDown (sprite) { console.log(sprite); } </script> Can you please help me fix click event on every child? Thank you! I will continue my developing after fix this issue.
  2. Tweening particles

    Hey all. I want to apply color tweening to particles, but i don't know how, can anybody help me in this? thanks in advance
  3. Particle collision

    i'm trying to change collision option after emitter had started but i can't create () { // --------------------------------CONFIG-------------------------------- this.config = { 'followCursor': false, 'mouseClick': false, 'gravityX': 0, 'gravityY': 0, 'positionX': 960, 'positionY': 540, 'maxParticles': 50, 'particleKey': 'particle', 'frames': 1, 'quantity': 5000, 'collide': false, 'collideWorldBounds': false, 'scaleToX': 1, 'scaleToY': 1, 'scaleRate': 0, 'scaleEase': Phaser.Easing.Linear.None, 'scaleYoyo': false, 'alphaMin': 1, 'alphaMax': 0, 'alphaRate': 0, 'alphaEase': Phaser.Easing.Linear.None, 'alphaYoyo': false, 'rotationMin': 0, 'rotationMax': 0, 'bounceX': 0, 'bounceY': 0, 'angularDrag': 0, 'particleMinSpeedX': -300, 'particleMinSpeedY': -300, 'particleMaxSpeedX': 300, 'particleMaxSpeedY': 300, 'emitterSpeedX': 200, 'emitterSpeedY': -200, 'lifespan': 500, 'particleFrequency': 250, 'particleQuantity': 500 } // --------------------------------EMITTER-------------------------------- this.emitter =, this.config.positionY, this.config.maxParticles) this.makeParticles() this.emitter.minParticleSpeed.setTo(this.config.particleMinSpeedX, this.config.particleMinSpeedY) this.emitter.maxParticleSpeed.setTo(this.config.particleMaxSpeedX, this.config.particleMaxSpeedY) this.emitter.gravity.x = this.config.gravityX this.emitter.gravity.y = this.config.gravityY this.emitter.setScale(this.config.scaleFromX, this.config.scaleToX, this.config.scaleFromY, this.config.scaleToY, this.config.scaleRate, this.config.scaleEase, this.config.scaleYoyo) this.emitter.setAlpha(this.config.alphaMin, this.config.alphaMax, this.config.alphaRate, this.config.alphaEase, this.config.alphaYoyo) this.emitter.angularDrag = this.config.angularDrag this.emitter.setRotation(this.config.rotationMin, this.config.rotationMax) this.emitter.bounce.setTo(this.config.bounceX, this.config.bounceY) this.emitter.setXSpeed(this.config.emitterSpeedX) this.emitter.setYSpeed(this.config.emitterSpeedY) this.startEmitter() // here I want to change both collision options from false to true, and to make it work with new collision options } startEmitter () { this.emitter.start(false, this.config.lifespan, this.config.particleFrequency, this.config.particleQuantity, false) } makeParticles () {, this.config.positionY, this.config.maxParticles) this.emitter.makeParticles(this.config.particleKey, this.config.frames, this.config.quantity, this.config.collide, this.config.collideWorldBounds) } Can anybody help me in this?
  4. I'm trying to create a dash fade effect behind the player when it's executing the dodge ability. I'm doing this with a particle emitter (dashEm). It's all good except from one thing the particle sprites on the trail aren't going in the player direction, they don't scale in X axis. How it should be in both directions: The actual problem, when player goes to left: The Player scaleX changes whenever the player presses left or right key. measures.last.dir = (pressedKeys.right)?1:-1 player.scale.setTo(measures.last.dir*2.5, 2.5) The emitter min and max scale are set to 2.5 same as player. dashEm = game.add.emitter(0, 0, 200); dashEm.makeParticles('particleDash'); dashEm.minParticleScale = 2.4; dashEm.maxParticleScale = 2.6; dashEm.lifespan = 400; dashEm.minRotation = 0; dashEm.maxRotation = 0; dashEm.minParticleSpeed.setTo(0, 0); dashEm.maxParticleSpeed.setTo(0, 0); dashEm.gravity = -1400; // fix global gravity The update. If the dodge happens I update the emitter position, set the trail direction(particles speed), and release them. dashEm.x = player.x; dashEm.y = player.y; dashEm.minParticleSpeed.setTo(-100*measures.last.dir, 0); dashEm.maxParticleSpeed.setTo(-1000*measures.last.dir, 0); dashEm.emitParticle(); What I've tried in update I've tried to attach the emitter as a child of player. But when the player changes its direction (scaleX) emitter also change and trail suddenly change too (logical it's his child). I've tried to change directly emitter scale. It works fine for right direction but when facing left the emitter and trail just disappear. dashEm.scale = new Phaser.Point(1*measures.last.dir, 1) I've tried to use setScale emitter method. But all it does is reduce the scale of the particles to 1. Not even put them in the right direction, no matter what values I enter. sx = 2.5 *measures.last.dir sy = 2.5 dashEm.setScale(sx, sx, sy, sy) I've tried modifying every property in the emitter that has something to do with the word scale and nothing works. I'cant use the default minParticleScale & maxParticleScale because this properties modify the both axis X & Y. I just need to change X axis, otherwise the trail would be upside down. Last thing! Reading the docs I've found in minParticleScale the sentence "If you need to control each axis see minParticleScaleX" but there's no such property nor function!. Hope I posted it well. Thanks for the help guys!
  5. Particle emitter never turns on?

    Hi, everyone. I've not been able to find any similar issues to mine, so I'm posting a new topic asking for help. I'm using Phaser 2.6.2 to develop a multiplayer web game. I want a particle emitter to start at the location of the player when a button is pressed, in an explosion. In create(), I have the following code: this.emitter = game.add.emitter(0, 0, 8); this.emitter.makeParticles('seeds'); this.emitter.gravity = 500; I ask the emitter to start later in a custom function called dump(), passing in the player's coordinates. Dump() is called by a function when the variable appleEaten is true and the player is on the right part of the screen. dump: function (x, y) { appleEaten = false; this.emitter.x = x; this.emitter.y = y; console.log(this.emitter.maxParticles); this.emitter.start(true, 1000, null, 8, 8); console.log(this.emitter.x + ", " + this.emitter.y + " is the emitter."); console.log(this.emitter.on); // this is returning false? The program correctly knows how many particles it should spew (8). The emitter is at the correct coordinates based on another console log. However, this.emitter.on console log always returns false. I have the same console log line running in update, and of course it's false every time there, too. Basically, the emitter just doesn't turn on, and I don't know why. I am not getting any errors in the console, either. Has anyone run into this, and/or does anyone have a suggestion on how to approach this? Thank you! EDIT: I load 'seeds' in another state, as with all of my images. When I try to add 'seeds' as an image in create, nothing shows up, and again, no error. I imagine these are separate issues, but I could be wrong.
  6. Question about using emitters in Phaser and what is the best practice for perfomance and memory use. Let's say a typical game where the player collects coins and occasionally there is a bomb. Whenever the player collects a coin there appear a few (like 3 or 4) particles, when a bomb explodes there are different type particles and when the player dies a few star particles appear. A typical game probably has more, but just as an example here it's three different particle effects. What would be the best way to handle this in Phaser? 1. create three emitters at start of game, reuse same three throughout game 2. create one emitters for coin particles and reuse throughout game, and create new bomb/stars emitters as needed 3. create new emitters for each instance that particles are needed About that 3rd option, I figure that will take a toll on memory usage because emitters don't auto-destroy once they are finished. So would you need to destroy them manually, and if so how? Or is creating many emitters just not a good idea at all? I'd love to hear any ideas or best practices on this.
  7. Phaser Particle Storm - Move emitter

    Hi guys, Is there any way you can change the position of an emitter created with Particle Storm from (x,y) to (x1, y1) and then to (x2, y2)? Any ideas? --- Or how to destroy an emitter?
  8. Hi all, I want to modify a bit the emitter, for example this: but for example if we want to set positions of particles at the creating of stage, no want to wait while the snow will fill the screen: back_emitter.forEach(function(particle) { particle.x = game.rnd.integerInRange(0, game.WIDTH); particle.y = game.rnd.integerInRange(0, game.HEIGHT); particle.body.velocity.y = game.rnd.integerInRange(140, 240); }); But looks like that velocity don't work. What's wrong with code?
  9. Emitter Explosion not exploding

    Hey Community, I just updated from 2.5.0 to 2.7.8 and now my emitters don't explode anymore. They produce there particles and them which live for there desired lifespan but don't move anymore. var em = game.add.emitter(0, 0, 10); em.makeParticles('SBCollectibles', ['StarOrangeParticle.png', 'StarPinkParticle.png', 'StarYellowParticle.png']); em.setXSpeed(-300, 300); em.setYSpeed(-300, 300); em.gravity = 500; em.start(true, 500, null, 10); I rolled back to 2.5.0 and work as expected
  10. Fast forward particles

    Hi eveyone, Just realised how powerful Phaser's particle system really is. I've set up an emitter to create a continuous 'snow' effect for my game's main menu background. I was wondering though if it was possible to make the particles 'fast forward' a couple of seconds when I load the game. What I mean is, how can I make it so that when the user switches to the main menu state, the particles are already all over the place as if the emitter had been running for a couple of seconds. Instead of the state starting off like this: How can I make it start like this, with the particles already everywhere: Thanks for your help!
  11. Hello, I have been using phaser 2.6.2 and this emitter worked fine: var emitter =, hitMeteor.body.y+hitMeteor.body.height/2, 6); emitter.makeParticles('meteorPiece'); emitter.minParticleSpeed.setTo(hitMeteor.body.width/2,-hitMeteor.body.height/2); emitter.maxParticleSpeed.setTo(70,hitMeteor.body.height/2); emitter.gravity = 0; emitter.start(true,1000,null,100); Today I have copied a new version (phaser 2.7.3) and the particles just stay in place rotating like their speed was equal to 0. In the docs I did not find any of those functions deleted so I am not sure what is wrong here. Thanks for all the help! *** OK. Deleting emitter.gravity = 0; helped.
  12. Fading out emitters particles

    Hello! I'm trying to do simple explosion with emitter. I want particles to slowly fade out so I do: emitter.setAlpha(0.2, 1, 10, Phaser.Easing.Linear.None, false); emitter.autoAlpha = true; But when i run game and emitter start doing it's job it throws at the console: Uncaught TypeError: Cannot read property 'v' of undefined at Phaser.Particle.update (phaser_phaser_1.js:99052) at Phaser.Particles.Arcade.Emitter.update (phaser_phaser_1.js:99548) at Phaser.World.Phaser.Group.update (phaser_phaser_1.js:33716) at Phaser.Stage.update (phaser_phaser_1.js:31820) at Phaser.Game.updateLogic (phaser_phaser_1.js:36338) at Phaser.Game.update (phaser_phaser_1.js:36280) at Phaser.RequestAnimationFrame.updateRAF (phaser_phaser_1.js:61979) at _onLoop (phaser_phaser_1.js:61962) What am I doing wrong with this task? Edit: Solved - it seems like I set too low alpha rate parameter (third param. in setAlpha). I misunderstood how it works. Now I get it. If I set rate as 1500 ms particles will fade out in this time. It works now.
  13. Destroy Emitter Particle on Click

    Hi all, this is my first post here. I have created a game with emitter particles that flow up from the bottom of the game canvas. My question is I want to destroy the partial (sprite) onClick which will in turn give a set value to the score. I cannot for the life of me work out how to destroy the particle on click. any help would be greatly appreciated as I cannot find any documentation specifically for this. Any advice would be greatly appreciated, as I am unsure if the emitter is the best way to achieve what I want. emitter = this.emitter =,; // This emitter will have a width of 800px, so a particle can emit from anywhere in the range emitter.x += emitter.width / 2 emitter.width = 900; emitter.height = 200; emitter.y = 1200; emitter.makeParticles('key'); emitter.minParticleSpeed.set(0, 10); emitter.maxParticleSpeed.set(0, -80); emitter.setRotation(20, -60); emitter.setAlpha(1, 1); emitter.setScale(1,1, 0.5, 0.5); emitter.gravity = 0; emitter.flow(4000, 100, 100, -1); // This will emit a quantity of 5 particles every 500ms. Each particle will live for 2000ms. // The -1 means "run forever" emitter.start(false, 4000, 500, 15, true);
  14. Hello gamedevs! I just jumped into Phaser, and feel realy well prepared after the Zenva course, Examples and the help of the Forum. But I just run into a problem where I can't find any solution. I just setup a Emitter who is creating world/another colliding bubbles within a mask. What I now want is to collide them also with my Input (mouse/touch). (Everyone knows the effect of run the mouse into a particle bubble bath :D) I tried following: -Find any Emitter function in the docu -Move a colliding box to the position where I clicked (he doesnt moves bubbles who within the box, just colliding with the ones who newly fall into it) -Add a Drag function to Particles (emitter.input.enableDrag(true); doesnt work; cant find any equal function in docu) Maybe I am just looking for the wrong keywords, but cant understand this common effect of colliding emitter particles with Mouse Input is that hard to find Would be awesome if you can point me!! Thanks in advance, have a nice day //Update #1 It seems like their is a problem with Dragging Sprites and their correct collision detection. For another smilar problem I want a red ball to drag out of this bubble bath. Same problem, but now I let them drag out via follow mouse, collision works now correct.
  15. I'm working on a game with a tilemap and arcade physics. The gravity is set to 1000 for the player and enemies movements and interacting which all work fine. However, when I add a particle emitter the particles also fall down? I've tried setting emitter.gravity to "0" but that doesn't help. The only thing that stops the particles from falling is disabling the line that sets game.physics.arcade.gravity.y, which is not what I want because the gravity is needed for the game. So my question is: how to disable the gravity of emitter particles? I've created a fiddle with example code here: Btw this is similar to this old thread which doesn't have a clear answer, as far as I can tell. function create() { // set stage physics game.stage.backgroundColor = 0x808080; game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.arcade.gravity.y = 1000; // add particle emmiter emitter = game.add.emitter(0, 0, 200); // x=0, y=0, maxParticles=200 emitter.makeParticles('particles', [0, 1, 2, 3]); //emitter.setXSpeed(-120, +120); //emitter.setYSpeed(-120, +120); emitter.setXSpeed(0, 0); // testing; particles should not move at all emitter.setYSpeed(0, 0); emitter.setRotation(0, 0); emitter.gravity = 0; // no gravity on particles // test sparkles will still fall down emitter.x = CANVAS_WIDTH / 2; emitter.y = CANVAS_HEIGHT / 2; emitter.start(true, 2000, null, 10); // explode=true, lifespan=800, freq=null, quantity=10 } function render() { var testparticle = emitter.getFirstExists(); if (testparticle) game.debug.bodyInfo(testparticle, 10, 10); }
  16. Weird problem with emitter

    Hi there, I have a problem with an emitter, I´m making a shoot´em up and one of the weapons I have is something like a circular explosion (see the picture), shooting 20 bullets but the game get slower and slower, so I check the emitter and instead of 20 bullets it seems is shooting 1050 each time I use it. Also, everytime I shoot I´m adding 1050 bullets instead of reusing them, so I guess I should use something else instead of start() I´m always having problems with the emitter, it seems that I don´t understand them really well (is even worse with the Particle Storm plugin!)... so, can anyone tell me why the hell is happening this? I have no idea... if(!this.myEmitter){ this.myEmitter =; var EXPLODE_DIAMETER = 20.0; this.myEmitter.x = this.mySprite.x - EXPLODE_DIAMETER/2; this.myEmitter.y = this.mySprite.y - EXPLODE_DIAMETER/2; for (var i = 0; i <= 360; i=i+18) { var xsp = Math.cos(2 * Math.PI * i / 360.0) * EXPLODE_DIAMETER * 20; this.myEmitter.setXSpeed(xsp, xsp); var ysp = Math.sin(2 * Math.PI * i / 360.0) * EXPLODE_DIAMETER * 20; this.myEmitter.setYSpeed(ysp, ysp); this.myEmitter.gravity = 0; this.myEmitter.minParticleScale = 0.5; this.myEmitter.maxParticleScale = 0.5; this.myEmitter.start(true, 2000, null, 1); this.myEmitter.makeParticles("bullet"); this.myEmitter.update(); } } console.log(this.myEmitter.children.length)//IT ADDS 1050 evertime I .start() the emitter
  17. I'm having issues trying to get my head around animated particles. I have a texture atlast representing an explosion animation. I can use this standalone with no problems, however when I try to use it with a particle emitter I'm having difficulty with positioning. It also seems that the animation is half sized and I can't tell why. Here's my code: // Player explosion this.playerExplode = function(x, y) { this.emitter = this.add.emitter(x, y, 4); this.emitter.makeParticles('explosion'); this.emitter.forEach(function(singleParticle) { singleParticle.animations.add('explosion', Phaser.Animation.generateFrameNames("explosion_", 1, 11, ".png", 2));'explosion', 15, false, true); }); this.emitter.start(true, 2000, null, 10); } The function is called on a player collision with an obstacle. I pass the X,Y co-ordinates to the function and create the emitter as you can see. If I dump out the emitter object to the console, I can see the X,Y co-ordinates are correct. I've picked up the method for adding animations from some tutorial or other - I can't remember where but I've been all over the web looking for a simple animated particle example and can't seem to find one. This is where I've landed - if there are any better or more standard ways to add an animation to a particle, please let me know! If I dump out the position of each 'singleParticle', they all come back as 0. Oddly enough, I can see the animation (zoomed out by 50%, it would seem!) in the top right corner of the screen. I'm not sure why this is. Can anyone help out here? Thanks
  18. Kill Particle emitter children

    Hey guys. I am using a particle emitter in one of my games. On my sprites death, I am attempting to kill off the emitter's children. (That sounds wrong) I am using this code: that.emitter.children.forEach(function(fire){ fire.kill(); }); It seems to kill all the particles except one. Any reason why one particle still remains, and any ideas on how I can remove it? Thanks guys!
  19. Target newest emitter

    Hi guys! I am launching an emitter whenever a sprite is killed. I want to know how to grab the newest emitter that was launched and not effect the ones that are already existing. Is this possible? //explosion debris this.debris = game.add.emitter(0, 0, 100); this.debris.makeParticles('debris'); this.debris.minParticleSpeed.setTo(-100, -100); this.debris.maxParticleSpeed.setTo(100, 100); function launchDebris(x, y){ console.log(that.debris) that.debris.x = x; that.debris.y = y; that.debris.alpha = 1; // I want this line to only effect the newest emitter that.debris.start(true, 1500, null, 10); }
  20. Hi yall, I want to make particles explosion but in one direction. All examples now just create particles that flow in every direction and gravity pulls them down. But I want to create same thing but that all particles are lowing right or left. How I can do that? I didn't find any property on emitter. Cheers, Robert
  21. Hi all, I'm creating a phaser+socketIO game where people have to race each other. I'm providing all players with an emitter as a trail. Ideally I'd like to keep a constant flow on the emitter but it always shoots out in bursts When I look into the rain example I see a constant particle flow: But with my project it only bursts. I know that it has to do with lifecycle and frequency but I'm a bit confused after all my tries. Emitter is made inside a Player object which holds the body sprite as well. ​this.emitter = game.add.emitter(this.sprite.x, this.sprite.y);this.emitter.makeParticles('particle'); //this.emitter.setXSpeed(10, 10); //this.emitter.setRotation(0, 0); this.emitter.setAlpha(1, 0, 1000); this.emitter.setScale(0.8, 0, 0.8, 0, 3000); this.emitter.minRotation = 0; this.emitter.maxRotation = 0; this.emitter.gravity = 0; this.emitter.setXSpeed(-400, 0); this.emitter.setYSpeed(-5, 5); this.emitter.start(false, 1600, 5, 0);Thanks guys, phaser kicks ass!
  22. Hi Everyone, I've got a game with falling snow, but it would be nice if the snow was already falling when the game starts. Right now it starts with a dark sky and then the snow starts falling. In Unity I believe that is an option called Preload(ed) for their particle system. I just noticed the Particle Storm plug-in is available--maybe it has this feature. Can someone give me any advice!? Thanks so much for such an awesome framework and community.
  23. In [both 1.1.4 and] 1.1.5 it seems that repeated calls to Emitter.start with the same quantity argument (no exploding) causes an increasing number of particles to be generated each call, rather than generating the indicated number of particles for that call. For example: I make 200 particles once (with makeParticles), then at set intervals want to spawn 5 particles. When these intervals have elapsed I call start(false, 0, 250, 5) to release 5 of the particles. After the first interval, 5 sprites are spawned. After the next interval, an additional 10 sprites are spawned (so there are 15 total), but I only wanted 5 more. Every interval, 5 more sprites are spawned that single call, leading to an geometric increase in the number of particles on the screen. If I use the explode property (call start(true, 0, null, 5)) then only five particles are spawned each time, as I would expect. This is perhaps not a bug, per se, because the source for Emitter.start explicitly checks if (explode){ this._quantity = quantity;}else{ this._quantity += quantity;}But I guess I am wondering why would this behavior ever be desired, and if it should really be this way?
  24. I'm looking to check the x value of all children of an emitter and kill it if x > 200. Here's my immediate non-phaser method solution (this is in the update loop) for (var i = 0, j = windEmitter.children.length; i < j; i++) { var s = windEmitter.children[i]; if (s.x > 200) { s.kill(); }}Seems like there's got to be a more efficient way to use a Phaser.Group method ( like checkAll() or callAll() ) but I can't figure out how to format them and still include my conditional. Thoughts?
  25. Advance time in emitters

    Hi guys, for my game i use a emitter (game.add.emitter) for a snowing weather effect. When i start the state the emitter starts as well. So it looks like it has just started to snow right at the moment the player starts the game. Is it possible to advance the emitter progress. So it looks like the emitter does its work for a while? thanks Tom