How to make a sprite with fixed movement distance in Phaser - phaser-framework

Question

I have a grid-based top-down game with arcade physics and I'd like my player to move precisely between grid positions. But how can I do this?
I'm moving the player now on keydown using velocity, then resetting the velocity to 0 on update so there's no inertia.
function update(){
this.player.body.velocity.x = 0
this.player.body.velocity.y = 0
if(this.keyIsLeft){
this.player.body.velocity.x -= 200
}
else if(this.keyIsRight){
this.player.body.velocity.x += 200
}
else if(this.keyIsUp){
this.player.body.velocity.y -= 200
}
else if(this.keyIsDown){
this.player.body.velocity.y += 200
}
But how can I get the player to only move a square (or half square) at a time?
The ideal movement is shown here in this Lolo game, where at any given time the player is on a grid or half-grid space: https://www.youtube.com/watch?v=QQKScIJYUxU&t=5m30s
I can't just set the x and y position or use tweening because I need to keep arcade physics, and those adjustments interfere with them.

Answer 1

Updated:
Here is my updated Answer to solve this case.
I implemented this method based on the example provided by Phaser.
The key part to making this fixed movement happen is to disable the keyboard input while the item is moving.
Let's say if you pressed left key, the player is moving towards left. While the player starts moving, you set a variable notMoving to false, which notifies the update function to not take any cursor inputs. After a timeout, let's say 1000ms, you can set the variable notMoving to true. Then the update function will continue take the cursor input.
Here is the example code snippet:
function create ()
{
cursors = this.input.keyboard.createCursorKeys();
player = this.physics.add.image(400, 300, 'block');
player.setCollideWorldBounds(true);
player.setData('notMoving', true);
}
function setfixedMovement(velocity, direction) {
if (direction === 'up') {
player.setVelocityY(-velocity);
} else if (direction === 'down') {
player.setVelocityY(velocity);
} else if (direction === 'left') {
player.setVelocityX(-velocity);
} else {
player.setVelocityX(velocity);
}
player.setData('notMoving', false);
setTimeout(() => {
player.setData('notMoving', true);
}, 1000);
}
function update () {
if (player.getData('notMoving')) {
player.setVelocity(0);
if (cursors.left.isDown) {
setfixedMovement(300, 'left');
} else if (cursors.right.isDown) {
setfixedMovement(300, 'right');
}
if (cursors.up.isDown) {
setfixedMovement(300, 'up');
} else if (cursors.down.isDown) {
setfixedMovement(300, 'down');
}
}
}
I put the phaser example link in the previous answer. If you edit the example and replace the part of example code with the snippet I provided above, you can see it working as you expected.
Previous Answer:
I think what this phaser example does exactly what you want to do
In short,
in each update, set the velocity to 0,
then detect the check the cursor key status and set the velocity accordingly
the following code is copied from Official Phaser 3 Example
function update ()
{ player.setVelocity(0);
if (cursors.left.isDown)
{
player.setVelocityX(-300);
}
else if (cursors.right.isDown)
{
player.setVelocityX(300);
}
if (cursors.up.isDown)
{
player.setVelocityY(-300);
}
else if (cursors.down.isDown)
{
player.setVelocityY(300);
}
}
Here is the link to the example
https://labs.phaser.io/view.html?src=src\input\keyboard\cursor%20keys.js