@tialops/maki

A lightweight toolkit for building Phaser-based tilemap games with a simple CLI, built-in player helpers, map loading, collision support, and an integrated tilemap editor.

Full tutotial

Here: https://tial-ops.github.io/maki_tuto/

Features

• Create a new game project from the command line
• Run a local development server
• Load maps and assets with the Maki manager
• Add movable players with simple helpers
• Create collision layers for walls and objects
• Build and export maps with the integrated tilemap editor
• Switch between scenes using standard Phaser scene controls

Installation

npm install @tialops/maki

Quick start

Create a new game:

maki new game
cd game
maki dev

This creates a starter project with assets, scenes, configuration, and a playable default map.

Project structure

game/
├─ assets/
├─ scenes/
├─ game.js
├─ index.html
├─ maki.config.js
├─ README.md
└─ vite.config.js

Key files

• assets/ contains game assets and exported maps.
• scenes/ contains your game scenes.
• game.js starts the game.
• maki.config.js contains Maki configuration.
• vite.config.js configures the development server.

Basic scene example

import { Scene, manager } from '@tialops/maki'

export default class GameScene extends Scene {
  constructor() {
    super('GameScene')
  }

  preload() {
    super.preload()

    this.lia = this.maki.player('lia')
    manager.map(this, 'default_map')
    manager.preload(this)
  }

  create() {
    super.create()
    manager.create(this)

    this.lia.sprite.setPosition(400, 400)

    this.physics.add.collider(
      this.lia.sprite,
      manager.getWallGroup(this, 'default_map')
    )
  }

  update() {
    this.maki.move(this.lia)
  }
}

Creating a custom tilemap

maki tilemap

Prompts you for:

| Prompt | Notes | |--------|-------| | Tile size | 8 / 16 / 32 / 64 px or custom | | Map name | saved as assets/maps/<name>.json | | Load existing? | reloads a previously saved map to edit | | Map width (tiles) | defaults to canvas width ÷ tile size | | Map height (tiles) | defaults to canvas height ÷ tile size |

Canvas size is read from maki.config.js so the default dimensions always match your game. The editor opens in your browser — paint tiles, mark collision areas, then click Export.

Loading a custom map

Use the exported map name with manager.map:

manager.map(this, 'new-tile')

Then preload and create it:

manager.preload(this)
manager.create(this)

Scene switching example

this.input.keyboard.on('keydown-T', () => {
  this.scene.stop('GameScene')
  this.scene.start('NewScene')
})

Development options

Enable debug mode in maki.config.js to view collision areas while developing:

export default {
  debug: true
}

CLI commands

maki new game      # Create a new game project
maki dev           # Start the development server
maki tilemap       # Open the tilemap editor

Requirements

• Node.js
• npm
• A browser for running the local game

License

MIT