Search the Community

To clarify, I'm not looking for anything complex or hyper realistic. As far as I can tell, there are *libraries* for this behavior. Ex: https://github.com/topics/flocking But these are too complex. I seem to recall years ago there were process.js examples of simple code for particle simulation of flocking behavior. Something like that is what I'm looking for. Thanks! Update: ended up implementing the above example in Typescript and pixi.js: https://gist.github.com/frankandrobot/e93be4b3af781f779a26be096201d348

Hi, I've just noticed that the ParticleContainer doesn't seem to support blendModes. I thought previously it had worked when the tint property had been set to true, but may have imagined it. This still a current limitation?

Hi folks! Let me introduce you phaser particle editor. This tool helps you to create phaser particle effects visually. It is of course open source and you are welcome to contribute! Editor also has plugin to help you create particles based on JSON data generated by Editor.

I've seen a post asking the same question before but unfortunately i can't locate it again. I'm trying to achieve something like this, particle trail following the player

Hi all, How I can make particles (in red color) visible with white background (scene.clearColor = new BABYLON.Color4(1,1,1,1))? Please find attached picture for details. Thanks in advance.

Could not find destroy function in the particle Emitter and is there best way to remove from scene?

The proton particle engine is really good. It can make a lot of advanced effects and it looks like it helps! It is said that special optimization was made for pixi.js http://a-jie.github.io/Proton/

I am trying to following this example and I want to create multiple lines in a path using lineTo instead of circleTo, but instead the particle treats it like two points. var path = new Phaser.Curves.Path(0,0).lineTo(100, 200); Any help is appreciated.

Hi All, Disclaimer: I'm very new to Babylon. I was playing around with this cloth tutorial, and I wanted to make the cloth land on some sort of ground object. So far, I haven't been able to find one that works. You can see in this playground how the cloth reacts to a box impostor, side-by-side with a sphere behaving normally. I have the restitution of everything set to 0. The sphere stops nicely but the cloth shoots off into the distance. I've also tried this with a ground impostor (sphere works fine, cloth doesn't interact with the ground), and a plane impostor (cloth collides correctly, but sphere shoots up into the stratosphere). I have also tried adjusting the initial linear velocity of the cloth particles. More velocity = flies away faster, less velocity = falls right through the ground. My ultimate goal involves the cloth having an initial z velocity, so I'd like to be able to make that work. Can someone help me figure out what I'm missing here? Does it have something to do with the distance joints connecting the particles in the cloth? Should I try using sphere impostors instead of particles? Thanks! (side note: is there a better way to translate the cloth's position than the translatePositions function I made? The built-in ground.rotation.axis method rotates the cloth, but not the actual particles themselves)

In Babylon.js Is there a way to render animated sprites with an additive (one one) blend mode? Either that or can I use an animated sprite as a particle that uses the particle's one one blend mode? Thanks, -=T=-

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.

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

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.game.add.emitter(this.config.positionX, 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.game.add.emitter(this.config.positionX, 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?

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!

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.

Hi guys! A little over a month, I started my studies with pandajs, and I had the idea to make a particle editor for pandajs. I hope you like the tool. Thanks enpu, for you have created pandajs! It a great tool. Congratulations! link: http://byleosantana.com/pandajs/particleeditor/ Notes:1. I made a little change in particle.js, I inserted a var 'this.color',to change particle color.2. I made a extend of Emitter, to read the settings file. 'particleSettings.json'. links: http://byleosantana.com/pandajs/archives/particle.js andhttp://byleosantana.com/pandajs/archives/particleSystem.js Now I'm working in a way of import the archive 'particleSettings.json' to edit in particleEditor. note: this will be inserted in Update for v 1.1

hi, my goal is : have multiple explosion and have no lag so i use a particle emitterbut after a certain delay, a lag appears. what the best solution to avoid that ? thanks for yours suggestions. character.prototype.explode=function(){ this.particle = game.add.emitter(this.cible.x,this.cible.y,200) this.particle.makeParticles("rect") this.particle.minParticleSpeed.setTo(-600,-600) this.particle.maxParticleSpeed.setTo(800,800) this.particle.setAlpha(.8, .6) this.particle.minParticleScale = .2 this.particle.maxParticleScale = .5 this.particle.minRotation = 0 this.particle.maxRotation = 0 this.particle.on=false this.particle.start(true,3900,null,20) } game.time.events.loop( 500,this.explode,this )

I am trying to make a game similar to a game on the Play Store, called 'Sine Line'. I am not able to figure out how to keep the particle oscillating when input is not given. When input is given, the particle should travel in a sinusoidal manner. But when you release the input, it shouldn't stop. Instead, it should keep oscillating along the X axis. Any help appreciated. Thank you in advance. P.S. I am attaching the JS file. I've written it in a very messy manner. Sorry for that. game.js

hi, i would have this effect like my capture screen. the square when it move have two ghost squares with different opacity. But when it is stopped, the ghost squares are just beneath the square. I have try this with a particle emitter + update but after trying a lot of parameters, I can not seem to have the desired effect. have you a soluce for me ? this.ghost_player = game.add.emitter(this.x, this.y-50, 200) this.ghost_player.makeParticles("rect") this.ghost_player.minParticleSpeed.setTo(-0,-0) this.ghost_player.maxParticleSpeed.setTo(0,0) this.ghost_player.setAlpha(.1, .2) this.ghost_player.minParticleScale = 1 this.ghost_player.maxParticleScale = 1 this.ghost_player.minRotation = 0 this.ghost_player.maxRotation = 0 this.ghost_player.on=true this.ghost_player.start(true,8000, 200) first.prototype.update = function() { this.ghost_player.y=this.y this.ghost_player.x=this.x }

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.game.add.emitter(this.game.world.centerX, this.game.world.centerY); // 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);

I need to show some particles on canvas2d, how could i do it?

Hi, babylon js developers! Please help me :). I want to detect particle collision with camera elipsoid, and when particle will collide - destroy this particle. Can i make this in particle system update function or how? Babylon js can make this for me?

I asked a dumb question that i realized the answer to, and consequently, now i can't delete this thread. Sorry

asdf

I am currently searching for a particle engine for my current game project and just came across Proton: http://www.a-jie.cn/proton/ It looks fantastic - plus - it supports Pixi.js. At least it features a demo explicitely using the Pixi.js engine. Thought this might be of some interest for some of you. Best, benny!