动画 Animation

Animation类可以为精灵创建循环动画。

可以通过传递尺寸一致地精灵列表和stepTime(移至下一帧需要多少秒)来创建:

Animation a = Animation.spriteList(sprites, stepTime: 0.02);

创建动画后,你需要调用其update函数,并在游戏实例上渲染当前帧的精灵,比如:

class MyGame extends Game {
  Animation a;

  MyGame() {
    a = Animation(...);
  }

  void update(double dt) {
    a.update(dt);
  }

  void render(Canvas c) {
    a.getSprite().render(c);
  }
}

生成精灵列表的更好替代方案是使用sequenced构造函数:

const amountOfFrames = 8;
Animation a = Animation.sequenced('player.png', amountOfFrames, textureWidth: 16.0);

传入文件名后,帧数和精灵清单会根据4个可选参数自动拆分:

  • textureX: 原图起始x坐标(默认为0)
  • textureY: 原图起始y坐标(默认为0)
  • textureWidth: 每帧的宽度(默认为null,即精灵清单的完整宽度)
  • textureHeight: 每帧的高度(默认为null,即精灵清单的完整高度)
  • destroyOnFinish: 控制动画结束时是否应销毁此AnimationComponent,布尔类型。

因此,在我们的示例中,我们说游戏中的人物(简称游戏人物)有8个帧,并且连续显示。因此,若游戏人物高度为16像素,则精灵为128 x 16, 包含8个16x16的帧。

该构造函数使用精灵清单创建动画非常轻松。

如果你使用Aseprite作为动画,Flame确实会为Aseprite动画的JSON数据提供一些支持。若要使用该功能,你需要导出Sprite Sheet的JSON数据,并使用以下代码:

Animation animation = await Animation.fromAsepriteData(
  "chopper.png", // Sprite Sheet image path
  "./assets/chopper.json" // Sprite Sheet animation JSON data
);

注意: Flame不支持被trim后的精灵清单。因此,如果以这种方式导出Sprite会被自动trim,而不是Sprite的原始尺寸。

Animation被创建后具有updaterender函数。后者渲染当前帧,前者则与内部计时器关联以更新帧。

Animation通常在AnimationComponents内部使用,但是也可以创建带有多个Animation的自定义component。

Animation也可以作为widget使用,调用Flame.util.animationAsWidget即可。

点此查看animation作为widget的示例。

Flare动画 FlareAnimation

Flame简单包装了Flare动画,所以你可以直接在Flame中使用它们。

这是使用该包装的示例:

class MyGame extends Game {
  FlareAnimation flareAnimation;
  bool loaded = false;

  MyGame() {
    _start();
  }

  void _start() async {
    flareAnimation = await FlareAnimation.load("assets/FLARE_FILE.flr");
    flareAnimation.updateAnimation("ANIMATION_NAME");

    flareAnimation.width = 306;
    flareAnimation.height = 228;

    loaded = true;
  }

  
  void render(Canvas canvas) {
    if (loaded) {
      flareAnimation.render(canvas, x: 50, y: 50);
    }
  }

  
  void update(double dt) {
    if (loaded) {
      flareAnimation.update(dt);
    }
  }
}

FlareAnimations通常在FlareComponents内部使用,这样,BaseGame将调用render并自动更新。点此查看SpriteSheet的完整示例。

精灵清单 SpriteSheet

精灵清单是精灵的不同帧组合的大图,是归纳动画的良方。Flame提供了非常实用地类来处理SpriteSheets,有了它,你可以加载SpriteSheet图片并从中提取动画。下面来提供一个非常简单的示例:

import 'package:flame/spritesheet.dart';

final spritesheet = SpriteSheet(
  imageName: 'spritesheet.png',
  textureWidth: 16,
  textureHeight: 16,
  columns: 10,
  rows: 2,
);

final animation = spritesheet.createAnimation(0, stepTime: 0.1);

现在,你可以直接使用动画,或在动画component使用它。

你还可以使用getSprite函数获得精灵清单的某一部分:

spritesheet.getSprite(0, 0); // row, column

点此查看SpriteSheet的完整示例。

Flame中文站 all right reserved,powered by Gitbook最后修改: 2020-08-21 19:16:13

results matching ""

    No results matching ""