/tilemap

Rectangular tilemap implementation for PixiJS

Primary LanguageTypeScriptMIT LicenseMIT

@pixi/tilemap - PixiJS Tilemap Kit

Automation CI

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

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

More Tutorials