mirror of
https://github.com/flame-engine/flame.git
synced 2025-10-31 00:48:47 +08:00
4b420b7952
This occurred to me after a discussion on the [new FCS component PR](https://github.com/flame-engine/flame/pull/2694#discussion_r1312450113). As per usual, @spydon has opened my eyes to the ultimate truth: We should rename loads of files, and it shall affect almost no one. The idea is to (1) add a "Text" prefix to all text-rendering-related classes and (2) rename the existing `Text*` to `InlineText*` (which is what they are). This PR is a bit big, but the changes should hopefully be simple to review, and can be broken down into: * Add a proper base class for the node inheritance chain, call it TextNode (while working on Flame Markdown I realized the value this will have to me) * Rename the old TextNode to InlineTextNode * Rename DocumentNode to DocumentRoot because it is not a node * Rename Element to TextElement * Rename the old TextElement to InlineTextElement * Rename Style to FlameTextStyle (note: we could consider dropping the Flame here) * Rename the old FlameTextStyle to InlineTextStyle * Update the docs accordingly * Add some more diagrams and explanations to the docs, following the new nomenclature * I also updated our "internal" imports to use the text module to make life so much easier (this could arguably be done in a separate PR, but I honestly think it's easier to review together, please lmk if you prefer me to split). These are all breaking changes but likely won't actually affect most users (see below). While this is breaking, it should hopefully not affect most users, because these are all infrastructure classes that most people aren't using directly. If you are using the FCS components, or the renderers `TextPaint` or `SpriteFontRenderer` directly, this should have zero effect to you. If you are using the Nodes, Stlyes or Elements directly, or have a custom TextRenderer, see below. Migrating should be a simple matter of renaming your type references: * from TextNode to InlineTextNode * from TextElement to InlineTextElement * from Element to TextElement * from FlameTextStyle to InlineTextStyle * from Style to FlameTextStyle Make sure to do it in the appropriate order not to cause any double-replace issues. If you are importing via the module `package:flame/text.dart`, which we highly encourage, you should not have to change any import statements whatsoever.
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 TextElement 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 = DocumentRoot([
|
|
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);
|
|
}
|
|
}
|