Flutter Flame：正确的视口以匹配屏幕尺寸

Question

如何找出屏幕尺寸并根据屏幕分辨率放置我的游戏项目？我想在网络客户端上运行我的游戏。



我想调整红色游戏组件的大小，使其适合屏幕并位于中心位置。
LibGdx 对于这个概念有一些很好的 java 类：链接

Answer 1

如果您始终希望将其设置为正方形，则可以使用 aFixedResolutionViewport并将其设置为最小边。

使用相机组件

class MyGame extends FlameGame {
  Future<void> onLoad() async {
    double maxSide = min(size.x, size.y);
    final cameraComponent = CameraComponent.withFixedResolution(
      world: myWorldComponent,
      width: maxSide,
      height: maxSide,
    );
    ...
  }
}

或者

class MyGame extends FlameGame {
  Future<void> onLoad() async {
    final cameraComponent = CameraComponent(
      world: myWorldComponent,
      viewport: FixedAspectRatioViewport(aspectRatio: 1.0),
    );
    ...
  }
}

用旧相机

class MyGame extends FlameGame {
  Future<void> onLoad() async {
    double maxSide = min(size.x, size.y);
    camera.viewport = FixedResolutionViewport(Vector2.all(maxSide)); 
  }
}

如果您希望游戏（视口）size位于另一个组件内，您可以添加mixin 并以相同的方式HasGameRef使用游戏的变量：size

class MyComponent extends Component with HasGameRef {
    MyComponent() : super(anchor: Anchor.center);

  Future<void> onLoad() async {
    final gameSize = gameRef.size;
    // To add a position component in the center of the screen for example:
    // (when the camera isn't moved)
    position = gameSize/2;
  }
}

如果您想要其他尺寸，我建议您查看一下game.camera，game.camera.viewport它也提供了一些其他选项。