@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 :package:

``bash
npm install --save @pixi/tilemap
`

You can also use the browser bundle:

`

`

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:

`ts
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.

$3

* Basic Demo (WebGL)
* Basic Demo (WebGPU)

$3

`ts
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.

$3

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

More Tutorials

* Alan01252 Tutorial