combineTilesets and combineTileFrames break with borders/spacing

[JoeCreates]

• Flixel version: Dev

When trying to merge tilesets and add the spacing/border to tiles, the tilemap does not render. See figure 1. Tilemap loads fine with the given code, but if you change the FlxPoint values to anything more than 0 it breaks. It seems that combineTilesets and combineTileFrames do not take into account the spacing, and so it seems there is no way to use merged tilesets and also have the border/spacing.

        tiledMap = new TiledMap(tiledLevel);

        var tileSize:FlxPoint = FlxPoint.get(tiledMap.tileWidth, tiledMap.tileHeight);

        // Load tileset graphics
        var tilesetBitmaps:Array<FlxTileFrames> = new Array<FlxTileFrames>();
        for (tileset in tiledMap.tilesetArray) {
            var imagePath = new Path(tileset.imageSource);
            var processedPath = TILESET_PATH + imagePath.file + "." + imagePath.ext;
            // Fig 1. CHANGING THE SPACING/BORDER HERE CAUSES TILEMAP TO BE BLANK
            tilesetBitmaps.push(FlxTileFrames.fromBitmapAddSpacesAndBorders(processedPath, tileSize, new FlxPoint(0, 0), new FlxPoint(0, 0)));
        }

        // Combine tilesets into single tileset
        var combinedTileset:FlxTileFrames = FlxTileFrames.combineTileFrames(tilesetBitmaps);
        tileSize.put();

@Beeblerox

[Beeblerox]

could you provide sample tilesets? and does your tilesets have the same spacing/border?

[JoeCreates]

For spacing and border I set both to 2, 2.

[starry-abyss]

Happens for me too (neko on Windows 7).
If I set spacing to 2, border to 0, the merged tileset is OK, but the spacing is removed (I see it with FlxG.bitmapLog.viewCache()). If I set border to 2 no matter what spacing is, the merget tileset is 0x0 (empty).
Both source tilesets are 512x512 and share spacing and border values.

[starry-abyss]

I have just written a naive workaround. It first merges the BitmapData vertically, and then applies spacing and border. But it only works if you have the same tileset size and until you reach texture height limit I suppose...

        var tileSize: FlxPoint = new FlxPoint(tileMap.tileWidth, tileMap.tileHeight);
        var tileSpacing: FlxPoint = new FlxPoint(2, 2);
        var tileBorder: FlxPoint = new FlxPoint(2, 2);

        var firstTileset = tileMap.tilesetArray[0];
        var mergedTilesetBitmap: BitmapData = new BitmapData(firstTileset.numCols * firstTileset.tileWidth,
            firstTileset.numRows * firstTileset.tileHeight * tileMap.tilesetArray.length, true);

        var tilesetNumber = 0;
        var copyPixelsPos = new Point();

        for (tileset in tileMap.tilesetArray)
        {
            var tilesetBitmap: BitmapData = LoadBitmap("assets/data/" + tileset.imageSource);
            copyPixelsPos.y = firstTileset.numRows * firstTileset.tileHeight * tilesetNumber;
            mergedTilesetBitmap.copyPixels(tilesetBitmap, tilesetBitmap.rect, copyPixelsPos);

            ++tilesetNumber;
        }

        var mergedTileset = FlxTileFrames.fromBitmapAddSpacesAndBorders(mergedTilesetBitmap, tileSize, tileSpacing, tileBorder);

[Beeblerox]

i've modified combineTileFrames method so it takes spacing and border arguments also.
So you don't need to use fromBitmapAddSpacesAndBorders method, and your code will look like this:

        tiledMap = new TiledMap(tiledLevel);

        var tileSize:FlxPoint = FlxPoint.get(tiledMap.tileWidth, tiledMap.tileHeight);
        var tileSpacing:FlxPoint = FlxPoint.get(2, 2);
        var tileBorders:FlxPoint = FlxPoint.get(2, 2);

        // Load tileset graphics
        var tilesetBitmaps:Array<FlxTileFrames> = new Array<FlxTileFrames>();
        for (tileset in tiledMap.tilesetArray) {
            var imagePath = new Path(tileset.imageSource);
            var processedPath = TILESET_PATH + imagePath.file + "." + imagePath.ext;
            tilesetBitmaps.push(FlxTileFrames.fromRectangle(processedPath, tileSize);
        }

        // Combine tilesets into single tileset
        var combinedTileset:FlxTileFrames = FlxTileFrames.combineTileFrames(tilesetBitmaps, tileSpacing, tileBorders);
        tileSize.put();
        tileSpacing.put();
        tileBorders.put();       

[JoeCreates]

Works great, thanks!

[starry-abyss]

Yes, it seems to work neat, thanks!