Tile based movement

[anaibol]

My name is Anibal and I am another guy trying to make a 2D HTML5 MMORPG.

I am using Phaser and now I am stuck trying to make the movement of the player in tiles.

Since its an online game based on tiles of 32 x 32, i need that the player stops moving exactly in the middle of the tile.

 

i was trying like that:

 

        if(me.player.y <= move_to_y){          stopPlayer()        }

but the player doesnt stop exactly where i want.

Is there a way to render a moving element from x to x2 and stop?

 

 

Thanks in advance!

[lewster32]

You probably want to create a move function which translates tile coordinates into world coordinates, like this:

function movePlayer(x, y) {  player.x += x * 32;  player.y += y * 32;}// usagemovePlayer(1, 0); // move player 1 tile rightmovePlayer(0, 1); // move player 1 tile downmovePlayer(-1, 0); // move player 1 tile leftmovePlayer(0, -2); // move player 2 tiles up

You could then easily expand this to support tweening:

function movePlayer(x, y) {  // Because we're adding 32 to the player's position, we need to prevent cases where the user tries to move  // the player mid-move, knocking it off the grid. This is a crude way to do it but it works.  if (player.isMoving) { return; }  player.isMoving = true;  // Tween the player to the next grid space over 250ms, and when done, allow the player to make another move  game.add.tween(player).to({x: player.x + x * 32, y: player.y + y * 32}, 250, Phaser.Easing.Quadratic.InOut, true).onComplete.add(function() { player.isMoving = false;}, this);}

A better way would be to store a gridPosition property on the player and multiply that by the size of the grid when you move:

player.gridPosition = new Phaser.Point(0, 0);function movePlayer(x, y) {  player.gridPosition.x += x;  player.gridPosition.y += y;  // doing it this way means the player's position will always be a multiple of 32  game.add.tween(player).to({x: player.gridPosition.x * 32, y: player.gridPosition.y * 32}, 250, Phaser.Easing.Quadratic.InOut, true);}

[drhayes]

I'm very interested in this too and I don't think lewster's method will work for me... If you set the position of a sprite directly then it doesn't interact with the collision system, correct?

 

Let me lay out what I'm looking for in a bit more detail.

 

I want smooth movement from tile to tile using the sprite's animation (say at around a velocity of 64 on a map with 24px square tiles). I want everything else that is moving to be moving independently; i.e. not rogue-like movement where everything moves at once, but all monsters moving around willy-nilly and the player may move too, but everything moves orthogonally on a grid, tile to tile.

 

My current method is to do something like this:

 

1. Player presses key.
2. Disable player movement input.
3. Start sprite moving in desired direction.
4. Check every frame to see if sprite has exceeded its destination position.
5. If it has, clamp it to its destination position and restore movement input.

 

I think I'm running into the same thing that Juan Anibal Micheli is running into. When I set the position explicitly during the update call the sprite "nudges" out a little bit, usually around 1.5 - 2 pixels going by its position.

 

Any ideas?

[lewster32]

To be specific, it's the separation part of Arcade physics which does not work unless the object is being moved by calculations from its velocity. The jerking you see when manually setting the position of an object with physics enabled is your movement commands and the velocity integration code fighting with one another to decide where the object will ultimately be on that frame. You can set body.moves = false on the object to stop Arcade physics trying to do this integration, but you will lose the separation from arcade.collide; the object will just go through other objects.

 

One idea I had when replying to the original poster was to have a physics simulation going on in the background using single pixel sized sprites, and use that to 'drive' the position of the full size objects; the problem with this is that it probably doesn't really fix anything due to the physics system using floats - and so you end up in the same situation with objects continually being off the grid.

 

I can't think of any other ways around this other than to hack the physics system a fair bit to get it to do what you want, or to go with tweens and write your own grid-based collision system; and I think the latter would be a lot easier.

[drhayes]

lewster32! Thanks, man, very helpful. Yes, separation is what I'm looking for... but oh well, I think this'll work.

 

Do you know if the quad tree gets updated with tween movement? If not, no big deal. I don't care about enemy-enemy collisions just player-enemy.

 

This all would be under Arcade physics, if it makes a difference.

[lewster32]

I've no idea if body.moves = false objects get updated in the QuadTree - you may have to try adding the following into your render function and see if this is the case:

 game.debug.quadTree(game.physics.arcade.quadTree);

[anaibol]

Hi, anyone knows if there is an update on Phaser to make possible that "tile based movement"?

[ForgeableSum]

Just used Phaser.Math.snapTo on each of the coordinates you are moving to:

http://phaser.io/docs/Phaser.Math.html/Phaser.Math.html#snapTo

 

Then sprites will stay on the tiles. 

[SkyzohKey]

On 17/4/2015 at 6:30 PM, feudalwars said:

Just used Phaser.Math.snapTo on each of the coordinates you are moving to:

http://phaser.io/docs/Phaser.Math.html/Phaser.Math.html#snapTo

 

Then sprites will stay on the tiles. 

Udpated link for reference: http://phaser.io/docs/2.4.7/Phaser.Math.html#snapTo