Jump to content

Use multiple tileset images in one tilemap


Recommended Posts

Hello, I'm quite new to Phaser and so far it worked great but now I have the following problem:


I want to create a tilemap with multiple tilemapLayers. Some layers should use different tilesetImages, so I tried to use Tilemap.addTilesetImage() ("A single map may use multiple tilesets."). But when I put tiles to a layer it always uses the last added tilesetImage.


I haven't found any method to specify which layer should use what tilesetImage, so I tried to invoke addTilesetImage while the layer I want to add my image to is the currently selected in the tilemap.


The image A.png should be displayed on one layer and the image B.png on another (added them as attachment to this post).

var game = new Phaser.Game(500, 300, Phaser.AUTO, '', { preload: preload, create: create, update: update });function preload() {	// Load images of A and B, both 100x100	game.load.image('imageA', 'resources/data/A.png');	game.load.image('imageB', 'resources/data/B.png');}function create() {		// Create new tilemap	var tilemap = game.add.tilemap();		// Delete default layer 'layer' and create new one for A with the width and heigh of the game window	tilemap.create('defaultLayer', 5, 3, 100, 100);		// Check current layer	console.log(tilemap.layer.name); // "defaultLayer"		// Add image of A (hopefully to the current layer 'defaultLayer')	tilemap.addTilesetImage('aTileset', 'imageA', 100, 100);		// Create additional layer for B	tilemap.createBlankLayer('bLayer', 5, 3, 100, 100);		// Check current layer	console.log(tilemap.layer.name); // "bLayer"		// Add image of B (hopefully to the current layer 'bLayer')	tilemap.addTilesetImage('bTileset', 'imageB', 100, 100);		// Put tiles on the layers	tilemap.putTile(0, 1, 1, 'defaultLayer');	tilemap.putTile(0, 2, 2, 'bLayer');}function update() {	// Nothing to update}

The result is also added as attachment. The second addTilesetImage() seems to have overridden the previous tilesetImage. So when the tiles are put to the layers the image of B is used two times instead of using A for 'defaultLayer' and B for 'bLayer'.


Is there something wrong with the code or did I missunderstand the documentation and one tilemap can only use one tilesetImage?



Of course for this plain example one could merge the images of A and B into one image and access them as tiles as they are of the same size. But for my project I have to handle different sizes.


EDIT: nearly forgot, here the versions I'm using

Phaser v2.0.7

Pixi.js v1.6.1




Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...