Search the Community

Showing results for tags 'particle'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 35 results

  1. Phaser Particle Editor

    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.
  2. 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.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?
  3. 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
  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. 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 )
  7. how do you do this effect ?

    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 }
  8. 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
  9. 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.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);
  10. 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.
  11. I need to show some particles on canvas2d, how could i do it?
  12. 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?
  13. 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=-
  14. Can't delete this thread

    I asked a dumb question that i realized the answer to, and consequently, now i can't delete this thread. Sorry
  15. 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!
  16. Hi fellow game developers. I have a problem: I want to scale up the particles that come out of an emitter, but they should still look like pixels and not have these blurry borders. So i tried "bullet_emitter[number].smoothed = false;", but this didn't work... In the docs it says you need to do someting with "new Particles(game)", but i don't get it. Anyways, if anyone could show me an example on how to set .smoothed = false; on all particles emitted from an emitter, i would be really happy. Here my game: http://qcoded.de/game/libary/rogue/launcher.html click the "enter the game" button and press space when the game loaded. Now you should a bullet (the particle i want to be .smoothed = false;) emitted from an emitter beneath the player.
  17. I have this Sprite that has a child Emitter. At certain points, dictated by the AI, the emitter explodes out all the particles. I collide the emitter against my tilemap's collision layer and overlap it against the player. Both the collision layer and the player are exposed as properties on my game instance. When a particle overlaps the player I set alive to false and kill the particle. That works great. The particles also successfully collide against the collision layer. However, they don't bounce. It looks like the tilemap separator code *should* be bouncing them, but it's not. Here's the emitter's creation in my Sprite constructor: var screamEmitter = game.add.emitter(0, 0, 20); screamEmitter.makeParticles('screamParticle'); screamEmitter.setAllChildren('body.allowGravity', false); screamEmitter.setXSpeed(-200, 200); screamEmitter.setYSpeed(-100, 75); screamEmitter.setAlpha(1, 0, 1500, Phaser.Easing.Quadratic.In); screamEmitter.setScale(1, 2, 1, 2, 1500, Phaser.Easing.Cubic.Out); this.addChild(screamEmitter); screamEmitter.x = 0; screamEmitter.y = -10; this.scream = screamEmitter;Here's the collision and overlap calls from my Sprite's update method: this.game.physics.arcade.collide(this.scream, this.game.collisionLayer); this.game.physics.arcade.overlap(this.scream, this.game.player, this.onScreamVsPlayerCollision, null, this);Here's how I start the emitter via a timed event off a state machine: this.scream.start(true, 1500, null, 1000);Like I said: the particles come out just fine, they collide with player and collision layer just fine... they just don't bounce. Any ideas?
  18. Particle Trail

    I created a particle trail via emitter. It has its x and y properties set to the mainSprite . I would like to adjust the particle anchor so they appear from the back of the sprite , not from its middle. I tried the following : - adjusting the mainSprite anchor, however this affects the physics system and the input manager too so it's not an option. - setting the emitter position to mainSprite.x - offset(it only works if the sprite is moving on the x axis). - making the emitter a child of mainSprite (the trail stops working properly and you can't set the z-depth). If I won't find a solution I will adjust the mainSprite texture size so everything goes well with mainSprite.anchor.setTo(0.5, 0.5).
  19. Cocoonjs low FPS Problem

    Hi,I am from Taiwan,Pandjs is so good. My English is poor but I have a problem Now i making a game with panda and cocoonjs My problem is the particle let FPS drop or not? Becase I use lot of particles. In Chrome or FireFox,my game fps is usually 60. http://i.imgur.com/g9E1wUc.jpg http://i.imgur.com/uMxkW1L.jpg But when i use cocoonjs,FPS drop to usually 30~40.(My mobile is Sony Xperia Z1) When particle more in stage,FPS drop more!! Is it normal?
  20. Custom Class for Particles

    I've been trying to figure out who to create a custom particle class. I get the concept of prototype to some extent but I'm not sure how to use that with the emitter.particleClass property. Can someone show a really brief example of how to extend the Particle class with an extra property and or member? Thanks!
  21. Hi Guys, I've been asking around on twitter but as yet don't have an answer so I thought I'd ask here too Does anyone know of a particle editor I could use with the proton lib? (http://a-jie.github.io/Proton/) If not does anyone know any good particle libs I can use with Pixi which also come with a visual editor? Cheers, Dean
  22. Hello All, Is it possible to access and change the properties of individual particles released from an emitter? (without requiring an overlap detection) Let's say I've emitted 3 particles from an emitter... Is there a way to retrieve the properties of each particle (x,y,velocity,rotation, etc) then execute code that will be applied to that single particle if it meets certain criteria? I've been using emitters to create enemies, projectiles, and scene objects. Many times there are multiple on the screen at one time and they need to be accessed and respond individually. A scenario that I've came across is the combination of particles from different emitters that must work together. For example, you have an "enemy" particle, that will shoot a a "fireball" particle from the "enemy" particles current location... then the "fireball" particle will be followed by an emitter to create a smoke trail of particles as the "fireball" particle travels. I've come up with a work around by placing a physics.body that is the full size of the screen and then checking with "game.physics.arcade.overlap". Since any particle will always be overlapping with it, I can execute code on that particle. BUT.. this still only works if there is only one particle of a certain type. It doesnt give me access to indivual particles. Are particles assigned unique identifiers, and can they be accessed so each particle can be controlled individually without requiring overlap/collision detection?
  23. Animated particles

    Hi, I'm trying to get an explosion working with animated particles in Phaser. So far I've got the emitted working fine and seem to be able to add animations to the particles, but running these animations does nothing. Since the docs say that "Particles are extended Sprites" I would assume that you can add and run animations in the same way that you do an a normal sprite? Any help would be greatly appreciated!! var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });var emitter;function preload() { game.load.spritesheet('partAnim', 'assets/partAnim.png', 134, 141);}function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = 0x337799; emitter = game.add.emitter(0, 0, 100); emitter.makeParticles('partAnim'); emitter.gravity = 200; game.input.onDown.add(particleBurst, this);}function particleBurst(pointer) { emitter.x = pointer.x; emitter.y = pointer.y; emitter.start(true, 2000, null, 1); var part = emitter.getTop(); part.animations.add('run'); part.animations.play('run', 15, true); console.log(part);}
  24. A more advanced Particle System

    Hi, I made another particle system. This time with the guidance of this YT tutorial. I made a filter showing fire-like using this particle system. As I think this is a interesting topic to those newers like myself, I want to share my approach. The readme: /* README!! This particle system works with some sort of filters. How it works: x: x position, automatically added to Emitter's x (you can't have a particle floating around without a reference point) y: y position vx: x velocity vy: y velocity type: it could be either 'arc' or 'rect' size: the size of the particle, if arc, this represents radio * 2 opacity: self describing colorType: could be either 'rgba' or 'hsla' color: array containing the first 3 params of rgba/hsla, opacity is automatically added particles: the number of particles created every frame, bad performs when reaching the 10 value life: the number of frames this particle will live gravity: gravity force wind: wind force NO NEED to put every value in a filter, it has fallback values */Best regards. The Tutorial: Javascript Motion, Particles and More index.html
  25. Basic Particle System (for newers)

    I know this isn't much, but I wanted to share with you a simplistic and very basic particle system. This is my little contribution to those newers who want to experiment. Code in attached files. particles.bmp index.html