Library that helps with tilemaps, provide special shaders and canvas fallback. Works with pixi >= 5.0.4
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.
retina webgl: zoomin and zoomout
<script src="https://github.com/pixijs/pixi-tilemap/blob/master/src/pixi-tilemap.js"></script>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);
});