feat(flame): Add helper methods to create frame data on SpriteSheet (#2754)

Add two methods to SpriteSheet to create frame data for SpriteAnimation
2025-10-29 07:56:53 +08:00 · 2023-09-21 11:34:02 +02:00
parent 7313cd5352
commit 477221998a
16 changed files with 160 additions and 39 deletions
--- a/examples/lib/stories/sprites/sprite_sheet_example.dart
+++ b/examples/lib/stories/sprites/sprite_sheet_example.dart
@ -0,0 +1,91 @@
+import 'package:flame/components.dart';
+import 'package:flame/game.dart';
+import 'package:flame/sprite.dart';
+
+class SpriteSheetExample extends FlameGame {
+  static const String description = '''
+    In this example we show how to load images and how to create animations from
+    sprite sheets.
+  ''';
+
+  @override
+  Future<void> onLoad() async {
+    final spriteSheet = SpriteSheet(
+      image: await images.load('sprite_sheet.png'),
+      srcSize: Vector2(16.0, 18.0),
+    );
+
+    final vampireAnimation =
+        spriteSheet.createAnimation(row: 0, stepTime: 0.1, to: 7);
+
+    final ghostAnimation =
+        spriteSheet.createAnimation(row: 1, stepTime: 0.1, to: 7);
+
+    final ghostAnimationVariableStepTimes =
+        spriteSheet.createAnimationWithVariableStepTimes(
+      row: 1,
+      to: 7,
+      stepTimes: [0.1, 0.1, 0.3, 0.3, 0.5, 0.3, 0.1],
+    );
+
+    final customVampireAnimation = SpriteAnimation.fromFrameData(
+      spriteSheet.image,
+      SpriteAnimationData([
+        spriteSheet.createFrameData(0, 0, stepTime: 0.1),
+        spriteSheet.createFrameData(0, 1, stepTime: 0.1),
+        spriteSheet.createFrameData(0, 2, stepTime: 0.3),
+        spriteSheet.createFrameDataFromId(4, stepTime: 0.3),
+        spriteSheet.createFrameDataFromId(5, stepTime: 0.5),
+        spriteSheet.createFrameDataFromId(6, stepTime: 0.3),
+        spriteSheet.createFrameDataFromId(7, stepTime: 0.1),
+      ]),
+    );
+
+    final spriteSize = Vector2(80.0, 90.0);
+
+    final vampireComponent = SpriteAnimationComponent(
+      animation: vampireAnimation,
+      position: Vector2(150, 100),
+      size: spriteSize,
+    );
+
+    final ghostComponent = SpriteAnimationComponent(
+      animation: ghostAnimation,
+      position: Vector2(150, 220),
+      size: spriteSize,
+    );
+
+    final ghostAnimationVariableStepTimesComponent = SpriteAnimationComponent(
+      animation: ghostAnimationVariableStepTimes,
+      position: Vector2(250, 220),
+      size: spriteSize,
+    );
+
+    final customVampireComponent = SpriteAnimationComponent(
+      animation: customVampireAnimation,
+      position: Vector2(250, 100),
+      size: spriteSize,
+    );
+
+    add(vampireComponent);
+    add(ghostComponent);
+    add(ghostAnimationVariableStepTimesComponent);
+    add(customVampireComponent);
+
+    // Some plain sprites
+    final vampireSpriteComponent = SpriteComponent(
+      sprite: spriteSheet.getSprite(0, 0),
+      position: Vector2(50, 100),
+      size: spriteSize,
+    );
+
+    final ghostSpriteComponent = SpriteComponent(
+      sprite: spriteSheet.getSprite(1, 0),
+      size: spriteSize,
+      position: Vector2(50, 220),
+    );
+
+    add(vampireSpriteComponent);
+    add(ghostSpriteComponent);
+  }
+}