Titus

create: function() { this.player = this.game.add.sprite(0, 50, 'player'); this.game.physics.arcade.enable(this.player); this.player.body.collideWorldBounds = true; this.player.animations.add('walkright', Phaser.Animation.generateFrameNames('Fire Marshall Main Walk Cycle_', 20, 43,'', 5), 24, true); this.player.animations.play('walkright'); //this.player.body.velocity.x = 150; } Sorry, here's the code.

Hello, I have a player spritesheet with 25 frames for a walk animation loop. When I add the animation and play it without any velocity is works fine. When I add velocity to it I can see that the feet of the sprite are visibly shaking. I've tried playing around with the velocity values and there does seem to be less shakiness with lower velocity values but then the feet are just moonwalking on the floor . I'll add my code below. In the game the velocity is mapped to the right arrow but for testing everything is in the create method here:

Hi @samme, thanks for the reply and sorry for my delayed one. I do have collide set to true in the makeParticles method and neither this.emitter.removeChild() or this.emitter.removeChildAt(0) remove the overlapping particle from the game world. They just move through it. Am i using these methods in the correct way (to remove the overlapping particles)? The overlap is definitely triggering because I have other stuff in the game that is working within the same IF statment.

Hello, Just a quick question. I want to kill any emitter particles that overlap with a sprite. I've tried: if(this.game.physics.arcade.overlap(this.emitter, this.sprite)) { this.emitter.removeChildAt(0); //and this.emitter.removeChild(); }

@samme Thank you, that's exactly what I needed. I'm still not sure why setting emitter.rotation/angle == frontArm.rotation/angle in the update caused the emit point to move. I'm guessing the actual emitter is a rectangle with an anchor of 0,0 and it was updating the rotation/angle of that whereas setAngle() is updating the actual emit locations angle. Appreciate the help regardless!

@samme If I do that then the spray will always go directly forward, even if the arm is aiming up/down. I've more or less achieved what I wanted by placing a sprite with a null texture right at the end of the nozel of the extinguisher and then added the particle as addChild() of the frontArm sprite. Then in the update I have emiiter.emitX/Y = this.particle.world.x/y. This makes it so the spray always starts at the end of the nozel but still the spray always shoots directly to the right, even when the nozel is being pointed up or down. Any other suggestions?

Hi, I'm having some trouble with my emitter that is used as spray particles for a fire extinguisher. I've set the emitX and emitY to position relative to the player's front arm and set the emitter.rotation = frontArm.rotation. The problem I'm having is that when the arm rotates the particle's emit location is moved. I've attached some screenshots and code to show what I mean. I'm sure it is something simple that I'm missing but I've searched on the forums for quite a while and can't seem to find a solution. Any help would be appreciated. FireSim.test = { create: function() { this.game.stage.backgroundColor = "#d36a6a"; this.waterSpray = this.game.add.emitter(0, 0);// (x, y, max particles) this.waterSpray.makeParticles('whiteParticle', '', 5000, true, false); this.waterSpray.maxParticleScale = 5; this.waterSpray.minParticleScale = 1; this.waterSpray.flow(1000, 100, 50, -1, false); this.waterSpray.minParticleSpeed.setTo(400); this.waterSpray.maxParticleSpeed.setTo(800); this.waterSpray.setYSpeed(-30, 30); this.waterSpray.gravity = 0; this.frontArm = this.game.add.sprite(150, 100, 'frontArm5'); }, update: function() { if(this.game.physics.arcade.angleToPointer(this.frontArm.world) < 1) //only move the arms towards the mouse angle if it is less than 1. This prevents erratic movement when the mouse pointer is positioned behind the player { this.frontArm.rotation = this.game.physics.arcade.angleToPointer(this.frontArm.world); } this.waterSpray.emitX = this.frontArm.world.x + 270; this.waterSpray.emitY = this.frontArm.world.y + 160; this.waterSpray.rotation = this.frontArm.rotation; if (this.game.input.activePointer.isDown) { this.waterSpray.on = true; } else { this.waterSpray.on = false; } }, };

@smdool Thanks for posting your solution. Same thing was happening to me and i'm not sure I would have figured that out without coming here!

I've actually fixed this now. Weirdly I had to cut the area of the texture pixel perfect in Photoshop and not leave any of the chequered canvas around the png (which is usually ignored). The most confusing part is that I had used this texture previously as a tileSprite without this happening.

Nobody got any ideas what's causing this?

Hi guys, I'm having an issue with a tileSprite I'm using to cover my game screen. It looks like the repeating texture has spacing/margin added on all sides which creates this grid like effect in the screenshot below. I have no idea how this has happened because yesterday when I was working on the game (and all times previously) the tileSprite formed a solid texture the size of the game world. I've tried this with 2 separate textures, in different states/browsers and I'm starting to think I'm going crazy. Any help advice would be greatly appreciated. Thanks!

@samme Excellent, thank you!

Hi guys, just a quick question. I'm trying to detect overlap between emitter particles and a group like so: create: function() { this.emitter = this.game.add.emitter(0, 0, 1000); this.emitter.enableBody = true; this.emitter.makeParticles('whiteParticle'); this.emitter.minParticleSpeed.setTo(100); this.emitter.maxParticleSpeed.setTo(800); this.emitter.gravity = 50; this.emitter.maxParticleScale = 3; this.emitter.minParticleScale = 0.1; this.emitter.setYSpeed(-150, 150); this.emitter.flow(1500, 100, 100, -1, false); //lifespan, frequency, quantity, total, immediate this.emitter.checkWorldBounds = true; this.emitter.outOfBoundsKill = true; this.fire = this.game.add.group(); this.fire.enableBody = true; this.fire3 = this.game.add.sprite(1423, 500, 'fireL3'); this.fire2 = this.game.add.sprite(1423, 500, 'fireL2'); this.fire1 = this.game.add.sprite(1423, 500, 'fireL1'); this.fire.add(this.fire3); this.fire.add(this.fire2); this.fire.add(this.fire1); }, update: function(){ this.game.physics.arcade.overlap(this.emitter, this.fire, this.damageFire, null, this); } damageFire: function(){ console.log('fire damaged!'); }, I can get this to work fine if I check for overlap between 2 sprites/groups, but I cannot get it to work for the emitter. Could anyone point me in the right direction? Thanks

Thanks again @Skeptron. Have you used Spine yourself? I might have to give it another look if the current way are doing things is just too heavy. I've done a bit of research but it wasn't clear to me if it's possible to use Spine animations with Phaser.

@Skeptron Thanks for the suggestions. I really don't think that Spine or Spriter would be what I need. Mainly because my animations aren't really skeletal, except the player character, which I don't really have this issue with. I'm very new to game development but I've been tasked with creating this game primary for web browsers on PC but should to work for mobile devices. I have someone making the assets using Abode After Effects. It's a fire extinguisher simulation. An example here is I have a state that is shown for game over if the user selects the wrong type of extinguisher. The animation on that page shows the player (half body framing) getting electrocuted , but there isn't really any skeletal movement. I have exports of all the frames for a 3 second animation at 24fps. That gives me 70+ images that I put into an atlas using Texture Packer. Each export is 1920 x 1080 with the player taking up about 1/3 to 1/2 of that size. Texture packer does a decent job of packing them together in the atlas. I was hoping that I was just doing something wrong but I'm now assuming that I just have too many textures that are too big for Phaser (or maybe any html5 framework) to load well. Interestingly I have noticed quite a bit of improvement by changing the render type from Phaser.AUTO to Phaser.CANVAS. That has surprised me quite a bit.. I'm using a PC and it's not super high end but it has a GTX 750 Ti so I thought that webgl would offer the better performance for sure and I also read that webgl would be best for most mobile devices.