-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Toggleable UI layout rounding #16841
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Toggleable UI layout rounding #16841
Conversation
…ut rounding for a node and all its descendants. Added `LayoutConfig` to the node query used by the recursive update function and disable/enable rounding depending on its setting.
|
@MatrixDev can I get your review here please? |
@alice-i-cecile, sure, I'll try to do it later today. |
alice-i-cecile
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sad to add a branch here, but the use case in the linked issue is very reasonable.
|
@alice-i-cecile, I can confirm that it becomes significantly smoother with this change and no longer pixel-aligned. There is still one problem with bars but I don't know if it is related or not. All three bars (red, blue and yellow) are inside of the column with zero row_gap/colum_gap and ideally those should always stick to each other but sometimes there are gaps shown between them (in both with or without rounding): In any case, from my point of view, original issue is resolved now. |
|
Any reason to add this as a field to the new |
Yeah taffy's rounding api is really unpleasant with how this setting is used both to enable or disable rounding during updates, and then afterwards to access the unrounded values. I'll make a taffy PR as well with some alternative then we'd be able to clean this up too later. |
I'm not really sure. I'm not against using an enum or an |
…ng the function on both ok and error paths so state.
…/bevy into layout-rounding-toggle
Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
# Objective Allow users to enable or disable layout rounding for specific UI nodes and their descendants. Fixes bevyengine#16731 ## Solution New component `LayoutConfig` that can be added to any UiNode entity. Setting the `use_rounding` field of `LayoutConfig` determines if the Node and its descendants should be given rounded or unrounded coordinates. ## Testing Not tested this extensively but it seems to work and it's not very complicated. This really basic test app returns fractional coords: ```rust use bevy::prelude::*; fn main() { App::new() .add_plugins(DefaultPlugins) .add_systems(Startup, setup) .add_systems(Update, report) .run(); } fn setup(mut commands: Commands) { commands.spawn(Camera2d); commands.spawn(( Node { left: Val::Px(0.1), width: Val::Px(100.1), height: Val::Px(100.1), ..Default::default() }, LayoutConfig { use_rounding: false }, )); } fn report(node: Query<(Ref<ComputedNode>, &GlobalTransform)>) { for (c, g) in node.iter() { if c.is_changed() { println!("{:#?}", c); println!("position = {:?}", g.to_scale_rotation_translation().2); } } } ``` --------- Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com> Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
# Objective Allow users to enable or disable layout rounding for specific UI nodes and their descendants. Fixes bevyengine#16731 ## Solution New component `LayoutConfig` that can be added to any UiNode entity. Setting the `use_rounding` field of `LayoutConfig` determines if the Node and its descendants should be given rounded or unrounded coordinates. ## Testing Not tested this extensively but it seems to work and it's not very complicated. This really basic test app returns fractional coords: ```rust use bevy::prelude::*; fn main() { App::new() .add_plugins(DefaultPlugins) .add_systems(Startup, setup) .add_systems(Update, report) .run(); } fn setup(mut commands: Commands) { commands.spawn(Camera2d); commands.spawn(( Node { left: Val::Px(0.1), width: Val::Px(100.1), height: Val::Px(100.1), ..Default::default() }, LayoutConfig { use_rounding: false }, )); } fn report(node: Query<(Ref<ComputedNode>, &GlobalTransform)>) { for (c, g) in node.iter() { if c.is_changed() { println!("{:#?}", c); println!("position = {:?}", g.to_scale_rotation_translation().2); } } } ``` --------- Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com> Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>
# Objective Allow users to enable or disable layout rounding for specific UI nodes and their descendants. Fixes bevyengine#16731 ## Solution New component `LayoutConfig` that can be added to any UiNode entity. Setting the `use_rounding` field of `LayoutConfig` determines if the Node and its descendants should be given rounded or unrounded coordinates. ## Testing Not tested this extensively but it seems to work and it's not very complicated. This really basic test app returns fractional coords: ```rust use bevy::prelude::*; fn main() { App::new() .add_plugins(DefaultPlugins) .add_systems(Startup, setup) .add_systems(Update, report) .run(); } fn setup(mut commands: Commands) { commands.spawn(Camera2d); commands.spawn(( Node { left: Val::Px(0.1), width: Val::Px(100.1), height: Val::Px(100.1), ..Default::default() }, LayoutConfig { use_rounding: false }, )); } fn report(node: Query<(Ref<ComputedNode>, &GlobalTransform)>) { for (c, g) in node.iter() { if c.is_changed() { println!("{:#?}", c); println!("position = {:?}", g.to_scale_rotation_translation().2); } } } ``` --------- Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com> Co-authored-by: UkoeHB <37489173+UkoeHB@users.noreply.github.com>






Objective
Allow users to enable or disable layout rounding for specific UI nodes and their descendants.
Fixes #16731
Solution
New component
LayoutConfigthat can be added to any UiNode entity. Setting theuse_roundingfield ofLayoutConfigdetermines if the Node and its descendants should be given rounded or unrounded coordinates.Testing
Not tested this extensively but it seems to work and it's not very complicated.
This really basic test app returns fractional coords: