Tiled Map rendering problem?

That is where you use the grid method. Since your tile map is 32px x 32px orthogonal grid, and your tiles are each 32px x 32px, you can tile them together in photoshop, or another editor, into 1 32px x 96px texture, each image side by side inside 1 larger image file, and Tiled will grid them out into 3 separate tiles for you, then you can use all 3 ‘tiles’ from the same texture. (This is a bit harder to pull off on an isometric based tileset, but possible, I have done it).

Just realize the math has to be exact on pixels for the grid to work correctly.

If you load this image into that TestMap file in Tiled as a tileset, you will see it breaks it up into 3 32x32 tiles you can use independently in the same layer.

RGB32x96

final note: this is the recommended route, as in your case, each texture is generating additional draw calls to the GPU, and if you have multiple layers with an uneven z-order, you can have a large amount of additional draw calls based on auto batch z-order rules. On a tile map, you generally want to try get the draw call to 1 (ie: 1 texture total).

When you start to add more and more, you want the tile map itself to be a small footprint. In my latest cocos2d game, I have several tiles in isometric, but the map itself only uses 1 draw call (the grid system and under-base area). Generally 600+ draw calls is where things can start to get a bit tough on mobile from experience. Once you get into 10,000+ nodes, it is important to get draw calls down in each piece of the scene.

1 Like

Thanks. I will get this in front of the team.

Thanks @tdebock
You’re right and I knew this solution, but i was trying to maintain each png separately. But I don’t have alternative if cocos not recognizes .tsx files.

You can still maintain each sprite individually… look into a texture-packing software like TexturePacker or Zwoptex etc, and pack the sprites with 0 extruding. Then that program’s file will contain references to the images so if you make any changes, you simply re-publish the sprite sheet output. With the accompanying plist file, you can also add the SpriteFrames to cocos2d-x SpriteFrameCache and use them as individual sprites inside the game as well.

1 Like