如何用 canvas 替换 Flutter 小部件，反之亦然？

Question

我正在使用 Flutter Flame 制作 2D 游戏。该库使用 canvas，如下所示：

start() {
  var previous = Duration.ZERO;

  window.onBeginFrame = (now) {
    var recorder = new PictureRecorder();
    var canvas = new Canvas(
        recorder,
        new Rect.fromLTWH(
            0.0, 0.0, window.physicalSize.width, window.physicalSize.height));

    Duration delta = now - previous;
    if (previous == Duration.ZERO) {
      delta = Duration.ZERO;
    }
    previous = now;

    var t = delta.inMicroseconds / Duration.MICROSECONDS_PER_SECOND;

    update(t);
    render(canvas);

    var deviceTransform = new Float64List(16)
      ..[0] = window.devicePixelRatio
      ..[5] = window.devicePixelRatio
      ..[10] = 1.0
      ..[15] = 1.0;

    var builder = new SceneBuilder()
      ..pushTransform(deviceTransform)
      ..addPicture(Offset.zero, recorder.endRecording())
      ..pop();

    window.render(builder.build());
    window.scheduleFrame();
  };

  window.scheduleFrame();
}

值得注意的是，Flutter Flame 使用自定义 BindingBase，类似于 Widgets 的工作方式。

class _CustomBinder extends BindingBase with ServicesBinding {}

这对游戏来说效果很好，但我希望在主菜单、设置页面等中使用真正的 flutter 小部件

有没有办法在这两个上下文之间交换？

为了让我知道我在寻找什么，我希望存在这两个函数：

loadHomeScreen(); // replaces the canvas, if any, with Flutter widgets
loadCanvasScene(); // replaces the Flutter widgets with the canvas

Answer 1

在较新版本的 Flame (0.8.x) 中，游戏变成了一个常规的 Widget，因此支持具有用于菜单和设置的常规 widget 的应用程序。

从常规应用程序开始，在您的一种构建方法中，添加您的游戏实现的小部件：

class MyGame extends BaseGame {
  // your game here
}

// in your game screen class

final MyGame game = new MyGame();

@override
Widget build(BuildContext context) {
  return game.widget;
}

如需更多 in-depth 示例，请检查 this complete game, built using the latest version of Flame. The specific code you are looking for, that switches between game and app is here。

如何用 canvas 替换 Flutter 小部件，反之亦然？

How can I replace Flutter widgets with canvas and vice versa?

flutter

flame