スプライトシート

SpriteSheet

SpriteSheetを使うと、スプライトシート画像を読み込むことができます。 読み込んだ後は、行や時間を指定してアニメーションやスプライトを作れます。

描画する

事前準備としてassets/images/にpower-up.pngという画像を入れておきます。

あとは、この画像を読み込みSpriteSheetを作成。 SpriteSheetのcreateAnimationで作成したアニメーションをSpriteAnimationComponentに指定すれば OK です。

forで 1 行目と 2 行目をそれぞれ表示しています。

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame/sprite.dart';

class SpriteSheetGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();

    final image = await images.load('power-up.png');

    final spritesheet = SpriteSheet(
      image: image,
      srcSize: Vector2.all(16),
    );

    for (var i = 0; i < 2; i++) {
      await add(
        SpriteAnimationComponent(
          animation: spritesheet.createAnimation(row: i, stepTime: 0.5),
          position: Vector2(
            size.x * 0.5,
            size.y * 0.4 + (i * 100),
          ),
          anchor: Anchor.center,
          size: Vector2.all(64),
        ),
      );
    }
  }
}

これでアニメーションと同様のアニメーションが作成できました。