 8e3db957c5
			
		
	
	
		8e3db957c5
		
			
		
	
	
	
	
		
			
			# 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()`
		
			
				
	
	
		
			204 lines
		
	
	
		
			6.7 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
			
		
		
	
	
			204 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;
 | |
|     }
 | |
| }
 |