Library that helps with tilemaps, provide special shaders and canvas fallback. Works with pixi >= 5.0.4
It has some strict limitations connected to its RPGMV legacy: it uses only up to 16 textures of size 1024x1024, and combines them into 4 render textures of 2k size.
When you render the tilemap with other textures, textures will be re-uploaded.
Please specify how many base textures do you want to use. That's the default:
PIXI.tilemap.Constant.maxTextures = 4;For compatibility with very old devices, if you want to use multi texture, use this settings, the same as in pixi-tilemap v4:
PIXI.tilemap.Constant.boundCountPerBuffer = 4;
PIXI.tilemap.Constant.maxTextures = 4;There's 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);
});