text2d/
text2d.rs

1//! Shows text rendering with moving, rotating and scaling text.
2//!
3//! Note that this uses [`Text2d`] to display text alongside your other entities in a 2D scene.
4//!
5//! For an example on how to render text as part of a user interface, independent from the world
6//! viewport, you may want to look at `games/contributors.rs` or `ui/text.rs`.
7
8use bevy::{
9    color::palettes::css::*,
10    math::ops,
11    prelude::*,
12    sprite::{Anchor, Text2dShadow},
13    text::{FontSmoothing, LineBreak, TextBounds},
14};
15
16fn main() {
17    App::new()
18        .add_plugins(DefaultPlugins)
19        .add_systems(Startup, setup)
20        .add_systems(
21            Update,
22            (animate_translation, animate_rotation, animate_scale),
23        )
24        .run();
25}
26
27#[derive(Component)]
28struct AnimateTranslation;
29
30#[derive(Component)]
31struct AnimateRotation;
32
33#[derive(Component)]
34struct AnimateScale;
35
36fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
37    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
38    let text_font = TextFont {
39        font: font.clone(),
40        font_size: 50.0,
41        ..default()
42    };
43    let text_justification = Justify::Center;
44    commands.spawn(Camera2d);
45    // Demonstrate changing translation
46    commands.spawn((
47        Text2d::new(" translation "),
48        text_font.clone(),
49        TextLayout::new_with_justify(text_justification),
50        TextBackgroundColor(Color::BLACK.with_alpha(0.5)),
51        Text2dShadow::default(),
52        AnimateTranslation,
53    ));
54    // Demonstrate changing rotation
55    commands.spawn((
56        Text2d::new(" rotation "),
57        text_font.clone(),
58        TextLayout::new_with_justify(text_justification),
59        TextBackgroundColor(Color::BLACK.with_alpha(0.5)),
60        Text2dShadow::default(),
61        AnimateRotation,
62    ));
63    // Demonstrate changing scale
64    commands.spawn((
65        Text2d::new(" scale "),
66        text_font,
67        TextLayout::new_with_justify(text_justification),
68        Transform::from_translation(Vec3::new(400.0, 0.0, 0.0)),
69        TextBackgroundColor(Color::BLACK.with_alpha(0.5)),
70        Text2dShadow::default(),
71        AnimateScale,
72    ));
73    // Demonstrate text wrapping
74    let slightly_smaller_text_font = TextFont {
75        font,
76        font_size: 35.0,
77        ..default()
78    };
79    let box_size = Vec2::new(300.0, 200.0);
80    let box_position = Vec2::new(0.0, -250.0);
81    let box_color = Color::srgb(0.25, 0.25, 0.55);
82    let text_shadow_color = box_color.darker(0.05);
83    commands.spawn((
84        Sprite::from_color(Color::srgb(0.25, 0.25, 0.55), box_size),
85        Transform::from_translation(box_position.extend(0.0)),
86        children![(
87            Text2d::new("this text wraps in the box\n(Unicode linebreaks)"),
88            slightly_smaller_text_font.clone(),
89            TextLayout::new(Justify::Left, LineBreak::WordBoundary),
90            // Wrap text in the rectangle
91            TextBounds::from(box_size),
92            // Ensure the text is drawn on top of the box
93            Transform::from_translation(Vec3::Z),
94            // Add a shadow to the text
95            Text2dShadow {
96                color: text_shadow_color,
97                ..default()
98            },
99        )],
100    ));
101
102    let other_box_size = Vec2::new(300.0, 200.0);
103    let other_box_position = Vec2::new(320.0, -250.0);
104    commands.spawn((
105        Sprite::from_color(Color::srgb(0.25, 0.25, 0.55), other_box_size),
106        Transform::from_translation(other_box_position.extend(0.0)),
107        children![(
108            Text2d::new("this text wraps in the box\n(AnyCharacter linebreaks)"),
109            slightly_smaller_text_font.clone(),
110            TextLayout::new(Justify::Left, LineBreak::AnyCharacter),
111            // Wrap text in the rectangle
112            TextBounds::from(other_box_size),
113            // Ensure the text is drawn on top of the box
114            Transform::from_translation(Vec3::Z),
115            // Add a shadow to the text
116            Text2dShadow {
117                color: text_shadow_color,
118                ..default()
119            }
120        )],
121    ));
122
123    // Demonstrate font smoothing off
124    commands.spawn((
125        Text2d::new("This text has\nFontSmoothing::None\nAnd Justify::Center"),
126        slightly_smaller_text_font
127            .clone()
128            .with_font_smoothing(FontSmoothing::None),
129        TextLayout::new_with_justify(Justify::Center),
130        Transform::from_translation(Vec3::new(-400.0, -250.0, 0.0)),
131        // Add a black shadow to the text
132        Text2dShadow::default(),
133    ));
134
135    let make_child = move |(text_anchor, color): (Anchor, Color)| {
136        (
137            Text2d::new(" Anchor".to_string()),
138            slightly_smaller_text_font.clone(),
139            text_anchor,
140            TextBackgroundColor(Color::WHITE.darker(0.8)),
141            Transform::from_translation(-1. * Vec3::Z),
142            children![
143                (
144                    TextSpan("::".to_string()),
145                    slightly_smaller_text_font.clone(),
146                    TextColor(LIGHT_GREY.into()),
147                    TextBackgroundColor(DARK_BLUE.into()),
148                ),
149                (
150                    TextSpan(format!("{text_anchor:?} ")),
151                    slightly_smaller_text_font.clone(),
152                    TextColor(color),
153                    TextBackgroundColor(color.darker(0.3)),
154                )
155            ],
156        )
157    };
158
159    commands.spawn((
160        Sprite {
161            color: Color::Srgba(LIGHT_CYAN),
162            custom_size: Some(Vec2::new(10., 10.)),
163            ..Default::default()
164        },
165        Transform::from_translation(250. * Vec3::Y),
166        children![
167            make_child((Anchor::TOP_LEFT, Color::Srgba(LIGHT_SALMON))),
168            make_child((Anchor::TOP_RIGHT, Color::Srgba(LIGHT_GREEN))),
169            make_child((Anchor::BOTTOM_RIGHT, Color::Srgba(LIGHT_BLUE))),
170            make_child((Anchor::BOTTOM_LEFT, Color::Srgba(LIGHT_YELLOW))),
171        ],
172    ));
173}
174
175fn animate_translation(
176    time: Res<Time>,
177    mut query: Query<&mut Transform, (With<Text2d>, With<AnimateTranslation>)>,
178) {
179    for mut transform in &mut query {
180        transform.translation.x = 100.0 * ops::sin(time.elapsed_secs()) - 400.0;
181        transform.translation.y = 100.0 * ops::cos(time.elapsed_secs());
182    }
183}
184
185fn animate_rotation(
186    time: Res<Time>,
187    mut query: Query<&mut Transform, (With<Text2d>, With<AnimateRotation>)>,
188) {
189    for mut transform in &mut query {
190        transform.rotation = Quat::from_rotation_z(ops::cos(time.elapsed_secs()));
191    }
192}
193
194fn animate_scale(
195    time: Res<Time>,
196    mut query: Query<&mut Transform, (With<Text2d>, With<AnimateScale>)>,
197) {
198    // Consider changing font-size instead of scaling the transform. Scaling a Text2D will scale the
199    // rendered quad, resulting in a pixellated look.
200    for mut transform in &mut query {
201        let scale = (ops::sin(time.elapsed_secs()) + 1.1) * 2.0;
202        transform.scale.x = scale;
203        transform.scale.y = scale;
204    }
205}
text2d/text2d.rs

text2d/
text2d.rs
