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="[email protected]" width="1699" height="2421"/>
</tileset>
<tileset firstgid="2" name="BR" tilewidth="1699" tileheight="2421">
<image source="[email protected]" width="1699" height="2421"/>
</tileset>
<tileset firstgid="3" name="TL" tilewidth="1699" tileheight="2421">
<image source="[email protected]" width="1699" height="2421"/>
</tileset>
<tileset firstgid="4" name="TR" tilewidth="1699" tileheight="2421">
<image source="[email protected]" 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?
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.