What is Grider?

Grider is a Block Editor based on Phaser.JS specifically designed for drawing TableTop Dungeon Maps.

This is what you can accomplish with Grider:

Instalation

As easy as:

Using NPM:

npm install @renatodex/grider --save-dev

Using Yarn:

yarn add @renatodex/grider --save

Usage

You can find examples of usage in the example/ folder, but I will give you a basic example:

<!DOCTYPE html>
<html>
<head>
  <script src="../dist/grider-var.js"></script>
</head>
<body>
  <div class="app"></div>

  <script>
  const grider = new Grider.Main()
  const { Game, Emitter } = grider.AppInitializer({
    canvasElement: '.app',
    canvasWidth: 400,
    canvasHeight: 300,
    gridSize: 20,
  })
  </script>

</body>
</html>

This will render a very simple Canvas element inside the div.app element:

Documentation

1. Drawer Class

At Grider, you can use the usefull Drawer class to draw Blocks on the Grid. I will list the available methods here:

1.1. drawAt(options = {})

This method allow you to specifiy several options to draw a grid on the screen, you can pass the position [x, y], as well several other options to customize the appearance of your block.

Each block drawn on the screen with the drawAt method returns a normal Phaser Rectangle, but with some extra capabilities. This is how you draw a block:

let drawer = grider.Drawer()
let myBlock = drawer.drawAt({
  position: [1, 2],
  bgColor: '0xff0000',
  strokeColor: '0xff0000',
})

1.2. exportToBase64()

This allow you to export a screenshot of what’s happening on your Canvas to whatever you want. The result is returned as a data/image:base64, and you can add it to the page using dom, or send it to your Backend system. Oh, and this method returns a Promise!

let drawer = grider.Drawer()
drawer.exportToBase64().then((dataimage64) => {
  console.log(dataimage64)
})

2. Grider Rectangle

As i said, each block on the screen is a normal Phaser.Rectangle, but with extra methods. Here, i list the extra methods:

2.1. setPositionAtGrid (x, y)

myBlock.setPositionAtGrid(0,0)

This will use your current Grid setup to properly position your block on the correct grid square. You don’t need to pass the grid size or anything, everything is already stored in your Grider instance.

You can customize a few options:

Currently, it’s not possible to load Sprite Images at the Grid, but I will work on that when i have time.

3. Emitter (Events)

The Emitter class allows you to listen to a few actions happening on Grider.

const { Game, Emitter } = grider.AppInitializer({
  canvasElement: '.app',
  canvasWidth: 400,
  canvasHeight: 300,
  gridSize: 20,
})

You can obtain the Emitter class as a response from the AppInitializer call. Once you have the Emitter class, you can start listening to the events:

3.1. scene/ready

Triggered when the scene loads. If you want to Paint blocks programatically at the Grid, every code should be inside the scene/ready method. It’s the only way to guarantee that you have all the things in place.

Emitter.on('scene/ready', () => {
  console.log('Scene is ready')
})

3.2. paint/block

Triggered when a block is painted. It’s simple like that. If the user try to paint a block in a position of the grid that already has a block, the event will not trigger.

Emitter.on('paint/block', () => {
  console.log('Block was painted')
})

3.3. erase/block

Triggered when a block is erased. It’s simple like that. If the user try to erase a block in a position of the grid that don’t have a block painted, the event will not trigger.

Emitter.on('erase/block', () => {
  console.log('Block was erased')
})

Commands & Tools

Currently, the Grider Editor only allow you to do the following commands:

Yes, it’s still very simple, but I will update it and add some new fancy tools!

Colors and Meanings

Grider was built with a mindset of creating a Standard template for Dungeon maps. You will have a limited set of Colors when working with Grider, but this is something you can totally customize.

These are the colors and what they mean.

Contribute

E-mail me at renatodex@gmail.com with a suggestion, or yet better, clone it and open your Pull Request!

Test & Build

  1. Clone the repository locally
  2. Run npx webpack to compile the Development version, for tests and stuff.
  3. Run yarn run build to compile webpack for Production.