2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2025-02-18 15:08:36 +00:00
bevy/examples/2d/text2d.rs
Marco Buono 8e3db957c5
Add the ability to control font smoothing ()
# Objective

- Fixes 
- 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()
});
```
![Screenshot 2024-09-22 at 12 33
39](https://github.com/user-attachments/assets/93e19672-b8c0-4cba-a8a3-4525fe2ae1cb)

<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()`
2024-09-23 17:28:25 +00:00

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;
}
}