feat: Adding configurable padding to Tiled atlas packing

packages/flame_tiled/lib/src/renderable_tile_map.dart

@@ -216,6 +216,8 @@ class RenderableTiledMap {
  bool Function(Tileset)? tsxPackingFilter,
  bool useAtlas = true,
  Paint Function(double opacity)? layerPaintFactory,
+ double atlasPackingSpacingX = 0,
+ double atlasPackingSpacingY = 0,
  }) async {
  final contents =
  await (bundle ?? Flame.bundle).loadString('$prefix$fileName');
@@ -232,6 +234,8 @@ class RenderableTiledMap {
  tsxPackingFilter: tsxPackingFilter,
  useAtlas: useAtlas,
  layerPaintFactory: layerPaintFactory ?? _defaultLayerPaintFactory,
+ atlasPackingSpacingX: atlasPackingSpacingX,
+ atlasPackingSpacingY: atlasPackingSpacingY,
  );
  }
 
@@ -253,6 +257,8 @@ class RenderableTiledMap {
  bool Function(Tileset)? tsxPackingFilter,
  bool useAtlas = true,
  Paint Function(double opacity)? layerPaintFactory,
+ double atlasPackingSpacingX = 0,
+ double atlasPackingSpacingY = 0,
  }) async {
  final map = await TiledMap.fromString(
  contents,
@@ -270,6 +276,8 @@ class RenderableTiledMap {
  tsxPackingFilter: tsxPackingFilter,
  useAtlas: useAtlas,
  layerPaintFactory: layerPaintFactory ?? _defaultLayerPaintFactory,
+ atlasPackingSpacingX: atlasPackingSpacingX,
+ atlasPackingSpacingY: atlasPackingSpacingY,
  );
  }
 
@@ -288,6 +296,8 @@ class RenderableTiledMap {
  bool Function(Tileset)? tsxPackingFilter,
  bool useAtlas = true,
  Paint Function(double opacity)? layerPaintFactory,
+ double atlasPackingSpacingX = 0,
+ double atlasPackingSpacingY = 0,
  }) async {
  // We're not going to load animation frames that are never referenced; but
  // we do supply the common cache for all layers in this map, and maintain
@@ -312,6 +322,8 @@ class RenderableTiledMap {
  images: images,
  tsxPackingFilter: tsxPackingFilter,
  useAtlas: useAtlas,
+ spacingX: atlasPackingSpacingX,
+ spacingY: atlasPackingSpacingY,
  ),
  ignoreFlip: ignoreFlip,
  images: images,

packages/flame_tiled/lib/src/tile_atlas.dart

@@ -111,6 +111,8 @@ class TiledAtlas {
  Images? images,
  bool Function(Tileset)? tsxPackingFilter,
  bool useAtlas = true,
+ double spacingX = 0,
+ double spacingY = 0,
  }) async {
  final tilesetImageList = _onlyTileImages(
  map,
@@ -209,12 +211,17 @@ class TiledAtlas {
  final tileImageSource = entry.$1;
 
  final image = await imagesInstance.load(tileImageSource);
- final rect = bin.pack(image.width.toDouble(), image.height.toDouble());
+ final rect = bin.pack(
+ image.width.toDouble() + spacingX,
+ image.height.toDouble() + spacingY,
+ );
 
  pictureRect = pictureRect.expandToInclude(rect);
 
- final offset =
- offsetMap[tiledImage.source!] = Offset(rect.left, rect.top);
+ final offset = offsetMap[tiledImage.source!] = Offset(
+ rect.left - spacingX,
+ rect.top - spacingY,
+ );
 
  canvas.drawImage(image, offset, emptyPaint);
  }

packages/flame_tiled/lib/src/tiled_component.dart

@@ -117,6 +117,8 @@ class TiledComponent<T extends FlameGame> extends PositionComponent
  bool Function(Tileset)? tsxPackingFilter,
  bool useAtlas = true,
  Paint Function(double opacity)? layerPaintFactory,
+ double atlasPackingSpacingX = 0,
+ double atlasPackingSpacingY = 0,
  }) async {
  return TiledComponent(
  await RenderableTiledMap.fromFile(
@@ -131,6 +133,8 @@ class TiledComponent<T extends FlameGame> extends PositionComponent
  tsxPackingFilter: tsxPackingFilter,
  useAtlas: useAtlas,
  layerPaintFactory: layerPaintFactory,
+ atlasPackingSpacingX: atlasPackingSpacingX,
+ atlasPackingSpacingY: atlasPackingSpacingY,
  ),
  priority: priority,
  );

packages/flame_tiled/test/tile_atlas_test.dart

@@ -134,6 +134,32 @@ void main() {
  );
  });
 
+ test(
+ 'packs complex maps with multiple images using a custom spacing',
+ () async {
+ final component = await TiledComponent.load(
+ 'isometric_plain.tmx',
+ Vector2(128, 74),
+ bundle: bundle,
+ images: Images(bundle: bundle),
+ atlasPackingSpacingX: 2,
+ atlasPackingSpacingY: 2,
+ );
+
+ final atlas = TiledAtlas.atlasMap.values.first;
+ expect(
+ await imageToPng(atlas.atlas!),
+ matchesGoldenFile('goldens/larger_atlas_with_spacing.png'),
+ );
+ expect(
+ renderMapToPng(component),
+ matchesGoldenFile(
+ 'goldens/larger_atlas_component_with_spacing.png',
+ ),
+ );
+ },
+ );
+
  test('can ignore tilesets in the packing', () async {
  await TiledComponent.load(
  'isometric_plain.tmx',