Flutter Flame 中的滚动背景答案

【问题标题】：Scrolling background in Flutter FlameFlutter Flame 中的滚动背景
【发布时间】：2021-05-25 13:25:04
【问题描述】：

我的游戏中有一个精灵组件列表，它们代表三个我想无限滚动的背景精灵图像。我使用下面的代码初始化、更新和渲染精灵组件，但是精灵都以不同的速度移动，游戏有时会非常慢，我做错了什么？

正在初始化：

List<SpriteComponent> bkgList = [];

bkgImage = await images.load('BGFull.png');
for (int i = 0; i < MAX_BKG_COUNT; i++) {
  final spr = Sprite(bkgImage);
  bkgList.add(SpriteComponent(
    sprite: spr,
    position: Vector2(640.0 * i, 0),
    size: Vector2(640, 384)
  ));
}

更新：

for (int j = 0; j < bkgList.length; j++) {
  bkgList[j].position.x -= 1.0;

  if (bkgList[j].position.x < -640.0) {
    bkgList.removeAt(0);
    bkgList.add(SpriteComponent(
        sprite: Sprite(bkgImage),
        position: Vector2(bkgList.last.position.x + 640.0, 0),
        size: Vector2(640, 384)
    ));
  }
}

渲染：

for (int z = 0; z < bkgList.length; z++) {
  bkgList[z].render(canvas);
}

【问题讨论】：

标签： flutter game-engine flame

【解决方案1】：

为此，您最有可能使用ParallaxComponent，您可以找到here 的文档。要加载您在BGFull.png 中的精灵表，您可以使用SpriteSheet class，然后将图像从那里传递到ParallaxComponent。

但是从您现在的代码来看，问题可能是您没有在onLoad 方法中进行初始化，但我无法从您的 sn-ps 中看出。

【讨论】：