cocos2d-iphonetilekobold2d

kobold2d tilemap black gaps between tiles


I am doing a standard kobold2d tilemap game, which I am trying to start with loading a tile map from the tiledmap editor, a .tmx file

the standard code is very simple:

-(id) init
    {
        self = [super init];
        if (self)
        {
            // add init code here (note: self.parent is still nil here!)
            CCTMXTiledMap *tiledMap = [CCTMXTiledMap   tiledMapWithTMXFile:@"background.tmx"];
            [self addChild:tiledMap z:-1];
            tiledMap.position = CGPointMake(-500, -300);

            for( CCTMXLayer* child in [tiledMap children] ) {
                [[child texture] setAntiAliasTexParameters];
            }


            // uncomment if you want the update method to be executed every frame
            //[self scheduleUpdate];
        }
        return self;
    }

with my tilemap is a 40x35 tile with each tile is :64x64 pixel.

However, I got the following result which looks like there is a black line between each line of the layer:

broken black line between lines

which my tilemap looks like:

enter image description here


Solution

  • Pretty standard tilemap issue in cocos2d.

    The quick fix is called "fix artifacts by stretching texels" in ccConfig.h but it's a hack-ish workaround with aliasing side-effects, particularly visible when scrolling slowly or zooming.

    The actual fix requires to set all positions of the tmx node, its parent and all grandparents to exact pixel positions. On a non-Retina device this means casting the x/y coordinates to int, on a Retina device it means rounding to the next-nearest 0.5 coordinate (ie 10.3 becomes 10.5, 10.8 becomes 11.0).

    PS: The KoboldTouch and Kobold Kit (Sprite Kit) tilemap renderers don't have this black line artifacts issue.