mirror of
https://github.com/flame-engine/flame.git
synced 2025-11-01 09:39:12 +08:00
This will:
kill the TextRenderer inheritance chain
incorporate the functionality of the base TextRenderer in the base TextFormatter
rename TextFormatter to TextRenderer and appropriate references
That is because both essentially do the same job; encompass the style (or "how") information about how to render text, but using two slightly different interfaces. While that could allow for more flexibility, it is a faux choice that needlessly complicates the pipeline. By having a single interface to comply with, we still allow for custom renders while at the same time making all the code downstream simpler to use and understand.
104 lines
3.2 KiB
Dart
104 lines
3.2 KiB
Dart
import 'package:flame/components.dart';
|
|
import 'package:flame/game.dart';
|
|
import 'package:flame/palette.dart';
|
|
import 'package:flame/text.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
class TextExample extends FlameGame {
|
|
static const String description = '''
|
|
In this example we show different ways of rendering text.
|
|
''';
|
|
|
|
@override
|
|
Future<void> onLoad() async {
|
|
addAll([
|
|
TextComponent(text: 'Hello, Flame', textRenderer: _regular)
|
|
..anchor = Anchor.topCenter
|
|
..x = size.x / 2
|
|
..y = 32.0,
|
|
TextComponent(text: 'Text with shade', textRenderer: _shaded)
|
|
..anchor = Anchor.topRight
|
|
..position = size - Vector2.all(100),
|
|
TextComponent(text: 'center', textRenderer: _tiny)
|
|
..anchor = Anchor.center
|
|
..position.setFrom(size / 2),
|
|
TextComponent(text: 'bottomRight', textRenderer: _tiny)
|
|
..anchor = Anchor.bottomRight
|
|
..position.setFrom(size),
|
|
MyTextBox(
|
|
'"This is our world now. The world of the electron and the switch; '
|
|
'the beauty of the baud. We exist without nationality, skin color, '
|
|
'or religious bias. You wage wars, murder, cheat, lie to us and try '
|
|
"to make us believe it's for our own good, yet we're the "
|
|
'criminals. Yes, I am a criminal. My crime is that of curiosity."',
|
|
)
|
|
..anchor = Anchor.bottomLeft
|
|
..y = size.y,
|
|
MyTextBox(
|
|
'Let A be a finitely generated torsion-free abelian group. Then '
|
|
'A is free.',
|
|
align: Anchor.center,
|
|
size: Vector2(300, 200),
|
|
timePerChar: 0,
|
|
margins: 10,
|
|
)..position = Vector2(10, 50),
|
|
MyTextBox(
|
|
'Let A be a torsion abelian group. Then A is the direct sum of its '
|
|
'subgroups A(p) for all primes p such that A(p) ≠ 0.',
|
|
align: Anchor.bottomRight,
|
|
size: Vector2(300, 200),
|
|
timePerChar: 0,
|
|
margins: 10,
|
|
)..position = Vector2(10, 260),
|
|
]);
|
|
}
|
|
}
|
|
|
|
final _regularTextStyle =
|
|
TextStyle(fontSize: 18, color: BasicPalette.white.color);
|
|
final _regular = TextPaint(style: _regularTextStyle);
|
|
final _tiny = TextPaint(style: _regularTextStyle.copyWith(fontSize: 14.0));
|
|
final _box = _regular.copyWith(
|
|
(style) => style.copyWith(
|
|
color: Colors.lightGreenAccent,
|
|
fontFamily: 'monospace',
|
|
letterSpacing: 2.0,
|
|
),
|
|
);
|
|
final _shaded = TextPaint(
|
|
style: TextStyle(
|
|
color: BasicPalette.white.color,
|
|
fontSize: 40.0,
|
|
shadows: const [
|
|
Shadow(color: Colors.red, offset: Offset(2, 2), blurRadius: 2),
|
|
Shadow(color: Colors.yellow, offset: Offset(4, 4), blurRadius: 4),
|
|
],
|
|
),
|
|
);
|
|
|
|
class MyTextBox extends TextBoxComponent {
|
|
MyTextBox(
|
|
String text, {
|
|
super.align,
|
|
super.size,
|
|
double? timePerChar,
|
|
double? margins,
|
|
}) : super(
|
|
text: text,
|
|
textRenderer: _box,
|
|
boxConfig: TextBoxConfig(
|
|
maxWidth: 400,
|
|
timePerChar: timePerChar ?? 0.05,
|
|
growingBox: true,
|
|
margins: EdgeInsets.all(margins ?? 25),
|
|
),
|
|
);
|
|
|
|
@override
|
|
void render(Canvas canvas) {
|
|
final rect = Rect.fromLTWH(0, 0, width, height);
|
|
canvas.drawRect(rect, Paint()..color = Colors.white10);
|
|
super.render(canvas);
|
|
}
|
|
}
|