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

  • Hi, i have the same problem in the same book, can tou tell me how you solved it. Thanks

  •         var tiledMap = new TiledMap("assets/data/" + level + ".tmx");
    	var tileSize: FlxPoint = FlxPoint.get(tiledMap.tileWidth, tiledMap.tileHeight);
    	var tilesetTileFrames: Array<FlxTileFrames> = new Array<FlxTileFrames>();
    	for (tileset in tiledMap.tilesetArray){
    			tilesetTileFrames.push(FlxTileFrames.fromRectangle(AssetPaths.tiles__png, tileSize));
    	var tileSpacing: FlxPoint = FlxPoint.get(0, 0);
    	var tileBorder: FlxPoint = FlxPoint.get(2, 2);
    	var mergedTileset:FlxTileFrames = FlxTileFrames.combineTileFrames(tilesetTileFrames, tileSpacing, tileBorder);
    	var mainLayer:TiledTileLayer = cast tiledMap.getLayer("main");
    	state.map = new FlxTilemapExt();
    		16, 16, 1);

    This is how i fixed it ! Thx for all the link !

Log in to reply

Looks like your connection to HaxeFlixel was lost, please wait while we try to reconnect.