2

Since JSTileMap extends SKNode, you can use the API to move and animate your tilemap like any other node. However, I keep getting this weird effect/glitch...

Code:

_tiledMap = [JSTileMap mapNamed:@"Cloud.tmx"];
if (_tiledMap) {
    [self addChild:_tiledMap];
}
_tiledMap.position = CGPointMake(800, 0);

SKAction *scrollLeft = [SKAction moveTo:CGPointMake(600, 0) duration:4];
SKAction *scrollRight = [SKAction moveTo:CGPointMake(700, 0) duration:4];
SKAction *sequence = [SKAction sequence:@[scrollLeft, scrollRight]];
SKAction *repeat   = [SKAction repeatActionForever:sequence];
[_tiledMap runAction:repeat];

Results:

enter image description here

enter image description here

As you can see, whenever the JSTileMap changes direction, depending if its left or right, the image gets cropped or something, I can't explain it. This doesn't happen if the node itself is a SKSpriteNode. I added numbers to the background image for visual reference.

EDIT

Further tests reveal that moving the JSTileMap's position manually (_tiledMap.position.x = x+1) in the update loop, has the same effect. It crops the image/tile when it animates left, and returns to normal when it animates to the right.

JRam13
  • 1,132
  • 1
  • 15
  • 25
  • Don't move the map but instead move the visible view over the map. – sangony Jul 31 '14 at 19:51
  • Have you tried adding the JSTileMap to an SKNode and moving the SKNode instead? – 0x141E Jul 31 '14 at 20:16
  • @Code Monkey, I have tried adding the JSTileMap as a child of an SKSpriteNode and moving that instead, same results. Sangony, Please clarify. – JRam13 Jul 31 '14 at 20:22
  • If you place the JSTileMap with _tiledMap.position = CGPoint(x,y) to the region where you have the issue (without using SKAction), does it render correctly? – 0x141E Jul 31 '14 at 20:33
  • I ran some tests. It appears the same thing happens if I manually change the _tilemap.position (i.g. _tiledMap.position = CGPointMake(_tiledMap.position.x+1.0, 0 on every update loop). The region, or position where the glitch happens is arbitrary, it happens anywhere on the screen where the tile is being animated. Note, however, that it only crops the image when animating to the left. When I animate the image to the right, it goes back to normal. – JRam13 Jul 31 '14 at 20:52

2 Answers2

1

I found a work-around. Apparently the problem is that the first tileset column itself is being cropped for some reason (if anyone figures this out please let me know). So the solution is to create a tilemap that is 2 tile units wider than what your original tilemap dimension is. For example, if your tiles are set to 32x32 (tilemap of 1024x768), you should generate a tilemap of 1088x768 instead and start drawing after the first column.

See image below.

enter image description here

JRam13
  • 1,132
  • 1
  • 15
  • 25
  • What exactly is JSTileMap and can you implement something similar using built-in sprite kit features? – 0x141E Aug 01 '14 at 06:47
  • @Code Monkey, JSTileMap allows you to use tile map editors (I'm using Tiled) in sprite-kit. If you're not familiar with tile map editors, they allow you to create map layouts for your game - so instead of using a huge image for your background, it breaks up the entire map into tiles (i.g. 32x32 tiles). Sprite-kit (JSTileMap) then loads only the visible tiles from the tilemap, making memory management a lot better. I am not aware of anything similar native to sprite-kit, please explain. – JRam13 Aug 01 '14 at 14:07
  • 1
    @JonnyRamos can you submit an example project as an issue on github? I'd like to take a further look and see if I can fix the problem. (https://github.com/slycrel/JSTileMap/issues) – slycrel Aug 02 '14 at 20:08
  • Downvote because the tip seems to be obsolete after the update (see OP's other answer) – ctietze Aug 08 '15 at 21:33
  • im using xcode tilemap editor in spritekit 3 and for no reason when my character is moving left it's animation kinda glitchy. I tried to empty one line of tiles from top, down, left, right as like in this answer and glitch is gone. +1 – EFE Jun 30 '17 at 14:21
1

It seems I was using an old/unmaintained version of JSTileMap. Slycrel's version of JSTileMap addresses this issue.

https://github.com/slycrel/JSTileMap

JRam13
  • 1,132
  • 1
  • 15
  • 25