Skip to content
Library that will help with tilemaps, provide special shaders and canvas fallback. Rpgmaker support - check. Tiled, gameofbombs - in progress.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
basic move js file Jan 3, 2016
css initial commit Nov 4, 2015
demo
dist new build Jun 16, 2019
lib latest pixi for demos Jul 17, 2018
rpgmaker initial commit Nov 4, 2015
scripts work in progress Jun 16, 2019
src readme stuff Jun 16, 2019
test easier checkpack Jul 17, 2018
.editorconfig better editorconfig Jun 18, 2019
.gitignore support webpack Jul 17, 2018
.travis.yml new build Jul 17, 2018
LICENSE Initial commit Nov 4, 2015
README.md new version Jun 16, 2019
basic.html readme stuff Jun 16, 2019
index.html readme stuff Jun 16, 2019
package-lock.json new build Jul 17, 2018
package.json new version Jun 16, 2019
tsconfig.json work in progress Jun 16, 2019

README.md

pixi-tilemap

Build Status

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.

RPGMaker demo

webgl: zoomin and zoomout

retina webgl: zoomin and zoomout

canvas

Basic demo

webgl

<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);
});

More tutorials

Alan01252 tutorial

You can’t perform that action at this time.