Grider is a Block Editor based on Phaser.JS specifically designed for drawing TableTop Dungeon Maps.
This is what you can accomplish with Grider:
As easy as:
Using NPM:
npm install @renatodex/grider --save-dev
Using Yarn:
yarn add @renatodex/grider --save
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:
At Grider, you can use the usefull Drawer class to draw Blocks on the Grid. I will list the available methods here:
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',
})
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)
})
As i said, each block on the screen is a normal Phaser.Rectangle
, but with extra methods.
Here, i list the extra methods:
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:
- bgColor
- strokeColor
- strokeSize
- strokeAlpha
- defaultDepth
Currently, it's not possible to load Sprite Images at the Grid, but I will work on that when i have time.
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:
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')
})
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')
})
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')
})
Currently, the Grider Editor only allow you to do the following commands:
Draw a Black Block
-> ShortcutP
Erase a Block
-> ShortcutE
Change Color
-> ShortcutC
Reset Color
-> ShortcutX
Enable Border Cover Mode
-> Shortcut+
Disable Border Cover Mode
-> Shortcut-
Yes, it's still very simple, but I will update it and add some new fancy tools!
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.
E-mail me at renatodex@gmail.com with a suggestion, or yet better, clone it and open your Pull Request!
- Clone the repository locally
- Run
npx webpack
to compile the Development version, for tests and stuff. - Run
yarn run build
to compile webpack for Production.