如何使用带有颤振的火焰游戏引擎渲染视差图像答案

【问题标题】：How do I render a parallax image using the flame game engine with flutter如何使用带有颤振的火焰游戏引擎渲染视差图像
【发布时间】：2021-08-22 05:50:33
【问题描述】：

我对基于颤振构建的火焰游戏引擎非常陌生，但我想为我的背景渲染一个视差图像，但是当我尝试在我的主游戏类中渲染它时它不会出现？

class BackGround extends AnimationComponent {

  Rect backgroundRect;
  ParallaxComponent _parallaxComponent;
  BackGround() : super.empty() {
    backgroundRect = Rect.fromLTWH(
      100,
      100,
      100,
      100,
    );
  }

  void render(Canvas c) {
    _parallaxComponent = ParallaxComponent([
      ParallaxImage('Layer_0010_1.png'),
      ParallaxImage('Layer_0009_2.png'),
      ParallaxImage('Layer_0008_3.png'),
      ParallaxImage('Layer_0006_4.png'),
      ParallaxImage('Layer_0005_5.png'),
      ParallaxImage('Layer_0003_6.png'),
      ParallaxImage('Layer_0002_7.png'),
      ParallaxImage('Layer_0001_8.png'),
      ParallaxImage('Layer_0000_9.png'),
    ], baseSpeed: Offset(100, 0), layerDelta: Offset(20, 0));
    _parallaxComponent.render(c);
  }
}

这是我的主要游戏类的样子。

class MainGame extends BaseGame with TapDetector, HasWidgetsOverlay {
  BackGround backback;
  Size screenSize;



  MainGame(this.storage) {
    initialize();
  }

  void initialize() async {
    // resize(await Flame.util.initialDimensions());
    backback = BackGround();
  }

  void render(Canvas c) {
    backback.render(c);
  }
}

【问题讨论】：

标签： flutter dart flame

【解决方案1】：

你不需要自己调用 render 方法，当一个Component 被添加到游戏中时它会为你完成。所以就像在ParallaxComponent 示例here 中一样，你add 的游戏组件是这样的：

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

class MyParallaxComponent extends ParallaxComponent<ComponentParallaxGame> {
  @override
  Future<void> onLoad() async {
    parallax = await gameRef.loadParallax(
      [
        ParallaxImageData('parallax/bg.png'),
        ParallaxImageData('parallax/mountain-far.png'),
        ParallaxImageData('parallax/mountains.png'),
        ParallaxImageData('parallax/trees.png'),
        ParallaxImageData('parallax/foreground-trees.png'),
      ],
      baseVelocity: Vector2(20, 0),
      velocityMultiplierDelta: Vector2(1.8, 1.0),
    );
  }
}

class ComponentParallaxGame extends BaseGame {
  @override
  Future<void> onLoad() async {
    add(MyParallaxComponent());
  }
}

另外两个需要注意的重要事项是组件应该在 onLoad 中初始化，而不是在构造函数中，并且您已经在 Game 类上有一个 size，因此您不必创建您的拥有 screenSize 变量，就像您在示例中所做的那样。 size 属于Vector2 类型，与Flame 中的大多数此类变量一样，宽度可以通过size.x 访问，高度可以通过size.y 访问。

您似乎也可以使用 Flame 0.26.4，我建议您改用 1.0.0-releasecandidate.13，因为它更加成熟，并且它是正在积极开发的代码库（不要害怕 releasecandidate标签，我们很快就会发布1.0.0)。

【讨论】：

谢谢@spydon！它现在可以工作了，我期待发布 1.0.0