Jump to content

Play sprite animation, then hold


Recommended Posts



I've recently started working with the Phaser framework, and have really been enjoying it. I have found everything to be really well documented, however, I can't seem to find a solution to a problem I have been struggling with. 


Simply put, I want to play an animation on a control event once, and hold the final frame of that animation until the key is released. To put this in context, imagine a top down space shooter where the player is holding the the "D" or "right direction button" to move to the right. The sprite sheet I have animates the "bank", but it just continues to loop when the button is held. I want the visual to reflect the ship banking right until the button is released. I will attempt to attach a few images to help explain.






Here is the code:

function preload() {			// preload the scrolling background image			game.load.image('scrollingBG', 'assets/finalform_map1.png');			//preload the hero sprite sheet			game.load.spritesheet('hero_v1', 'assets/hero_v1_ss.png', 100, 100);		}		//create hero variable		var hero;		function create() {			// scrolling background image create			scrollingBG = game.add.tileSprite(0, 0, 800, 2500, 'scrollingBG');			//create hero sprite			hero = game.add.sprite(350, game.world.height -150, 'hero_v1');			//create hero animation sequences			hero.animations.add('hero_left', [4, 3, 2, 1, 0], 10, false);			hero.animations.add('hero_right', [6, 7, 8, 9, 10], 10, false);			//hero controls			cursors = game.input.keyboard.createCursorKeys();		}		function update() {			// scroll the background			scrollingBG.tilePosition.y += 2;			//hero control functions			if (cursors.left.isDown) {				//move to the left				hero.animations.play('hero_left');			}			else if (cursors.right.isDown) {				//move to the right				hero.animations.play('hero_right');			}			else {				//stand still				hero.animations.stop();				hero.frame = 5;			}		}

Any help with this would be greatly appreciated!!



Link to comment
Share on other sites

So what's happening here is, for every frame that you're holding down left, hero.animations.play is being called. Every single frame. Instead, you only want it to be called for the first frame. There's a couple different ways of handling this, but personally, I love phaser's event stuff. It makes everything so much simpler.

leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);leftKey.onDown.add(function() {hero.animations.play('hero_left');});

This event is already set up to where it'll be called once until the key is released and then pressed again. Super-neato!

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...