Classic 2D top-down RPGs often come with a movement that is grid-based. That means that your player can either walk a whole tile in the grid or not walk at all. It is not possible by design to walk part of a tile. Imagine a chessboard. A chess piece can only be on one field at a time. This article shows how you can implement such a movement with Phaser 3 and TypeScript.

Pixel Position vs. Tile Position

The Phaser arcade physics engine already provides everything we need to implement a 2D movement that is pixel based. However, we wish that the player is only able to move whole tile distances. In our example this will be multiples of 48 pixels. Therefore it will always be clear on which tile of the map the player is positioned and which are the neighbouring tiles. This allows us to logically see the coordinates of game items in a tile grid coordinate system. So instead of saying “the player is currently located at position x = 159 pixels and y = 252 pixels” we can simply say “the player is currently located at position x = 3 and y = 4” meaning the third tile from the left and the fourth tile from the top. We will call the first pixel position and the second tile position.

How do we achieve this? Well, the high level algorithm is quite simple. However, the details get a little more involved.

Movement happens on a grid with a predefined tile size. Once a movement is started, the player will move 1 tile in an animation. Further movement is blocked while there is still a movement in process.

#typescript #game-development #phaserjs #phaser-3 #javascript