Flutter与Flame框架下PC端浏览器游戏的固定分辨率设置

要确保PC浏览器端游戏无论屏幕尺寸都保持一致体验，核心是固定游戏的逻辑分辨率并约束渲染尺寸，以下是具体实现步骤：

1. 固定游戏逻辑分辨率 #

在你的Flame Game子类中，使用FixedResolutionViewport定义游戏的最大逻辑分辨率（比如1920×1080），这会让游戏内的所有元素基于该尺寸布局，不受窗口大小影响：

class MyPlatformGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    camera.viewport = FixedResolutionViewport(const Vector2(1920, 1080));
    // 加载游戏资源、组件等
    await super.onLoad();
  }
}

2. 约束浏览器端渲染尺寸 #

在Flutter的Widget树中，用LayoutBuilder和ConstrainedBox限制游戏的最大显示尺寸，同时保持比例自适应：

@override
Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      // 预设最大分辨率
      const maxGameWidth = 1920.0;
      const maxGameHeight = 1080.0;
      const aspectRatio = maxGameWidth / maxGameHeight;

      // 计算适配窗口的最大尺寸，不超过预设值且保持比例
      final availableWidth = constraints.maxWidth;
      final availableHeight = constraints.maxHeight;
      final displayWidth = min(availableWidth, availableHeight * aspectRatio);
      final displayHeight = displayWidth / aspectRatio;

      // 确保最终尺寸不超过预设的最大分辨率
      final finalWidth = min(displayWidth, maxGameWidth);
      final finalHeight = min(displayHeight, maxGameHeight);

      return Center(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: finalWidth,
            maxHeight: finalHeight,
          ),
          child: GameWidget(game: MyPlatformGame()),
        ),
      );
    },
  );
}

这段代码会让游戏在浏览器窗口中居中显示：当窗口大于1920×1080时，游戏保持最大分辨率；窗口较小时，按比例缩小，避免拉伸变形。

3. 响应窗口尺寸变化 #

在Game类中监听窗口resize事件，确保视口始终适配当前窗口的有效尺寸：

class MyPlatformGame extends FlameGame {
  @override
  void onGameResize(Vector2 size) {
    const maxSize = Vector2(1920, 1080);
    // 计算缩放比例，取宽高中较小的那个值，避免超出最大分辨率
    final scale = min(size.x / maxSize.x, size.y / maxSize.y);
    // 调整视口尺寸，保持比例
    camera.viewport = FixedResolutionViewport(maxSize * scale);
    super.onGameResize(size);
  }
}

4. 禁止浏览器页面缩放 #

在Flutter Web的web/index.html中添加meta标签，防止用户通过浏览器缩放破坏游戏布局：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

内容的提问来源于stack exchange，提问作者Milaethe