Pixel Grid Sprite Tile Movement

[Robotic Soldier Grungram]

I am trying to create a top-down game with movement constrained to a grid (think Pokemon Red/Blue movement).

I have successfully imported a tilemap (32x32 pixel tiles) into my game, and I have set up tile collisions using setCollisionBetween() and physics.collide() for a player-controlled sprite. Currently I am adjusting body.velocity properties on keyboard input to move the player sprite, which works fine but is not really what I want.

What I would like to do is to move the player sprite 1 tile (32 pixels) in the appropriate direction so that it always aligns to the tiled grid. I have tried updating the sprite's body.x and body.y values, but when I do this the player sprite seems to ignore all collision logic with the tilemap layer tiles set with setCollisionBetween().

So in short, how can I move a sprite x pixels every key press while still limiting the speed at which the sprite can cover a certain distance (as well as ensuring collisions still work)?

[Robotic Soldier Grungram]

Here's my code, if it will help:

 

var Game = (function () {    var game    var map    var layer    var keys = {}    var player    var playerVelocity = 250    var init = function () {        game = new Phaser.Game(512, 480, Phaser.AUTO, '', {            preload: preload,            create: create,            update: update        })    }    var preload = function () {        // load assets        game.load.tilemap('caveMap', 'assets/tilemaps/cave.json', null, Phaser.Tilemap.TILED_JSON)        game.load.image('caveTiles', 'assets/tilemaps/cave.png')        game.load.spritesheet('player', 'assets/bunny.png', 32, 48)    }    var create = function () {        // tilemap        map = game.add.tilemap('caveMap')        map.addTilesetImage('cave', 'caveTiles')        map.setCollisionBetween(1, 8); // wall tiles        layer = map.createLayer('Cave')        // layer.debug = true        // player        player = game.add.sprite(game.world.width / 2 - 16, game.world.height / 2 + 64, 'player')        // controls        keys.w = game.input.keyboard.addKey(Phaser.Keyboard.W);        keys.a = game.input.keyboard.addKey(Phaser.Keyboard.A);        keys.s = game.input.keyboard.addKey(Phaser.Keyboard.S);        keys.d = game.input.keyboard.addKey(Phaser.Keyboard.D);    }    var update = function () {        // set player to collide with layer collision tiles        game.physics.collide(player, layer)        // reset player velocity        player.body.velocity.x = 0        player.body.velocity.y = 0        // player movement        if (keys.w.isDown) {            player.body.velocity.y = -playerVelocity        } else if (keys.s.isDown) {            player.body.velocity.y = playerVelocity        }        if (keys.a.isDown) {            player.body.velocity.x = -playerVelocity        } else if (keys.d.isDown) {            player.body.velocity.x = playerVelocity        }    }    return {        init: init    }}())

[Heppell08]

The reason its ignoring the collisions is because you aren't technically colliding. You're telling the player to go from a certain X to another X. Basically a teleport. Only thing I think may be an idea for using that movement method is using:

if(player.body.blocked.left === true)

{ // move } else { //cant move }

The blocked left/right/up/down may be the option you'd need.

The collision should still stand as the block will true when near the specified tile. So allow the movement when the way is not blocked using that method. Give it a try and see.

Hope this is somewhat helpful