flame-engine
Can't center `TextComponent`
What happened?
Even add Anchor.center to TextComponent still can't center it to container and no regular pattern, some are above, some are below.
What do you expect?
Text can auto center to container
How can we reproduce this?
import 'dart:async';
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame_forge2d/flame_forge2d.dart' hide Transform;
import 'package:flutter/material.dart';
import 'package:flame/extensions.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Container(
width: 30, height: 30,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
Container(
width: 40, height: 40,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
Container(
width: 50, height: 50,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
Container(
width: 55, height: 55,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
Container(
width: 60, height: 60,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
Container(
width: 70, height: 70,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
],
),
Row(
children: [
Container(
width: 25, height: 25,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
Container(
width: 35, height: 35,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
Container(
width: 65, height: 65,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
Container(
width: 75, height: 75,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
Container(
width: 80, height: 80,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
),
],
),
],
),
),
),
),
);
}
class TextCenterGame extends Forge2DGame{
TextCenterGame() : super(world: TextCenterWord(),);
@override
Color backgroundColor() {
return Colors.transparent;
}
@override
FutureOr<void> onLoad() {
super.onLoad();
}
}
class TextCenterWord extends Forge2DWorld with HasGameReference<Forge2DGame> {
@override
Future<void> onLoad() async {
super.onLoad();
print('game.size: ${game.size}, ${game.camera.visibleWorldRect}');
// add(CenterTextBody(Size(game.size.x, game.size.y)));
add(CenterTextBody(Size(game.camera.visibleWorldRect.width, game.camera.visibleWorldRect.height)));
}
}
class CenterTextBody extends BodyComponent {// with TapCallbacks
final bgPaint = Paint();
final Size size;
CenterTextBody(this.size);
@override
Future<void> onLoad() async {
await super.onLoad();
bgPaint.style = PaintingStyle.stroke;
bgPaint.strokeWidth = 0.1;
bgPaint.color = Colors.red;
final fontSize = size.width*0.6;
print('game.size: $fontSize, ${game.size}, ${game.camera.visibleWorldRect}');
TextComponent textComponent = TextComponent(
text: '0',//🌟⭐
textRenderer: TextPaint(
style: TextStyle(
fontSize: fontSize,
// height: 1,
),
),
anchor: Anchor.center,
);
add(textComponent);
}
@override
void renderCircle(Canvas canvas, Offset center, double radius) {
canvas.drawCircle(center, radius, bgPaint);
canvas.drawLine(Offset(-radius, center.dy), Offset(radius, center.dy), bgPaint);
canvas.drawLine(Offset(center.dx, -radius), Offset(center.dx, radius), bgPaint);
}
@override
Body createBody() {
print('createBody: $size');
final fixtureDef = FixtureDef(
CircleShape()..radius=size.width/2,
);
final bodyDef = BodyDef(
// position: Vector2(size.width/2, size.height/2),
// position: Vector2(),
type: BodyType.static,
);
return world.createBody(bodyDef)..createFixture(fixtureDef);
}
}
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
[✓] Flutter (Channel stable, 3.24.1, on macOS 14.6.1 23G93 darwin-arm64 (Rosetta), locale en-US) • Flutter version 3.24.1 on channel stable at /Users/taotao/Documents/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 5874a72aa4 (5 weeks ago), 2024-08-20 16:46:00 -0500 • Engine revision c9b9d5780d • Dart version 3.5.1 • DevTools version 2.37.2 • Pub download mirror https://pub.flutter-io.com • Flutter download mirror https://storage.flutter-io.com
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/taotao/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/taotao/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160) • All Android licenses accepted.
Affected platforms
Android
Other information
flame: ^1.19.0 flame_forge2d: ^0.18.2 flame_svg: ^1.11.0
Are you interested in working on a PR for this?
- [ ] I want to work on this
The current code is configured to center the text's bounding box, but then it renders the text at the top-left corner within that box. Because of the font's metrics, the visual center of the text doesn't align with the center of its bounding box, which is likely why the text appears vertically offset.
How about also specifying the textAnchor property to Anchor.center when you create the TextComponent? Try modifying the onLoad method in your CenterTextBody class as follows.
// CenterTextBody.dart
@override
Future<void> onLoad() async {
await super.onLoad();
bgPaint.style = PaintingStyle.stroke;
bgPaint.strokeWidth = 0.1;
bgPaint.color = Colors.red;
final fontSize = size.width * 0.6;
TextComponent textComponent = TextComponent(
text: '0',
textRenderer: TextPaint(
style: TextStyle(
fontSize: fontSize,
),
),
anchor: Anchor.center, // Positions the component's box in the center
textAnchor: Anchor.center, // Aligns the text itself to the center within the box (This is the key!)
);
add(textComponent);
}
@0disoft have you used LLMs to reply to these issues? If so, please don't, there are too many code hallucinations and it'll distract from the actual discussion. Like in your example, textAnchor does not exist.
