I am working on a Libgdx game which loads Tiled maps. The current map I am working on makes use of two tilesets, one for shadow/light and another for terrain and buildings. The general process I do, that has been working fine, is that I receive the sprite sheet from the artist, design the maps, then take the spritesheet file and split it using ImageMagick. From there I take the split images and create an optimized png and atlas file with TexturePacker.

However, this is the first map I have made that makes use of multiple tilesets. The issue I am having is when loading the map with AtlasTmxMapLoader it relies on a single atlas file property in the map. I tried to merge my 2 images into a single atlas/texture (keeping the same names/indexes) but it only seems to render by first tileset tiles.

Perhaps I am missing something simple. What is the correct way to handle multiple tilesets (how exactly should my atlas file be setup)?

So after reading more into how .tmx files are read I was able to fix my problem.

Here is how to properly do it when working with multiple tilesets and re-packing your spritesheets in TexturePacker. First, cut up the tileset images using a utility like ImageMagick and make sure they are indexed (specified by an underscore and number in the filename). You can do this with the crop command in ImageMagick like so:

convert.exe "shrine_tileset.png" -crop 16x16 "shrine_tileset_%02d.png"

Second, re-pack all tiles from all tilesets into a single atlas in TexturePacker. If it works correctly you will see the name of each tileset in the atlas file with an associated index based on the tile id. For example:

 shrine_tileset
rotate: false
xy: 382, 122
size: 16, 16
orig: 16, 16
offset: 0, 0
index: 703


Finally (and this is the part I could not figure out), make sure each tileset's tile indexes start from the "firstgid" value in the .tmx file. For example, my second tilesheet starts from 2049, as their are 2048 tiles in the first sheet. This should be denoted at the top of the .tmx file for each tileset.

<tileset firstgid="2049" source="shadow_light.tsx"/>


So when cutting up the tiles for my tileset "shadow_light", I would start them from index 2048, one less than the gid, EX: "shadow_light_2048.png".

Hopefully this helps someone!