bevy/examples/testbed/ui_layout_rounding.rs
ickshonpe aab36f3951
UI anti-aliasing fix (#16181)
# Objective

UI Anti-aliasing is incorrectly implemented. It always uses an edge
radius of 0.25 logical pixels, and ignores the physical resolution. For
low dpi screens 0.25 is is too low and on higher dpi screens the
physical edge radius is much too large, resulting in visual artifacts.

## Solution

Multiply the distance by the scale factor in the `antialias` function so
that the edge radius stays constant in physical pixels.

## Testing

To see the problem really clearly run the button example with `UiScale`
set really high. With `UiScale(25.)` on main if you examine the button's
border you can see a thick gradient fading away from the edges:

<img width="127" alt="edgg"
src="https://github.com/user-attachments/assets/7c852030-c0e8-4aef-8d3e-768cb2464cab">

With this PR the edges are sharp and smooth at all scale factors: 

<img width="127" alt="edge"
src="https://github.com/user-attachments/assets/b3231140-1bbc-4a4f-a1d3-dde21f287988">
2024-11-13 21:41:02 +00:00

56 lines
1.8 KiB
Rust

//! Spawns a simple grid layout with nodes laid out covering a white background useful for catching layout rounding errors.
//! Any white lines seen are gaps in the layout are caused by coordinate rounding bugs.
use bevy::{
color::palettes::css::{DARK_BLUE, MAROON},
prelude::*,
ui::UiScale,
winit::WinitSettings,
};
fn main() {
App::new()
.add_plugins(DefaultPlugins)
.insert_resource(WinitSettings::desktop_app())
.insert_resource(UiScale(1.5))
.add_systems(Startup, setup)
.run();
}
fn setup(mut commands: Commands) {
commands.spawn((Camera2d, UiAntiAlias::On));
commands
.spawn((
Node {
display: Display::Grid,
width: Val::Percent(100.),
height: Val::Percent(100.),
grid_template_rows: vec![RepeatedGridTrack::fr(10, 1.)],
..Default::default()
},
BackgroundColor(Color::WHITE),
))
.with_children(|commands| {
for i in 2..12 {
commands
.spawn(Node {
display: Display::Grid,
grid_template_columns: vec![RepeatedGridTrack::fr(i, 1.)],
..Default::default()
})
.with_children(|commands| {
for _ in 0..i {
commands.spawn((
Node {
border: UiRect::all(Val::Px(5.)),
..Default::default()
},
BackgroundColor(MAROON.into()),
BorderColor(DARK_BLUE.into()),
));
}
});
}
});
}