Pixi Tilemap Plugin
Fast tilemap rendering with PIXI.js V5. Compatible with module bundlers.
This plugin uploads all tiles indices of a layer in a single geometry therefore making only 1 draw call per layer. It also supports linear-time tiles animations.
Usage
This plugin only works for PIXI v5+.
Using this plugin is pretty simple :
; // Add the pluginRenderer; // ... // Creates a tileset from a texture specifying tile size// Texture must be loaded for this to properly workconst tileset = texture tileSize: 16 ;// Add each layer to the stage using their array of tiles indicesstage;
The layer indices array layout follows Tiled's CSV format which is pretty common for storing tilemaps data.
See full working demo in demo/
.
Limitations
This plugin is build for performance, as a result it comes with limits :
- Currently you can use one texture per layer (see improvements)
- Tilemaps can't have children
- Individual tile transforms (e.g. rotation) are not supported
- Filters are not supported (although you can use a parent container)
Improvements
There's no timeline but I'll eventualy add the following features to this plugin :
- Non square tiles (this is already implemented at shader level)
- Composite layers (single geometry for multiple layers)
- Multiple textures for a single layer
- Isometric support ?
Alternative
You may look at pixi-tilemap for pixi v4 that supports textures atlases & other stuff compared to this library.