Strange problems when using TextBoxComponent

[DavidChZh]

What happened?

I encountered a strange problem when using the TextBoxComponent component. My game class inherits from Forge2DGame. When debugging the TextBoxComponent, I found that the font was very blurry and there was also a problem with the font size. Later I found that after changing to inherit FlameGame, it became normal.

import 'dart:async';
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame/palette.dart';
import 'package:flame/text.dart';
import 'package:flame_forge2d/forge2d_game.dart';
import 'package:flutter/material.dart';

class TextExample extends FlameGame {
  //Forge2DGame
  static const String description = '''
    In this example we show different ways of rendering text.
  ''';

  @override
  Future<void> onLoad() async {
    world.add(MyTextBox(
      'Let A be a finitely generated torsion-free abelian group. Then '
      'A is free.',
      align: Anchor.center,
      size: Vector2(30, 30),
      timePerChar: 0,
      margins: 10,
    )..position = Vector2.zero());
  }
}

final _regularTextStyle = TextStyle(
  fontSize: 12,
  color: BasicPalette.white.color,
);
final _regular = TextPaint(
  style: _regularTextStyle,
);

final _box = _regular.copyWith(
  (style) => style.copyWith(
    color: Colors.lightGreenAccent,
    fontFamily: 'monospace',
    letterSpacing: 2.0,
  ),
);

class MyTextBox extends TextBoxComponent {
  late Paint paint;
  late Rect bgRect;

  MyTextBox(
    String text, {
    super.align,
    super.size,
    double? timePerChar,
    double? margins,
  }) : super(
          text: text,
          textRenderer: _box,
          anchor: Anchor.center,
          boxConfig: TextBoxConfig(
            maxWidth: 400,
            timePerChar: timePerChar ?? 0.05,
            growingBox: true,
            margins: EdgeInsets.all(margins ?? 25),
          ),
        );

  @override
  Future<void> onLoad() {
    paint = Paint();
    bgRect = Rect.fromLTWH(0, 0, width, height);
    size.addListener(() {
      bgRect = Rect.fromLTWH(0, 0, width, height);
    });

    paint.color = Colors.white10;
    return super.onLoad();
  }

  @override
  void render(Canvas canvas) {
    canvas.drawRect(bgRect, paint);
    super.render(canvas);
  }
}

The above code runs normally, but when I change FlameGame to Forge2DGame, something goes wrong when I rerun it.

What do you expect?

Inheriting FlameGame and Forge2DGame can show the same effect

How can we reproduce this?

No response

What steps should take to fix this?

No response

Do have an example of where the bug occurs?

No response

Relevant log output

No response

Execute in a terminal and put output into the code block below

Output of: flutter doctor -v

Affected platforms

Android

Other information

No response

Are you interested in working on a PR for this?

• [ ] I want to work on this