`Viewfinder.visibleGameSize` zooms in too far with a `FixedResolutionViewport`

未关闭
  • 哪里不对？
#4,203 0 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 1 天内回复

@ufrshubham 已经在做这个了。

开始于 2026年11月2日。

  • #4207 来自 @ufrshubham —— 未关闭

评估

这个 Issue 还没有评估数据。

描述

bug
What happened?

visibleGameSize sets the zoom so that the given region fits into the viewport. _updateZoom (viewfinder.dart#L201-L208) calculates it from viewport.size, which is the size of the viewport on the screen. The viewfinder works in the viewport's virtualSize though, which for a FixedResolutionViewport is its resolution, and the viewport scales that up to the screen afterwards. So with a FixedResolutionViewport, the scale is applied twice.

With a 320×180 resolution in a 1280×720 window and visibleGameSize = Vector2(330, 228), the zoom is 3.16, and only 101×57 units of the 330×228 room are visible. When the window is resized to 640×360, the zoom changes to 1.58 and 202×114 units are visible, so how much of the world is visible depends on the window size, which is what FixedResolutionViewport is meant to prevent.

The documentation of visibleGameSize (viewfinder.dart#L149-L150) also says that setting it removes any fixed resolution constraints, which isn't true. That is left over from when CameraComponent.withFixedResolution was built from a FixedAspectRatioViewport with visibleGameSize (#2776), where size and virtualSize were the same.

https://github.com/user-attachments/assets/b45609c3-0373-4aee-ab32-30d8e1338f4e

What do you expect?

The zoom is calculated against the resolution, min(320 / 330, 180 / 228) ≈ 0.79, so the whole 330×228 room is visible at any window size.

How can we reproduce this?
  1. Create a camera with CameraComponent.withFixedResolution(width: 320, height: 180).
  2. Set camera.viewfinder.visibleGameSize = Vector2(330, 228).
  3. Run it in a 1280×720 window. The zoom is 3.16 instead of 0.79, and only the center of the room is visible.
What steps should take to fix this?

_updateZoom will use viewport.virtualSize instead of viewport.size, and the documentation of visibleGameSize will say that the region is fitted into the viewport's virtual size, i.e. the resolution of a FixedResolutionViewport.

Do have an example of where the bug occurs?
import 'dart:ui';

import 'package:flame/camera.dart';
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart' show Colors;
import 'package:flutter/widgets.dart';

void main() => runApp(GameWidget(game: ReproGame()));

class ReproGame extends FlameGame {
  ReproGame()
    : super(
        camera: CameraComponent.withFixedResolution(width: 320, height: 180),
      );

  @override
  Future<void> onLoad() async {
    // A single-screen room that should always be fully visible.
    world.add(
      RectangleComponent(
        size: Vector2(330, 228),
        anchor: Anchor.center,
        paint: Paint()..color = Colors.brown,
      ),
    );
    camera.viewfinder.visibleGameSize = Vector2(330, 228);
  }
}

Expected: the whole room is visible, at any window size. Actual: only the center of the room is visible, and how much of it depends on the window size.

Relevant log output
Nothing is logged or thrown.
Execute in a terminal and put output into the code block below
[√] Flutter (Channel stable, 3.47.9, on Microsoft Windows [Version 10.0.22631.6199], locale en-US)
    • Flutter version 3.47.9 on channel stable
    • Framework revision c197ca5199 (4 days ago), 2026-10-29 10:10:20 -0400
    • Engine revision 89c39edfdf
    • Dart version 3.13.7
    • DevTools version 2.60.0

[√] Windows Version (11 Pro 64-bit, 23H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2026 18.11.2)
[√] Connected device (3 available)
[√] Network resources

• No issues found!
Affected platforms

All

Are you interested in working on a PR for this?
  • I want to work on this
主要语言
Dart
星标
10.8k
派生
1.1k
平均合并
1 天 19 小时
30 天内合并 PR
54

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

flame-engine/flame 的其他 Issue

查看 flame-engine/flame 的全部 Issue

相似的 Issue

更多 Dart Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。