Character Dash

[sur0x]

Hi ,

 

First of all, I'm new to programming and creating games, so I'm trying to make my character dash some frames in X , they way I implemented it's kinda of teleporting the player.

 

Could anyone help me to figure out how to do it smoothly? I'm planning to add a custom dash animation to the sprite, so far I'm using the default phaser character.

 

Here's my piece of code:

        function dashLeft()        {        if (player.body.touching.down && player.body.facing == 2)            {                dashGauge = dashGauge-1                player.body.velocity.x += 1000;                console.log(dashGauge)                dashOut();              }        }                function dashRight()        {        if (player.body.touching.down && player.body.facing == 1)            {                    dashGauge = dashGauge-1                player.body.velocity.x += -1000;                console.log(dashGauge)                dashOut();            }        }

I think - player.body.velocity.x += -1000;  doesn't seem the best option for a smoothly movement

 

Thank's in advance.

[Pixelguy]

1000 is rather fast. Maybe try something slower.
But I don't know what "dasOut()" does.. that part seems a bit odd.

I suggest you store the players X position in a variable eg. "oldPos" on calling dashRight() and set some bool eg. "dashingRight = true".

Then all you have to do in your update() is something like:
 

if ( (dashingRight ) &&  (oldPos - player.x < 500)  ) {  // 500 would be the length of your dash move  player.body.velocity.x = -1000;  // or something some other speed  justDashed = true; } else {   dashingRight = false ;   if (justDashed) {     player.body.velocity.x = 0; // stop the player after dashing     justDashed = false;   } }

And don't allow the dashRight() function to be called if dashingRight is already true.
Of course you also have to set dashingRight to false if the player collides with any obstacles.

Something like that would be my approach

Edited January 22, 2014 by Pixelguy

[sur0x]

Thanks for the reply I'll check this approach asap, dashout function is to check the dash limit and set velocity to 0 if reaches the limit.

[Pixelguy]

I've edited the code above a little bit. Still untested but If I look at it given the fact I wrote it on my phone.. it somehow makes sense

 

Good luck

[Pixelguy]

Okay my code was kinda rubbish if you look at the bigger picture

 

Made a quick example:

var game = new Phaser.Game(1024, 672, Phaser.AUTO, 'holder', { preload: preload, create: create, update: update });function preload() {    game.load.image('space', 'assets/space.png');    game.load.image('ground', 'assets/platform.png');    game.load.image('player', 'assets/single-dude.png');}var platforms;var player;var globalGravity = 9;var dashingRight = false;var dashingLeft = false;var oldPos;function create() {  // place stuff  game.add.sprite(0, 0, 'space');  // The platforms group contains the ground  platforms = game.add.group();  /// Dont look at this.. totally bad   var ground = platforms.create(0, game.world.height - 64, 'ground');  ground.scale.setTo(4, 2);  ground.body.immovable = true;  var leftWall = platforms.create(0, 0, 'ground');  leftWall.scale.setTo(0.1, 50);  leftWall.body.immovable = true;  var rightWall = platforms.create(game.world.width - 20, 0, 'ground');  rightWall.scale.setTo(0.1, 50);  rightWall.body.immovable = true;  // The player and its settings  player = game.add.sprite(game.world.width/2  , game.world.height -120, 'player');  // player physics properties. Give the little guy a slight bounce.  player.body.gravity.y = globalGravity;  player.body.collideWorldBounds = true;    //  Our controls.  cursors = game.input.keyboard.createCursorKeys();  spaceBar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);  dashE = game.input.keyboard.addKey(Phaser.Keyboard.E);  dashQ = game.input.keyboard.addKey(Phaser.Keyboard.Q);  dashQ.onDown.add(dashLeft, this);  dashE.onDown.add(dashRight, this);} // create endfunction update() {    player.body.velocity.x = 0;  //Collision  game.physics.collide(player, platforms);  if (player.body.touching.left || player.body.touching.right) {    dashingRight = false ;    dashingLeft = false ;  }   // check for key inputs  inputHandler();  if ( dashingLeft && (oldPos - player.x < 100)  ) {  // 100 would be the length of your dash move    player.body.velocity.x = -500;  // or something some other dashing speed  } else {    dashingLeft = false;  }  if ( dashingRight && ( oldPos - player.x > -100)  ) {  // 100 would be the length of your dash move    player.body.velocity.x = 500;  // or something some other dashing speed  } else {    dashingRight = false;  } } // update endfunction inputHandler() {  // Arrow right  if (cursors.right.isDown) {    moveRight();  }  // Arrow left  if (cursors.left.isDown) {    moveLeft();  }  // Arrpw up  if ( cursors.up.isDown ) {    jump();  }}function jump () {  if (player.body.touching.down) {      player.body.velocity.y = -300;  }}function moveRight() {  player.body.velocity.x = 100;}    function moveLeft() {  player.body.velocity.x = -100;}function dashRight () {  oldPos = player.x;  dashingRight = true;  dashingLeft = false;}function dashLeft () {  oldPos = player.x;  dashingLeft = true;  dashingRight = false;}

Live test:

https://dl.dropboxusercontent.com/u/7910081/html5examples/dash/dash.html

[sur0x]

You sir, are awesome.

 

Thank you very much for this!!!

 

Trying right now

[sur0x]

I'm trying to put some animations on your code, but, Im with some problems, where should I put the animations?? When I had all movement inside update function my animations were functional, now when I jump for example when it hits the ground it keeps "jumping" and not updates to running animation.

[Heppell08]

Animating that code would be in the update like so:

If(player.body.velocity.x > 0)

{ Player.animations.play('walkright');

}

So on and so forth all in update.