# phaser-grid-movement-plugin

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

Latest version **1.11.0** (published 2021-03-27) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install phaser-grid-movement-plugin
pnpm add phaser-grid-movement-plugin
yarn add phaser-grid-movement-plugin
bun add phaser-grid-movement-plugin
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.11.0 |
| Published | 2021-03-27 |
| First published | 2020-12-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Johannes Baum |
| Maintainers | annoraaq |
| Keywords | Phaser, RPG, 2D, Movement, Grid, Tile |

## Links

- npm: https://www.npmjs.com/package/phaser-grid-movement-plugin
- Repository: https://github.com/Annoraaq/phaser-grid-movement-plugin
- Homepage: https://github.com/Annoraaq/phaser-grid-movement-plugin#readme
- Issues: https://github.com/Annoraaq/phaser-grid-movement-plugin/issues
- npm.io page: https://npm.io/package/phaser-grid-movement-plugin

## Dependencies (3)

- [rxjs](https://npm.io/package/rxjs.md) ^6.6.3
- [phaser](https://npm.io/package/phaser.md) ^3.52.0
- [esbuild](https://npm.io/package/esbuild.md) ^0.9.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.11.0 (latest) — 2021-03-27
- 1.10.0 — 2021-03-18
- 1.9.0 — 2021-03-14
- 1.8.0 — 2021-03-12
- 1.7.0 — 2021-03-09
- 1.6.0 — 2021-03-05
- 1.5.0 — 2021-02-27
- 1.4.0 — 2021-02-10
- 1.3.0 — 2021-02-01
- 1.2.2 — 2021-01-20
- 1.2.1 — 2021-01-18
- 1.2.0 — 2021-01-17
- 1.1.2 — 2020-12-12
- 1.1.1 — 2020-12-12
- 1.1.0 — 2020-12-12
- … 7 more at https://npm.io/package/phaser-grid-movement-plugin/versions

## README

<p align="center">
    <img src="https://img.shields.io/github/v/release/Annoraaq/phaser-grid-movement-plugin?style=for-the-badge&color=brightgreen">
    <img src="https://img.shields.io/github/stars/Annoraaq/phaser-grid-movement-plugin?style=for-the-badge&color=yellow">
    <img src="https://img.shields.io/badge/made%20with-TypeScript-blue?style=for-the-badge">
</p>

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!

<p align="center">
    <img src="https://github.com/Annoraaq/phaser-grid-movement-plugin/blob/master/images/features-label.png" alt="Features" />
</p>

- 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](https://github.com/Annoraaq/phaser-grid-movement-plugin/wiki)!
➡️ You can try/download a list of examples [at this link here](https://annoraaq.github.io/phaser-grid-movement-plugin/examples/).

<p align="center">
    <img src="https://github.com/Annoraaq/phaser-grid-movement-plugin/blob/master/images/installation-label.png" alt="Installation" />
</p>

Installing the Grid Movement plugin is simple.

### NPM

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

### Web

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

Then, inside your Phaser game config...

```javascript
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!

```javascript
function create() {
  // ...

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

  this.gridMovementPlugin.create(tilemap, gridMovementConfig);

  // ...
}
```

<p align="center">
    <img src="https://github.com/Annoraaq/phaser-grid-movement-plugin/blob/master/images/gifs-label.png" alt="Example GIFs" />
</p>
<p align="center">
    <img src="https://github.com/Annoraaq/phaser-grid-movement-plugin/raw/master/images/movement.gif" />
</p>

<p align="center">
    <img src="https://github.com/Annoraaq/phaser-grid-movement-plugin/raw/master/images/radius-movement.gif" />
</p>

---
_Source: https://npm.io/package/phaser-grid-movement-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._