アニメーション

SpriteAnimationComponent

以前、スプライトでは静止画を表示しましたが、 SpriteAnimationComponentを使えばアニメーションさせることもできます。

他にも方法はありますが、images.loadで読み込んだ横並びの画像から、 SpriteAnimationData.sequencedでサイズ・数・秒することで、1 枚の画像からアニメーションを作れます。

なお スプライトシートを使ってもアニメーションを作れます。

動かす

事前準備としてassets/images/にexplosion.pngという横並びの画像を入れておきます。

pubspec.yamlはスプライトで設定済みなので修正不要です。

それではSpriteAnimationComponentを使います。 images.loadで先程の画像を読み込み、SpriteAnimationData.sequencedで設定を渡します。

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

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

    await add(
      SpriteAnimationComponent.fromFrameData(
        await images.load('explosion.png'),
        SpriteAnimationData.sequenced(
          textureSize: Vector2.all(32),
          amount: 6,
          stepTime: 0.2,
        ),
        position: Vector2(size.x * 0.5, size.y * 0.5),
        anchor: Anchor.center,
      ),
    );
  }
}

これで画面中央にアニメーションが描画されます。