How to move like Pacman Tutorial

I started learnning about tilemaps by writing Pacman. I found a great tutorial called “How to move like Pacman Tutorial” by Richard Davey posted originally on 6 February 2015, but found it was written in Phaser 2. I converted the example into Phaser 3 and learned a lot in the process. However, I did end up spending a fair bit of time. If anyone else is thinking about doing the same they you may like to look at my code, at the below Codepen.

For those more experienced than I advice on the following would be appreciated:

  1. In the original code, the following lines are used to create the pills:
, this.safetile, 'dot', this.layer, this.dots);
         this.dots.setAll('x', 6, false, false, 1);
         this.dots.setAll('y', 6, false, false, 1);

My version of the code is much more verbose. I wonder if there is a more elegant way of doing this.

  1. The original code uses Phaser’s built in direction constants such as Phaser.RIGHT, Phaser.LEFT etc. These constants appear to exist in Phaser 3 but I could not get them to work as is. Is it perhaps because the numbers assigned to these constants have changed between Phaser 2 and 3?

  2. The original code uses the following to recreate the pills (I think) when they are all eaten. Is there a Phaser 3 equivalent that is as concise?


If anybody finds my conversion useful, that would be grateful. Any advice on the above to me would be gratefully received!


Good work on this. :slight_smile:

  1. One way is

    Phaser.Actions.IncXY(dotsArray, 6, 6);
  2. The problem may be because of the this.opposites array. Changing it to a plain object might solve it.

  3. I think there’s no real equivalent for this in Phaser 3.

1 Like