Fail to see a TMX Map using SpriteKit and JSTileMap

Question

I am trying to visualize a large map using SpriteKit and JSTileMap. The size of the map is 3398 x 4842.

I have defined a TMX map by using 4 tiles of size 1699 x 2421 in one layer, with each tile matching a tileset.

Here is the tmx:

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="2" height="2" tilewidth="1699" tileheight="2421">
 <tileset firstgid="1" name="BL" tilewidth="1699" tileheight="2421">
  <image source="new_york_map_bl@2x.jpg" width="1699" height="2421"/>
 </tileset>
 <tileset firstgid="2" name="BR" tilewidth="1699" tileheight="2421">
  <image source="new_york_map_br@2x.jpg" width="1699" height="2421"/>
 </tileset>
 <tileset firstgid="3" name="TL" tilewidth="1699" tileheight="2421">
  <image source="new_york_map_tl@2x.jpg" width="1699" height="2421"/>
 </tileset>
 <tileset firstgid="4" name="TR" tilewidth="1699" tileheight="2421">
  <image source="new_york_map_tr@2x.jpg" width="1699" height="2421"/>
 </tileset>
 <layer name="Main Layer" width="2" height="2">
  <data encoding="base64" compression="zlib">
   eJxjZmBgYAFiRiBmAmIAAIAACw==
  </data>
 </layer>
</map>

While i am able to see the TMX map using the Tiled Software I can't visualize the map within xode with SpriteKit and JSTileMap. The loading part seems to be handled correctly but i can't visualize anything: I have a black screen with label: 0 nodes / 0 draws. Is there any possible lead of what could prevent from visualising my map properly?

how many nodes are drawn? It may be the same problem as cocos2d's tilemap renderer which is limited to 16,384 tiles altogether. Try the Kobold Kit tilemap renderer. — CodeSmile, Feb 04 '14 at 15:57
0 nodes actually - i just have 4 tiles to display: see my tmx file. Do you know if multiple tile sets attached to one layer are supported in JSTileMap or Kobold Kit — tiguero, Feb 04 '14 at 16:01
@LearnCocos2D this load fine with Kobold Kit. Is Kobold Kit supporting multiple layers though? I would need to load multiple map layer latter on — tiguero, Feb 04 '14 at 16:37
JSTileMap tries to render all tiles at once. With the size of your map this may be beyond spriteKit's capability. There is a fork that was done recently (that does not display all tiles) which can be found here: https://github.com/fattjake/JSTileMap. It's on my list of things to add to the main branch. Also if you open an issue on github and attach your TMX map I'd be happy to look at the map and see if I can determine the problem for you and fix JSTileMap as needed. — slycrel, Feb 05 '14 at 21:13

score 3 · Accepted Answer · answered Feb 07 '14 at 07:28

The problem is the @2x on your images. This indicates to SpriteKit that your image is working off of points, not pixels and loads your image as such. The TMX map format works in pixels, not points, and this throws off the expected math. You can verify this by putting a breakpoint in the setSourceImage: method and looking at the _imageSize variable -- it's cut in half when using the @2x suffix.

Remove the @2x from your images (both in your Xcode project and the TMX map XML) and you should be good to go.

Note that I had to clean once these changes were made to see them reflected in the iPhone simulator.

Fail to see a TMX Map using SpriteKit and JSTileMap

1 Answers1