Modification to Phaser Coding Tips 5

[Clowerweb]

You can find the code/demo here: http://phaser.io/tutorials/coding-tips-005

 

Basically, I need to modify it so that it doesn't autorun in the set direction. That is, only move as long as a cursor key is down, allowing you to stop at will. All of the other behaviors should stay the same. I tried this in the update function:

if (!this.cursors.up.isDown && !this.cursors.right.isDown && !this.cursors.down.isDown && !this.cursors.left.isDown) {  this.car.body.velocity.x = 0;  this.car.body.velocity.y = 0;}

It works well, except if you stop, you cannot continue in the same direction again, only switch directions. I suspect that's because of the checkKeys function, where it's making sure the "current" property (your last known moving direction) is not the direction you're trying to go, thus preventing you from going in the same direction twice in a row. I'm baffled as to how to fix this though, because if I remove the "&& this.current !== Phaser.(whatever direction)" from the if/else block, you can't move more than like 1 or 2 pixels in any direction, so it breaks all movement entirely. This is the kind of movement I'm looking for: https://www.clowerweb.com/games/thunder-castle/ - in fact it's going to replace the movement system I have implemented in that very game, since it relies too much on collision detection and can be buggy in a tight grid.

 

Thanks in advance for any and all help!!

[Clowerweb]

I got it resolved with the following:

checkKeys: function (actor) {    if (this.cursors.up.isDown) {    if (actor.current !== Phaser.UP)      this.checkDirection(actor, Phaser.UP);    else {      actor.turning = Phaser.NONE;      this.move(actor, actor.current);    }  } else if (this.cursors.right.isDown) {    if (actor.current !== Phaser.RIGHT)      this.checkDirection(actor, Phaser.RIGHT);    else {      actor.turning = Phaser.NONE;      this.move(actor, actor.current);    }  } else if (this.cursors.down.isDown) {    if (actor.current !== Phaser.DOWN)      this.checkDirection(actor, Phaser.DOWN);    else {      actor.turning = Phaser.NONE;      this.move(actor, actor.current);    }  } else if (this.cursors.left.isDown) {    if (actor.current !== Phaser.LEFT)      this.checkDirection(actor, Phaser.LEFT);    else {      actor.turning = Phaser.NONE;      this.move(actor, actor.current);    }  }},checkDirection: function (actor, turnTo) {  if (actor.turning === turnTo || actor.directions[turnTo] === null) {    return;  }  if (this.safetile.indexOf(actor.directions[turnTo].index) === -1) {    this.move(actor, actor.current);    return;  }  if (actor.current === actor.opposites[turnTo]) {    this.move(actor, turnTo);  } else {    actor.turning = turnTo;    actor.turnPoint.x = (actor.marker.x * this.gridsize) + (this.gridsize / 2);    actor.turnPoint.y = (actor.marker.y * this.gridsize) + (this.gridsize / 2);  }},setDirection: function (actor) {  actor.marker.x = this.math.snapToFloor(Math.floor(actor.x), this.gridsize) / this.gridsize;  actor.marker.y = this.math.snapToFloor(Math.floor(actor.y), this.gridsize) / this.gridsize;  actor.directions[1] = this.map.getTileLeft (this.layer.index, actor.marker.x, actor.marker.y);  actor.directions[2] = this.map.getTileRight(this.layer.index, actor.marker.x, actor.marker.y);  actor.directions[3] = this.map.getTileAbove(this.layer.index, actor.marker.x, actor.marker.y);  actor.directions[4] = this.map.getTileBelow(this.layer.index, actor.marker.x, actor.marker.y);  this.checkKeys(actor);  if (actor.turning !== Phaser.NONE) this.turn(actor);},update: function () {  if (!this.cursors.up.isDown && !this.cursors.right.isDown && !this.cursors.down.isDown && !this.cursors.left.isDown) {    this.player.body.velocity.x = 0;    this.player.body.velocity.y = 0;  } else {    this.setDirection(this.player);  }}

Basically, just added more conditions in checkKeys (skipping checkDirection if they are attempting to move in their currently already set direction), and set velocity x and y to 0 in update if no cursor keys are down. I plan to use these functions to move enemies as well, so switched everything from this.car/this.player to "actor" and passed this.player into the functions. I also created the setDirection function, moving most of the code from the tutorial out of the update function into there, so that it can have more utility.