Mastering Pacman Map Movement: A Tutorial

In this tutorial, we will dive into the world of grid movement and explore how to create a Pacman-like experience in Phaser. By the end of this article, you'll have a solid understanding of how to smoothly move your player around a tilemap.

The player is controlled using the arrow keys, which may seem simple at first glance. However, it requires more than just basic keyboard input. The movement around the map presents an interesting challenge that we will tackle in this tutorial.

To begin with, let's take a look at how we handle collision detection against the tilemap. In our update function, we check for collisions using the following code:

`this.car, this.layer`

The car is positioned at the top-left of the map and starts moving down the grid. We have set collision to occur when the player object hits a tile with an ID of 20 - the dark grey brick tile.

Next, let's discuss how we create our objects in the `create` method:

`this.map = ('map')`

This JSON file is exported and loaded into our game along with the tileset. We've drawn a simple level using Tiled, which contains the layout of the level. To complete this tutorial, you'll need a player sprite and a tilemap.

If you're new to Phaser or have questions about certain aspects of the code, I recommend running and editing the Pacman code on jsbin or codepen and referencing the phaser-coding-tips git repo. Additionally, if you have any further questions, feel free to ask on our forum and always refer to the source code.

In this tutorial, we will cover the essential parts of the code needed to smoothly slide around a tilemap, turning on a dime, and create the full core of a Pacman game. We'll explore how to move around a grid smoothly like Pacman.

This week's tutorial is based on an often-requested feature on our forum: grid movement. By Richard Davey on 6th February 2015.

Pacman map