Tilemap tearing (desktop targets)

  • Hello all,
    I've been working through the Discover HaxeFlixel book and ran across a particularly frustrating issue. On the Neko and Windows targets, the background tilemap tears in really nasty ways when the camera scrolls vertically, as you can see here: alt text

    I've dug around on GitHub but I didn't find any clear solutions. "FlxTileFrames.fromBitmapAddSpacesAndBorders" seems potentially useful but I don't know how to use it. What tricks are there to remedy tilemap tearing issues?

  • It's an issue with how renderer works. It uses tileset as a texture, so when it resolves texture coordinates for the tile, it can erroneously take the pixels of adjacent (as in tileset) tile.

    As a workaround, you can "stretch" the side pixels of every tile, so renderer always will take the right colors (in HaxeFlixel terms it's called bordering). See picture:

    Spacing is similar, but instead of using colors of a tile, it uses always fully transparent color between the tiles.

    There are functions in HaxeFlixel that help automate the process. FlxTileFrames.fromBitmapAddSpacesAndBorders is one of them (they are similar, just take different types of data as input, and give different types of data on the output).

    The configuration that proves itself best so far is that use create FlxPoint(0, 0) for spacing and FlxPoint(2, 2) for bordering.
    Then you invoke FlxTileFrames.fromBitmapAddSpacesAndBorders with those points and your original bitmap as arguments.
    It gives you FlxTileFrames object in return, that you just use as TileGraphic argument in any FlxTilemap.loadMap* function.


  • I fixed it! Thank you so much for the timely and comprehensive response! Much appreciated. :D

Log in to reply