Phaser3 plugin for grid based movement on a 2D game board.

Usage no npm install needed!

<script type="module">
  import phaserGridMovementPlugin from '';


Welcome to the Grid Movement plugin! This Phaser 3 plugin adds grid-based movement to your tilemap game. Your characters will be able to only move in whole tile sizes, locked to the x-y grid!

This plugin is also compatible (and written in) TypeScript; enjoy full type support!


  • Grid-based movement, of course!
  • Tile-based collision detection
  • One-way collision detection
  • Support for multiple characters
  • Pathfinding (for both NPCs and the player)
  • Random movement (can also limit to a radius)
  • Following other characters
  • Isometric maps (Beta)

📖 Our most current documentation is here! ➡️ You can try/download a list of examples at this link here.


Installing the Grid Movement plugin is simple.


npm i --save phaser-grid-movement-plugin


<!-- Download the .zip and copy GridMovementPlugin.min.js from dist/ -->
<script src="GridMovementPlugin.min.js"></script>

Then, inside your Phaser game config...

const gameConfig = {
  // ...

  plugins: {
    scene: [
        key: "gridMovementPlugin",
        plugin: GridMovementPlugin,
        mapping: "gridMovementPlugin",

  // ...

const game = new Phaser.Game(gameConfig);

Now you're all set to start using Grid Movement in your scenes!

function create() {
  // ...

  const gridMovementConfig = {
    characters: [
        id: "player",
        sprite: playerSprite,
        walkingAnimationMapping: 6,

  this.gridMovementPlugin.create(tilemap, gridMovementConfig);

  // ...

Example GIFs