Library that helps with tilemaps, provide special shaders and canvas fallback. Works only with pixi > 4.2.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.
If that limitation is affecting you somehow, for example if you change texture set too often, please do the following before the creation of renderer, it works only since 1.2.6:
PIXI.tilemap.Constant.boundCountPerBuffer = 1;
PIXI.tilemap.Constant.maxTextures = 16;Please use v3 branch for pixi V3.
Rpgmaker MV - check.
TODO: Tiled, gameofbombs - in progress.
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);
});