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

Question

我对基于 flutter 构建的 flame 游戏引擎还很陌生，但我想为我的背景渲染一个视差图像，但是当我尝试在我的主游戏中渲染它时 class 它不会'没出现吗？

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 的样子。

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);
  }
}

Answer 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 class 所以您不必像在示例中那样创建自己的 screenSize 变量。 size 是 Vector2 类型，就像 Flame 中的大多数此类变量一样，宽度可以使用 size.x 访问，高度可以使用 size.y.

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

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

How do I render a parallax image using the flame game engine with flutter

flutter

dart

flame