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 34 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.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?
  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. particle editor for pandajs v 1.0

    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
  7. 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 )
  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. 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 }
  10. 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);
  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. 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!
  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. 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.
  19. 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).
  20. 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?
  21. I was implementing some simple fireworks using emitters that looked pretty, but after a couple of minutes on the iPad, they killed the browser. Psudeo code is: Firework Constructor: - Create sprite for positioning, and to be the visible projectile. - Create primary emitter for particle trail and primary explosion. - Create secondary emitter for multicolour explosions. - Call makeParticles on both emitters with a random (out of 4) particle sprite. Firework Update function: - Decrement life timer. - Set emitters position to match projectile sprite position. - When time is up, call begin. - If already started, call boom instead. Firework Begin function: - Reset all positions. - Revive projectile sprite. - Set velocity on the projectile sprite to shoot it up the screen. - Call makeParticles on the secondary emitter with a random particle sprite to change up the explosion colours. - Start emitter 1 to leave a particle trail up the screen. Firework Boom function: - Kill projectile sprite - Call start on primary emitter, set to explode. - 50% chance to call start on secondary emitter, set to explode. This created a really nice visual effect, but after a couple of minutes of running on the iPad, it caused Safari to close. I altered the code to only call makeParticles on the secondary emitter once at the creation of the firework object and now it runs fine without killing the browser. So, lesson for today is to not call makeParticles on an emitter (or 4) every few seconds. It is probably better to have a bunch of secondary emitters from the start, and pick one to explode at random.
  22. 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!
  23. 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
  24. 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?
  25. 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);}