pixi-tilemap

Library that helps with tilemaps, provide special shaders and canvas fallback. Works with pixi >= 5.0.4

Type of builds (Important!)

Beware, we've changed the filename of good old ES5 build, according to pixi-build-tools rollup config!

CommonJS build is located in dist/pixi-tilemap.js.

ESM is specified in package.json.

Multi-texture Configuration (Important!) 📄

Please specify how many base textures do you want to use. That's the default:

PIXI.tilemap.Constant.maxTextures = 4;

That means, if you use 5th baseTexture, compositeRectTileLayer will move it to second RectTileLayer and all tiles of that texture will go on different Z level!

Specify bigger maxTextures if you want everything to be on the same Z.

PIXI.tilemap.Constant.maxTextures = 16;

Not every device does have 16 texture locations, so, its possible to fit 4 textures of 1024 into 1 of 2048, that's why boundCountPerBuffer exists. In that case, if you render the tilemap with other textures, textures will be re-uploaded - that can slow down things due to extra subTexImage2D in frame.

This is old RpgMakerMV-compatible setting:

PIXI.tilemap.Constant.boundCountPerBuffer = 4;
PIXI.tilemap.Constant.maxTextures = 4;

Or you can just set maxTextures to 16 and forget about old devices and texImage2D slowdown.

There's also a limitation on 16k tiles per one tilemap. If you want to lift it, please use pixi v5.1.0 and following setting:

PIXI.tilemap.Constant.use32bitIndex = true;

For RPGMaker MV please use v4 branch for pixi V4, npm version is 1.2.6

Please use v3 branch for pixi V3.

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

RPGMaker demo

webgl: zoomin and zoomout

retina webgl: zoomin and zoomout

canvas

Basic demo 🖊️

webgl

var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);

var loader = new PIXI.loaders.Loader();
loader.add('atlas', 'basic/atlas.json');
loader.load(function(loader, resources) {
	var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [resources['atlas_image'].texture]);
    var size = 32;
    // bah, im too lazy, i just want to specify filenames from atlas
    for (var i=0;i<7;i++)
        for (var j=0;j<7;j++) {
            tilemap.addFrame("grass.png", i*size, j*size);
            if (i%2==1 && j%2==1)
                tilemap.addFrame("tough.png", i*size, j*size);
        }

    // if you are lawful citizen, please use textures from the loader
    var textures = resources.atlas.textures;
    tilemap.addFrame(textures["brick.png"], 2*size, 2*size);
    tilemap.addFrame(textures["brick_wall.png"], 2*size, 3*size);

    renderer.render(tilemap);
});

More tutorials 🔗

Alan01252 tutorial