@pixi/tilemap - PixiJS Tilemap Kit

This package provides a low-level rectangular tilemap implementation, optimized for high performance rendering and a out-of-the-box canvas fallback.

Version Compatiblity

PixiJS	PixiJS Tilemap Kit
v4.x	v1.x
v5.x	v2.x
v6.x	v3.x
v7.x	v4.x
v8.x	v5.x

Installation 📦

npm install --save @pixi/tilemap

You can also use the browser bundle:

<script src="https://cdn.jsdelivr.net/npm/@pixi/tilemap@latest/dist/pixi-tilemap.js"></script>

Usage

In short, the tilemap you create will render each tile texture at the provided position and dimensions. Generally, a spritesheet is used to load the tileset assets:

import { Assets } from 'pixi.js';
import { CompositeTilemap } from '@pixi/tilemap';

Assets.add('atlas', 'atlas.json');
Assets.load(['atlas']).then(() =>
{
    const tilemap = new CompositeTilemap();

    // Render your first tile at (0, 0)!
    tilemap.tile('grass.png', 0, 0);
});

CompositeTilemap is actually a lazy composite of layered Tilemap instances. A Tilemap has a fixed number of tile textures (the tileset) it can render in one go. Usually, CompositeTilemap abstracts away this limitation in a robust enough manner.

Demos

• Basic Demo (WebGL)
• Basic Demo (WebGPU)

Settings

import { settings } from '@pixi/tilemap';

Setting	Description
TEXTURES_PER_TILEMAP	Temporarily switched off
TEXTILE_UNITS	Temporarily switched off
use32bitIndex	There's also a limitation on 16k tiles per one tilemap. If you want to lift it, please use PixiJS v5.1.0 and following setting settings.use32bitIndex = true;

RPGMaker

Canvas fallback is 5x slower than vanilla rpgmaker. WebGL version is faster and doesnt use extra textures.

RPGMaker Demo

• WebGL Demo
  • 60% Scale
  • 140% Scale
• WebGL Retina Demo
  • 60% Scale
  • 140% Scale
• WebGPU Demo

More Tutorials

• Alan01252 Tutorial