mirror of
https://github.com/bevyengine/bevy
synced 2025-02-18 15:08:36 +00:00
# Objective - Fixes #10720 - Adds the ability to control font smoothing of rendered text ## Solution - Introduce the `FontSmoothing` enum, with two possible variants (`FontSmoothing::None` and `FontSmoothing::AntiAliased`): - This is based on `-webkit-font-smoothing`, in line with our practice of adopting CSS-like properties/names for UI; - I could have gone instead for the [`font-smooth` property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth) that's also supported by browsers, but didn't since it's also non-standard, has an uglier name, and doesn't allow controlling the type of antialias applied. - Having an enum instead of e.g. a boolean, leaves the path open for adding `FontSmoothing::SubpixelAntiAliased` in the future, without a breaking change; - Add all the necessary plumbing to get the `FontSmoothing` information to where we rasterize the glyphs and store them in the atlas; - Change the font atlas key to also take into account the smoothing setting, not only font and font size; - Since COSMIC Text [doesn't support controlling font smoothing](https://github.com/pop-os/cosmic-text/issues/279), we roll out our own threshold-based “implementation”: - This has the downside of **looking ugly for “regular” vector fonts** ⚠️, since it doesn't properly take the hinting information into account like a proper implementation on the rasterizer side would. - However, **for fonts that have been specifically authored to be pixel fonts, (a common use case in games!) this is not as big of a problem**, since all lines are vertical/horizontal, and close to the final pixel boundaries (as long as the font is used at a multiple of the size originally intended by the author) - Once COSMIC exposes this functionality, we can switch to using it directly, and get better results; - Use a nearest neighbor sampler for atlases with font smoothing disabled, so that you can scale the text via transform and still get the pixelated look; - Add a convenience method to `Text` for setting the font smoothing; - Add a demonstration of using the `FontSmoothing` property to the `text2d` example. ## Testing - Did you test these changes? If so, how? - Yes. Via the `text2d`example, and also in my game. - Are there any parts that need more testing? - I'd like help from someone for testing this on devices/OSs with fractional scaling (Android/Windows) - How can other people (reviewers) test your changes? Is there anything specific they need to know? - Both via the `text2d` example and also by using it directly on your projects. - If relevant, what platforms did you test these changes on, and are there any important ones you can't test? - macOS --- ## Showcase ```rust commands.spawn(Text2dBundle { text: Text::from_section("Hello, World!", default()) .with_font_smoothing(FontSmoothing::None), ..default() }); ```  <img width="740" alt="image" src="https://github.com/user-attachments/assets/b881b02c-4e43-410b-902f-6985c25140fc"> ## Migration Guide - `Text` now contains a `font_smoothing: FontSmoothing` property, make sure to include it or add `..default()` when using the struct directly; - `FontSizeKey` has been renamed to `FontAtlasKey`, and now also contains the `FontSmoothing` setting; - The following methods now take an extra `font_smoothing: FontSmoothing` argument: - `FontAtlas::new()` - `FontAtlasSet::add_glyph_to_atlas()` - `FontAtlasSet::get_glyph_atlas_info()` - `FontAtlasSet::get_outlined_glyph_texture()`
203 lines
6.7 KiB
Rust
203 lines
6.7 KiB
Rust
//! Shows text rendering with moving, rotating and scaling text.
|
|
//!
|
|
//! Note that this uses [`Text2dBundle`] to display text alongside your other entities in a 2D scene.
|
|
//!
|
|
//! For an example on how to render text as part of a user interface, independent from the world
|
|
//! viewport, you may want to look at `games/contributors.rs` or `ui/text.rs`.
|
|
|
|
use bevy::{
|
|
color::palettes::css::*,
|
|
math::ops,
|
|
prelude::*,
|
|
sprite::Anchor,
|
|
text::{BreakLineOn, FontSmoothing, TextBounds},
|
|
};
|
|
|
|
fn main() {
|
|
App::new()
|
|
.add_plugins(DefaultPlugins)
|
|
.add_systems(Startup, setup)
|
|
.add_systems(
|
|
Update,
|
|
(animate_translation, animate_rotation, animate_scale),
|
|
)
|
|
.run();
|
|
}
|
|
|
|
#[derive(Component)]
|
|
struct AnimateTranslation;
|
|
|
|
#[derive(Component)]
|
|
struct AnimateRotation;
|
|
|
|
#[derive(Component)]
|
|
struct AnimateScale;
|
|
|
|
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|
let font = asset_server.load("fonts/FiraSans-Bold.ttf");
|
|
let text_style = TextStyle {
|
|
font: font.clone(),
|
|
font_size: 50.0,
|
|
..default()
|
|
};
|
|
let text_justification = JustifyText::Center;
|
|
// 2d camera
|
|
commands.spawn(Camera2dBundle::default());
|
|
// Demonstrate changing translation
|
|
commands.spawn((
|
|
Text2dBundle {
|
|
text: Text::from_section("translation", text_style.clone())
|
|
.with_justify(text_justification),
|
|
..default()
|
|
},
|
|
AnimateTranslation,
|
|
));
|
|
// Demonstrate changing rotation
|
|
commands.spawn((
|
|
Text2dBundle {
|
|
text: Text::from_section("rotation", text_style.clone())
|
|
.with_justify(text_justification),
|
|
..default()
|
|
},
|
|
AnimateRotation,
|
|
));
|
|
// Demonstrate changing scale
|
|
commands.spawn((
|
|
Text2dBundle {
|
|
text: Text::from_section("scale", text_style).with_justify(text_justification),
|
|
transform: Transform::from_translation(Vec3::new(400.0, 0.0, 0.0)),
|
|
..default()
|
|
},
|
|
AnimateScale,
|
|
));
|
|
// Demonstrate text wrapping
|
|
let slightly_smaller_text_style = TextStyle {
|
|
font,
|
|
font_size: 35.0,
|
|
..default()
|
|
};
|
|
let box_size = Vec2::new(300.0, 200.0);
|
|
let box_position = Vec2::new(0.0, -250.0);
|
|
commands
|
|
.spawn(SpriteBundle {
|
|
sprite: Sprite {
|
|
color: Color::srgb(0.25, 0.25, 0.75),
|
|
custom_size: Some(Vec2::new(box_size.x, box_size.y)),
|
|
..default()
|
|
},
|
|
transform: Transform::from_translation(box_position.extend(0.0)),
|
|
..default()
|
|
})
|
|
.with_children(|builder| {
|
|
builder.spawn(Text2dBundle {
|
|
text: Text {
|
|
sections: vec![TextSection::new(
|
|
"this text wraps in the box\n(Unicode linebreaks)",
|
|
slightly_smaller_text_style.clone(),
|
|
)],
|
|
justify: JustifyText::Left,
|
|
linebreak_behavior: BreakLineOn::WordBoundary,
|
|
..default()
|
|
},
|
|
// Wrap text in the rectangle
|
|
text_2d_bounds: TextBounds::from(box_size),
|
|
// ensure the text is drawn on top of the box
|
|
transform: Transform::from_translation(Vec3::Z),
|
|
..default()
|
|
});
|
|
});
|
|
|
|
let other_box_size = Vec2::new(300.0, 200.0);
|
|
let other_box_position = Vec2::new(320.0, -250.0);
|
|
commands
|
|
.spawn(SpriteBundle {
|
|
sprite: Sprite {
|
|
color: Color::srgb(0.20, 0.3, 0.70),
|
|
custom_size: Some(Vec2::new(other_box_size.x, other_box_size.y)),
|
|
..default()
|
|
},
|
|
transform: Transform::from_translation(other_box_position.extend(0.0)),
|
|
..default()
|
|
})
|
|
.with_children(|builder| {
|
|
builder.spawn(Text2dBundle {
|
|
text: Text {
|
|
sections: vec![TextSection::new(
|
|
"this text wraps in the box\n(AnyCharacter linebreaks)",
|
|
slightly_smaller_text_style.clone(),
|
|
)],
|
|
justify: JustifyText::Left,
|
|
linebreak_behavior: BreakLineOn::AnyCharacter,
|
|
..default()
|
|
},
|
|
// Wrap text in the rectangle
|
|
text_2d_bounds: TextBounds::from(other_box_size),
|
|
// ensure the text is drawn on top of the box
|
|
transform: Transform::from_translation(Vec3::Z),
|
|
..default()
|
|
});
|
|
});
|
|
|
|
// Demonstrate font smoothing off
|
|
commands.spawn(Text2dBundle {
|
|
text: Text::from_section("FontSmoothing::None", slightly_smaller_text_style.clone())
|
|
.with_font_smoothing(FontSmoothing::None),
|
|
transform: Transform::from_translation(Vec3::new(-400.0, -250.0, 0.0)),
|
|
..default()
|
|
});
|
|
|
|
for (text_anchor, color) in [
|
|
(Anchor::TopLeft, Color::Srgba(RED)),
|
|
(Anchor::TopRight, Color::Srgba(LIME)),
|
|
(Anchor::BottomRight, Color::Srgba(BLUE)),
|
|
(Anchor::BottomLeft, Color::Srgba(YELLOW)),
|
|
] {
|
|
commands.spawn(Text2dBundle {
|
|
text: Text {
|
|
sections: vec![TextSection::new(
|
|
format!(" Anchor::{text_anchor:?} "),
|
|
TextStyle {
|
|
color,
|
|
..slightly_smaller_text_style.clone()
|
|
},
|
|
)],
|
|
..Default::default()
|
|
},
|
|
transform: Transform::from_translation(250. * Vec3::Y),
|
|
text_anchor,
|
|
..default()
|
|
});
|
|
}
|
|
}
|
|
|
|
fn animate_translation(
|
|
time: Res<Time>,
|
|
mut query: Query<&mut Transform, (With<Text>, With<AnimateTranslation>)>,
|
|
) {
|
|
for mut transform in &mut query {
|
|
transform.translation.x = 100.0 * ops::sin(time.elapsed_seconds()) - 400.0;
|
|
transform.translation.y = 100.0 * ops::cos(time.elapsed_seconds());
|
|
}
|
|
}
|
|
|
|
fn animate_rotation(
|
|
time: Res<Time>,
|
|
mut query: Query<&mut Transform, (With<Text>, With<AnimateRotation>)>,
|
|
) {
|
|
for mut transform in &mut query {
|
|
transform.rotation = Quat::from_rotation_z(ops::cos(time.elapsed_seconds()));
|
|
}
|
|
}
|
|
|
|
fn animate_scale(
|
|
time: Res<Time>,
|
|
mut query: Query<&mut Transform, (With<Text>, With<AnimateScale>)>,
|
|
) {
|
|
// Consider changing font-size instead of scaling the transform. Scaling a Text2D will scale the
|
|
// rendered quad, resulting in a pixellated look.
|
|
for mut transform in &mut query {
|
|
let scale = (ops::sin(time.elapsed_seconds()) + 1.1) * 2.0;
|
|
transform.scale.x = scale;
|
|
transform.scale.y = scale;
|
|
}
|
|
}
|