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

[spydon]

Can you please add your code in a code block?

[DavidChZh]

Can you please add your code in a code block?

text_example.dart.zip

Sorry, I confirmed that my code is in the code block, but I don't know why the preview turned into normal text. I tried various methods but it didn't work. I uploaded the file.

[ufrshubham]

@DavidChZh you need to wrap the code like this ☝🏼

[DavidChZh]

@DavidChZh you need to wrap the code like this ☝🏼

Thanks!

[spydon]

Forge2DGame has a default zoom of 10 (so that you don't hit the speed limit), so that's why you are getting different results.

[DavidChZh]

Forge2DGame has a default zoom of 10 (so that you don't hit the speed limit), so that's why you are getting different results.

I forgot that zoom also affects font components. I subconsciously thought that it would only affect spheres, pictures, etc.
I got it back to normal by setting the scale individually for the font component.
Thank you so much!