Scrolling a Tilemap in Sprite-Kit (JSTileMap glitch)

Question

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:

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.

Answer 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

Answer 2

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.