Jump to content

Grid-based Movement?


Recommended Posts

Hey guys! I'm new to Phaser development, to JavaScript as a whole, and to any graphical game development whatsoever. Physics and such elude me still.

I've set up a simple tilemap and lil character that you can move around. The collisions and boundaries work fantastically. Buuuut, I need grid-based movement! Think Pokemon, and other JRPGs that move you along a grid and never diagonally. I can more or less snap to the grid right now. The grid is 32x32 (sprite is as well) and I currently work movement like this...

function update(time, delta)
    const speed = 175;
    const preVelocity = player.body.velocity.clone();
    // stop all velocity from previous frame


    // horizontal movement
    if (controls.left.isDown) {
        player.x -= 32;
    } else if (controls.right.isDown) {
        player.x += 32;

    // vertical movement
    if (controls.up.isDown) {
        player.y -= 32;
    } else if (controls.down.isDown) {
        player.y += 32;

    // ensure that a player doesn't move faster diagonally

    if (controls.left.isDown) {
        player.anims.play("walk-left", true);
    } else if (controls.right.isDown) {
        player.anims.play("walk-right", true);
    } else if (controls.up.isDown) {
        player.anims.play("walk-up", true);
    } else if (controls.down.isDown) {
        player.anims.play("walk-down", true);
    } else {

        // if we were moving, pick and idle frame to use
        if (preVelocity.x < 0) player.setTexture("cAtlas", "left1");
        else if (preVelocity.x > 0) player.setTexture("cAtlas", "right1");
        else if (preVelocity.y < 0) player.setTexture("cAtlas", "up1");
        else if (preVelocity.y > 0) player.setTexture("cAtlas", "down1");

But the character zooms around like a caffeine-loaded kid on crack. It also ignores collision with boundaries, though it was working before when I didn't implement incrementing x and y by 32. How would you go about implementing grid-based movement into a game, while honoring collisions?

Link to comment
Share on other sites


  • Recently Browsing   0 members

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