mirror of
https://github.com/flame-engine/flame.git
synced 2025-10-31 00:48:47 +08:00
1a64443cca
This is part of my ongoing effort to simplify the text rendering pipeline. My ultimate goal is to: * get rid of renders * rename formatters to renderers * make the interface complies to both All details are specified here: https://github.com/flame-engine/flame/pull/2663 As a first step to break down that huge PR, this makes a small change to TextElements to make them more useful This PR will: ### rename render -> draw draw becomes the "internal", underlying impl, raw method, that just draws the element w/ any custom options ### add a new render method that takes in more options this does not need to be extended by every impl. this is for end users and accepts parameters like position and anchor to be more in line with the renderer interface This is technically a breaking change but should have no effect for users, unless you are creating your own custom `TextElement`s. In that case, to migrate: * rename your `render` method to `draw`
79 lines
2.6 KiB
Dart
79 lines
2.6 KiB
Dart
import 'package:flame/components.dart';
|
|
import 'package:flame/game.dart';
|
|
import 'package:flame/text.dart';
|
|
import 'package:flutter/painting.dart';
|
|
|
|
class RichTextExample extends FlameGame {
|
|
static String description = 'A non-interactive example of how to render rich '
|
|
'text in Flame.';
|
|
|
|
@override
|
|
Color backgroundColor() => const Color(0xFF888888);
|
|
|
|
@override
|
|
Future<void> onLoad() async {
|
|
add(MyTextComponent()..position = Vector2(100, 50));
|
|
}
|
|
}
|
|
|
|
class MyTextComponent extends PositionComponent {
|
|
late final Element element;
|
|
|
|
@override
|
|
Future<void> onLoad() async {
|
|
final style = DocumentStyle(
|
|
width: 400,
|
|
height: 200,
|
|
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 14),
|
|
background: BackgroundStyle(
|
|
color: const Color(0xFF4E322E),
|
|
borderColor: const Color(0xFF000000),
|
|
borderWidth: 2.0,
|
|
),
|
|
paragraph: BlockStyle(
|
|
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
|
|
background: BackgroundStyle(
|
|
color: const Color(0xFF004D40),
|
|
borderColor: const Color(0xFFAAAAAA),
|
|
),
|
|
),
|
|
);
|
|
final document = DocumentNode([
|
|
HeaderNode.simple('1984', level: 1),
|
|
ParagraphNode.simple(
|
|
'Anything could be true. The so-called laws of nature were nonsense.',
|
|
),
|
|
ParagraphNode.simple(
|
|
'The law of gravity was nonsense. "If I wished," O\'Brien had said, '
|
|
'"I could float off this floor like a soap bubble." Winston worked it '
|
|
'out. "If he thinks he floats off the floor, and I simultaneously '
|
|
'think I can see him do it, then the thing happens."',
|
|
),
|
|
ParagraphNode.group([
|
|
PlainTextNode(
|
|
'Suddenly, like a lump of submerged wreckage breaking the surface '
|
|
'of water, the thought burst into his mind: '),
|
|
ItalicTextNode.group([
|
|
PlainTextNode('"It doesn\'t really happen. We imagine it. It is '),
|
|
BoldTextNode.simple('hallucination'),
|
|
PlainTextNode('."'),
|
|
]),
|
|
]),
|
|
ParagraphNode.simple(
|
|
'He pushed the thought under instantly. The fallacy was obvious. It '
|
|
'presupposed that somewhere or other, outside oneself, there was a '
|
|
'"real" world where "real" things happened. But how could there be '
|
|
'such a world? What knowledge have we of anything, save through our '
|
|
'own minds? All happenings are in the mind. Whatever happens in all '
|
|
'minds, truly happens.',
|
|
),
|
|
]);
|
|
element = document.format(style);
|
|
}
|
|
|
|
@override
|
|
void render(Canvas canvas) {
|
|
element.draw(canvas);
|
|
}
|
|
}
|