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

Abierto
  • ¿Algo no está bien?
#4,203 0 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@ufrshubham ya está trabajando en esto.

Desde el 2/11/2026.

  • #4207 de @ufrshubham — abierto

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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
Lenguaje dominante
Dart
Estrellas
10.8k
Forks
1.1k
Merge medio
1 d 21 h
PR fusionados (30 d)
62

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de flame-engine/flame

Todos los issues de flame-engine/flame

Issues similares

Más issues de Dart

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.