Difference Between size and canvasSize in Flame

Question

I noticed that both size and canvasSize are used in the Flame router example.

When I checked the implementation in the Game class, they seem to have the same implementation.

  /// Current game viewport size, updated every resize via the [onGameResize]
  /// method hook.
  Vector2 get size {
    assertHasLayout();
    return _size!;
  }

  Vector2 get canvasSize {
    assertHasLayout();
    return _size!;
  }

Are they the same thing, or is there a difference between them?

Answer 1

You're looking at the abstract Game class, what you want to look at is the implementation that FlameGame has, which is this:

  /// This is overwritten to consider the viewport transformation.
  ///
  /// Which means that this is the logical size of the game screen area as
  /// exposed to the canvas after viewport transformations.
  ///
  /// This does not match the Flutter widget size; for that see [canvasSize].
  @override
  Vector2 get size => camera.viewport.virtualSize;

FlameGame has the same implementation as Game for canvasSize and that is the size of the GameWidget, that we get from Flutter. So if the GameWidget is in full screen it will be the resolution of your screen (in virtual pixels).