使用 Flame Engine 调整屏幕大小的问题

Question

我正在尝试在我的 flutter 网站中直接嵌入一个使用 Flame Engine 的小游戏。

我已经成功创建了一个包含 GameWidget:

的容器

class gameContainer extends StatelessWidget {
 const gameContainer({Key? key, required this.width}) : super(key: key);
   final double width;

   @override
   Widget build(BuildContext context) {
     return Container(
       width: width,
       height: 100,
       padding: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
       child: GameWidget(game: game()),
    );
  }
}

我有游戏运行，在屏幕上显示玩家并移动。

我的宽度是动态的我希望能够调整屏幕大小和 GameViewport 以调整自身大小。问题是，当屏幕自行调整大小时，整个游戏都会重置。 onGameResize 和 onLoad 都被调用：最终结果我然后失去了我的玩家位置。

它尝试覆盖 onGameResize 以在游戏中调整大小之前获取玩家位置 class 但玩家位置在调用时已设置为 [0,0]。

我看了几个教程，但我不知道如何绕过这个问题。

从这里开始的任何想法。

Answer 1

这是因为您是在 GameWidget 内部启动游戏，如果您在小部件外部启动它应该没问题。 Flutter 小部件树在调整大小时重建，这就是您遇到此问题的原因。

class gameContainer extends StatelessWidget {
 const gameContainer({Key? key, required this.width}) : super(key: key);
   final double width;
   final FlameGame _game = game();

   @override
   Widget build(BuildContext context) {
     return Container(
       width: width,
       height: 100,
       padding: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
       child: GameWidget(game: _game),
    );
  }
}

请记住，根据您构建游戏的方式，您可能需要在游戏中 onGameResize 做出反应 class。

使用 Flame Engine 调整屏幕大小的问题

Issue with screen resize using Flame Engine

flutter

flutter-web

flame