如何在一行中顺序对齐精灵并使用 TexturePacker 将它们提取为 png 格式？

Question

我想从 this pack in one line using TexturePacker and create a png file as sprite sheet to create an animation using FireAtlas afterward. I tried a lot but couldn't create such output. I am using Flame library in Flutter and there is no output for Flame in TexturePacker 软件中对齐 15 张图片，所以我必须使用很多工具才能获得所需的输出。

Answer 1

flame_texturepacker 现已更新为 flame 1.0.0 和 nullsafety，因此您可以只依赖 flame_texturepacker: ^2.0.0.

旧答案：

像这样的东西应该可以工作：

import 'dart:convert';
import 'package:flame/flame.dart';
import 'package:flame/sprite.dart';

extension TexturePackerExtension on Game {
  Future<List<Sprite>> loadTexturePack(
    String imagePath,
    String dataPath,
  ) async {
    final json = await Flame.assets.readJson(dataPath)
        as Map<String, Map<String, dynamic>>;
    final image = await Flame.images.load(imagePath);

    final sprites = json['frames']?.values.map((dynamic value) {
      final frameData = value['frame'] as Map<String, int>;
      final x = frameData['x']!;
      final y = frameData['y']!;
      final width = frameData['w']!;
      final height = frameData['h']!;

      return Sprite(
        image,
        srcPosition: Vector2(x.toDouble(), y.toDouble()),
        srcSize: Vector2(width.toDouble(), height.toDouble()),
      );
    });

    return sprites?.toList() ?? [];
  }
}

已从 flame_texturepacker 转换为 Flame 版本 1.0.0。

只需将其导入您的游戏 class 文件并调用它：

import texture_packer_extension.dart;

class MyGame extends FlameGame {
  ...

  @override
  Future<void> onLoad() async {
    super.onLoad();
    final sprites = await loadTexturePack('myImage.png', 'myJson.json');
    ...
  }
}

如何在一行中顺序对齐精灵并使用 TexturePacker 将它们提取为 png 格式？

How to align sprites sequentially in a line and extract them as a png format with TexturePacker?

flutter

texturepacker

flame