From e6d09471dd9590f145ea2b7150fa07dc23d3139d Mon Sep 17 00:00:00 2001 From: Ickshonpe Date: Tue, 22 Nov 2022 01:03:49 +0000 Subject: [PATCH 01/20] fixed extract_text_uinodes offset alignment bug --- crates/bevy_ui/src/render/mod.rs | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs index e7bc5cf6f78cf..7ae1c8c410281 100644 --- a/crates/bevy_ui/src/render/mod.rs +++ b/crates/bevy_ui/src/render/mod.rs @@ -25,7 +25,7 @@ use bevy_render::{ Extract, RenderApp, RenderStage, }; use bevy_sprite::{SpriteAssetEvents, TextureAtlas}; -use bevy_text::{Text, TextLayoutInfo}; +use bevy_text::{HorizontalAlign, Text, TextLayoutInfo, VerticalAlign}; use bevy_transform::components::GlobalTransform; use bevy_utils::FloatOrd; use bevy_utils::HashMap; @@ -344,9 +344,19 @@ pub fn extract_text_uinodes( if uinode.size() == Vec2::ZERO { continue; } - let text_glyphs = &text_layout_info.glyphs; - let alignment_offset = (uinode.size() / -2.0).extend(0.0); + let alignment_offset = (match text.alignment.vertical { + VerticalAlign::Center => -0.5 * text_layout_info.size.y, + VerticalAlign::Top => -0.5 * uinode.size().y, + VerticalAlign::Bottom => 0.5 * uinode.size().y - text_layout_info.size.y, + } * Vec3::Y) + + (match text.alignment.horizontal { + HorizontalAlign::Left => -0.5 * uinode.size().x, + HorizontalAlign::Center => -0.5 * text_layout_info.size.x, + HorizontalAlign::Right => 0.5 * uinode.size().x - text_layout_info.size.x, + } * Vec3::X); + + let text_glyphs = &text_layout_info.glyphs; let mut color = Color::WHITE; let mut current_section = usize::MAX; for text_glyph in text_glyphs { @@ -366,6 +376,7 @@ pub fn extract_text_uinodes( let atlas_size = Some(atlas.size); // NOTE: Should match `bevy_text::text2d::extract_text2d_sprite` + let extracted_transform = global_transform.compute_matrix() * Mat4::from_scale(Vec3::splat(scale_factor.recip())) * Mat4::from_translation( From bcb16c0972cd8353d53ded69b113b4f0cd666bd7 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Tue, 22 Nov 2022 01:48:35 +0000 Subject: [PATCH 02/20] Update crates/bevy_ui/src/render/mod.rs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: François --- crates/bevy_ui/src/render/mod.rs | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs index 58733e12619f7..0a4889e7306be 100644 --- a/crates/bevy_ui/src/render/mod.rs +++ b/crates/bevy_ui/src/render/mod.rs @@ -327,16 +327,19 @@ pub fn extract_text_uinodes( continue; } - let alignment_offset = (match text.alignment.vertical { - VerticalAlign::Center => -0.5 * text_layout_info.size.y, - VerticalAlign::Top => -0.5 * uinode.size().y, - VerticalAlign::Bottom => 0.5 * uinode.size().y - text_layout_info.size.y, - } * Vec3::Y) - + (match text.alignment.horizontal { + let alignment_offset = Vec2::new( + match text.alignment.horizontal { HorizontalAlign::Left => -0.5 * uinode.size().x, HorizontalAlign::Center => -0.5 * text_layout_info.size.x, HorizontalAlign::Right => 0.5 * uinode.size().x - text_layout_info.size.x, - } * Vec3::X); + }, + match text.alignment.vertical { + VerticalAlign::Center => -0.5 * text_layout_info.size.y, + VerticalAlign::Top => -0.5 * uinode.size().y, + VerticalAlign::Bottom => 0.5 * uinode.size().y - text_layout_info.size.y, + }, + ) + .extend(0.0); let text_glyphs = &text_layout_info.glyphs; let mut color = Color::WHITE; From a1ec7acc99051dc284166ca2bbae2d4fc54ea5f7 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Tue, 22 Nov 2022 02:01:23 +0000 Subject: [PATCH 03/20] Update mod.rs --- crates/bevy_ui/src/render/mod.rs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs index 0a4889e7306be..f7a61708ce2c0 100644 --- a/crates/bevy_ui/src/render/mod.rs +++ b/crates/bevy_ui/src/render/mod.rs @@ -327,7 +327,7 @@ pub fn extract_text_uinodes( continue; } - let alignment_offset = Vec2::new( + let alignment_offset = Vec3::new( match text.alignment.horizontal { HorizontalAlign::Left => -0.5 * uinode.size().x, HorizontalAlign::Center => -0.5 * text_layout_info.size.x, @@ -338,8 +338,8 @@ pub fn extract_text_uinodes( VerticalAlign::Top => -0.5 * uinode.size().y, VerticalAlign::Bottom => 0.5 * uinode.size().y - text_layout_info.size.y, }, - ) - .extend(0.0); + 0.0 + ); let text_glyphs = &text_layout_info.glyphs; let mut color = Color::WHITE; From 6b9473ace69e033123c5ec5adeb6da56807da13c Mon Sep 17 00:00:00 2001 From: Ickshonpe Date: Tue, 22 Nov 2022 07:21:54 +0000 Subject: [PATCH 04/20] cargo fmt --all --- crates/bevy_ui/src/render/mod.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs index f7a61708ce2c0..256c2bfd6d6ba 100644 --- a/crates/bevy_ui/src/render/mod.rs +++ b/crates/bevy_ui/src/render/mod.rs @@ -338,7 +338,7 @@ pub fn extract_text_uinodes( VerticalAlign::Top => -0.5 * uinode.size().y, VerticalAlign::Bottom => 0.5 * uinode.size().y - text_layout_info.size.y, }, - 0.0 + 0.0, ); let text_glyphs = &text_layout_info.glyphs; From feebad61111fd492cfb875abac2b1d5f1eac17e9 Mon Sep 17 00:00:00 2001 From: Ickshonpe Date: Tue, 22 Nov 2022 10:19:07 +0000 Subject: [PATCH 05/20] fix alignment offset being multiplied by scale twice --- crates/bevy_ui/src/render/mod.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs index 256c2bfd6d6ba..999d65f761524 100644 --- a/crates/bevy_ui/src/render/mod.rs +++ b/crates/bevy_ui/src/render/mod.rs @@ -365,7 +365,7 @@ pub fn extract_text_uinodes( let extracted_transform = global_transform.compute_matrix() * Mat4::from_scale(Vec3::splat(scale_factor.recip())) * Mat4::from_translation( - alignment_offset * scale_factor + text_glyph.position.extend(0.), + alignment_offset + text_glyph.position.extend(0.), ); extracted_uinodes.uinodes.push(ExtractedUiNode { From 28efa7c604f149246ed099ec58f77aae09c45bc9 Mon Sep 17 00:00:00 2001 From: Ickshonpe Date: Tue, 22 Nov 2022 11:06:35 +0000 Subject: [PATCH 06/20] cargo fmt --all --- crates/bevy_ui/src/render/mod.rs | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs index 999d65f761524..df303ec9687d0 100644 --- a/crates/bevy_ui/src/render/mod.rs +++ b/crates/bevy_ui/src/render/mod.rs @@ -364,9 +364,7 @@ pub fn extract_text_uinodes( let extracted_transform = global_transform.compute_matrix() * Mat4::from_scale(Vec3::splat(scale_factor.recip())) - * Mat4::from_translation( - alignment_offset + text_glyph.position.extend(0.), - ); + * Mat4::from_translation(alignment_offset + text_glyph.position.extend(0.)); extracted_uinodes.uinodes.push(ExtractedUiNode { stack_index, From b7d9aa37b72b78c09ae6f080806b1189bee8a178 Mon Sep 17 00:00:00 2001 From: Ickshonpe Date: Thu, 24 Nov 2022 09:31:26 +0000 Subject: [PATCH 07/20] removed the comment "// NOTE: Should match `bevy_text::text2d::extract_text2d_sprite`" --- crates/bevy_ui/src/render/mod.rs | 2 -- 1 file changed, 2 deletions(-) diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs index df303ec9687d0..7e0221f8425ea 100644 --- a/crates/bevy_ui/src/render/mod.rs +++ b/crates/bevy_ui/src/render/mod.rs @@ -360,8 +360,6 @@ pub fn extract_text_uinodes( let rect = atlas.textures[index]; let atlas_size = Some(atlas.size); - // NOTE: Should match `bevy_text::text2d::extract_text2d_sprite` - let extracted_transform = global_transform.compute_matrix() * Mat4::from_scale(Vec3::splat(scale_factor.recip())) * Mat4::from_translation(alignment_offset + text_glyph.position.extend(0.)); From 75a2d8c8d6557b5d7b3528ddddc96c8c1c05f1bc Mon Sep 17 00:00:00 2001 From: Ickshonpe Date: Thu, 24 Nov 2022 14:02:03 +0000 Subject: [PATCH 08/20] added text alignment example --- Cargo.toml | 4 ++ examples/README.md | 1 + examples/ui/text_alignment.rs | 84 +++++++++++++++++++++++++++++++++++ 3 files changed, 89 insertions(+) create mode 100644 examples/ui/text_alignment.rs diff --git a/Cargo.toml b/Cargo.toml index 97069bad9ab00..5251f760d9efb 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1472,6 +1472,10 @@ description = "Illustrates creating and updating text" category = "UI (User Interface)" wasm = true +[[example]] +name = "text_alignment" +path = "examples/ui/text_alignment.rs" + [[example]] name = "text_debug" path = "examples/ui/text_debug.rs" diff --git a/examples/README.md b/examples/README.md index e354e6f283120..7abebfd2787d8 100644 --- a/examples/README.md +++ b/examples/README.md @@ -314,6 +314,7 @@ Example | Description [Button](../examples/ui/button.rs) | Illustrates creating and updating a button [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally) [Text](../examples/ui/text.rs) | Illustrates creating and updating text +[Text Alignment](../examples/ui/text_alignment.rs)| Demonstrates how text is displayed with each TextAlignment [Text Debug](../examples/ui/text_debug.rs) | An example for debugging text layout [Transparency UI](../examples/ui/transparency_ui.rs) | Demonstrates transparency for UI [UI](../examples/ui/ui.rs) | Illustrates various features of Bevy UI diff --git a/examples/ui/text_alignment.rs b/examples/ui/text_alignment.rs new file mode 100644 index 0000000000000..955a449bea742 --- /dev/null +++ b/examples/ui/text_alignment.rs @@ -0,0 +1,84 @@ +//! This example demonstrates how text is displayed with each TextAlignment + +use bevy::prelude::*; + +const ALIGNMENTS: [TextAlignment; 9] = [ + TextAlignment::TOP_LEFT, + TextAlignment::TOP_CENTER, + TextAlignment::TOP_RIGHT, + TextAlignment::CENTER_LEFT, + TextAlignment::CENTER, + TextAlignment::CENTER_RIGHT, + TextAlignment::BOTTOM_LEFT, + TextAlignment::BOTTOM_CENTER, + TextAlignment::BOTTOM_RIGHT, +]; + +fn main() { + App::new() + .add_plugins(DefaultPlugins) + .add_startup_system(setup) + .add_system(update) + .run(); +} +fn setup(mut commands: Commands, asset_server: Res) { + let font = asset_server.load("fonts/FiraSans-Bold.ttf"); + let text_style = TextStyle { + font: font.clone(), + font_size: 24.0, + color: Color::WHITE, + }; + + commands.insert_resource(UiScale{ scale: 0.5 }); + commands.spawn(Camera2dBundle::default()); + commands.spawn(NodeBundle { + style: Style { + align_items: AlignItems::Center, + justify_content: JustifyContent::Center, + size: Size::new(Val::Percent(100.), Val::Percent(100.)), + ..Default::default() + }, + ..Default::default() + }).with_children(|builder| { + builder.spawn(NodeBundle { + style: Style { + size: Size::new(Val::Percent(80.), Val::Percent(80.)), + ..Default::default() + }, + background_color: BackgroundColor(Color::NAVY), + ..Default::default() + }).with_children(|builder| { + builder.spawn(TextBundle { + text: Text::from_section( + "".to_string(), + text_style.clone() + ), + ..Default::default() + }); + }); + }); +} + +pub fn update( + mut t: Local, + mut i: Local, + mut uiscale: ResMut, + time: Res