mirror of
https://github.com/flame-engine/flame.git
synced 2025-10-30 00:17:20 +08:00
bfdc3a291b
This PR introduces the notions of structured text, and text styles, to support rendering of rich text bodies. Specifically, we recognize that sometimes in games one needs to render pieces of text that are larger than a single word or even a single paragraph. These pieces may include: books, quest descriptions, mission objectives, tutorials, in-game help system, dialogues, etc. Rendering such a piece of text is non-trivial, however. In order to tackle this problem, I break into the following parts: Text structure, represented as a tree of Nodes. The nodes describe the logical structure of the text, for example the document may contain a header, and then several paragraphs, and a list, where the list contains some list items, some of which having possibly several paragraphs, etc. This structure is similar to how in HTML the text is marked up with HTML tags. Text styles are struct-like classes that contain properties describing how the text is to be styled: font size, font renderer, borders, backgrounds, margins, padding, etc. This representation is also tree-like, so that for example text inside paragraphs can have different style than text within headers, and paragraphs within lists can have different margins. A text style is similar to a stylesheet in HTML. Text elements are the result of applying the document style to a document node: they are the "prepared" and laid out pieces, ready to be rendered. Elements are a bit like mini-components, or perhaps text "particles" in a particle system.
71 lines
2.5 KiB
Dart
71 lines
2.5 KiB
Dart
import 'package:dashbook/dashbook.dart';
|
|
import 'package:examples/commons/commons.dart';
|
|
import 'package:examples/stories/rendering/flip_sprite_example.dart';
|
|
import 'package:examples/stories/rendering/isometric_tile_map_example.dart';
|
|
import 'package:examples/stories/rendering/layers_example.dart';
|
|
import 'package:examples/stories/rendering/nine_tile_box_example.dart';
|
|
import 'package:examples/stories/rendering/particles_example.dart';
|
|
import 'package:examples/stories/rendering/particles_interactive_example.dart';
|
|
import 'package:examples/stories/rendering/rich_text_example.dart';
|
|
import 'package:examples/stories/rendering/text_example.dart';
|
|
import 'package:flame/game.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
void addRenderingStories(Dashbook dashbook) {
|
|
dashbook.storiesOf('Rendering')
|
|
..add(
|
|
'Text',
|
|
(_) => GameWidget(game: TextExample()),
|
|
codeLink: baseLink('rendering/text_example.dart'),
|
|
info: TextExample.description,
|
|
)
|
|
..add(
|
|
'Isometric Tile Map',
|
|
(_) => GameWidget(game: IsometricTileMapExample()),
|
|
codeLink: baseLink('rendering/isometric_tile_map_example.dart'),
|
|
info: IsometricTileMapExample.description,
|
|
)
|
|
..add(
|
|
'Nine Tile Box',
|
|
(_) => GameWidget(game: NineTileBoxExample()),
|
|
codeLink: baseLink('rendering/nine_tile_box_example.dart'),
|
|
info: NineTileBoxExample.description,
|
|
)
|
|
..add(
|
|
'Flip Sprite',
|
|
(_) => GameWidget(game: FlipSpriteExample()),
|
|
codeLink: baseLink('rendering/flip_sprite_example.dart'),
|
|
info: FlipSpriteExample.description,
|
|
)
|
|
..add(
|
|
'Layers',
|
|
(_) => GameWidget(game: LayerExample()),
|
|
codeLink: baseLink('rendering/layers_example.dart'),
|
|
info: LayerExample.description,
|
|
)
|
|
..add(
|
|
'Particles',
|
|
(_) => GameWidget(game: ParticlesExample()),
|
|
codeLink: baseLink('rendering/particles_example.dart'),
|
|
info: ParticlesExample.description,
|
|
)
|
|
..add(
|
|
'Particles (Interactive)',
|
|
(context) => GameWidget(
|
|
game: ParticlesInteractiveExample(
|
|
from: context.colorProperty('From color', Colors.pink),
|
|
to: context.colorProperty('To color', Colors.blue),
|
|
zoom: context.numberProperty('Zoom', 1),
|
|
),
|
|
),
|
|
codeLink: baseLink('rendering/particles_interactive_example.dart'),
|
|
info: ParticlesInteractiveExample.description,
|
|
)
|
|
..add(
|
|
'Rich Text',
|
|
(_) => GameWidget(game: RichTextExample()),
|
|
codeLink: baseLink('rendering/rich_text_example.dart'),
|
|
info: RichTextExample.description,
|
|
);
|
|
}
|