mirror of
https://github.com/bevyengine/bevy
synced 2024-12-01 17:09:12 +00:00
9655acebb6
# Objective
After the UI layout is computed when the coordinates are converted back
from physical coordinates to logical coordinates the `UiScale` is
ignored. This results in a confusing situation where we have two
different systems of logical coordinates.
Example:
```rust
use bevy::prelude::*;
fn main() {
App::new()
.add_plugins(DefaultPlugins)
.add_systems(Startup, setup)
.add_systems(Update, update)
.run();
}
fn setup(mut commands: Commands, mut ui_scale: ResMut<UiScale>) {
ui_scale.scale = 4.;
commands.spawn(Camera2dBundle::default());
commands.spawn(NodeBundle {
style: Style {
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
width: Val::Percent(100.),
..Default::default()
},
..Default::default()
})
.with_children(|builder| {
builder.spawn(NodeBundle {
style: Style {
width: Val::Px(100.),
height: Val::Px(100.),
..Default::default()
},
background_color: Color::MAROON.into(),
..Default::default()
}).with_children(|builder| {
builder.spawn(TextBundle::from_section("", TextStyle::default());
});
});
}
fn update(
mut text_query: Query<(&mut Text, &Parent)>,
node_query: Query<Ref<Node>>,
) {
for (mut text, parent) in text_query.iter_mut() {
let node = node_query.get(parent.get()).unwrap();
if node.is_changed() {
text.sections[0].value = format!("size: {}", node.size());
}
}
}
```
result:
We asked for a 100x100 UI node but the Node's size is multiplied by the
value of `UiScale` to give a logical size of 400x400.
## Solution
Divide the output physical coordinates by `UiScale` in
`ui_layout_system` and multiply the logical viewport size by `UiScale`
when creating the projection matrix for the UI's `ExtractedView` in
`extract_default_ui_camera_view`.
---
## Changelog
* The UI layout's physical coordinates are divided by both the window
scale factor and `UiScale` when converting them back to logical
coordinates. The logical size of Ui nodes now matches the values given
to their size constraints.
* Multiply the logical viewport size by `UiScale` before creating the
projection matrix for the UI's `ExtractedView` in
`extract_default_ui_camera_view`.
* In `ui_focus_system` the cursor position returned from `Window` is
divided by `UiScale`.
* Added a scale factor parameter to `Node::physical_size` and
`Node::physical_rect`.
* The example `viewport_debug` now uses a `UiScale` of 2. to ensure that
viewport coordinates are working correctly with a non-unit `UiScale`.
## Migration Guide
Physical UI coordinates are now divided by both the `UiScale` and the
window's scale factor to compute the logical sizes and positions of UI
nodes.
This ensures that UI Node size and position values, held by the `Node`
and `GlobalTransform` components, conform to the same logical coordinate
system as the style constraints from which they are derived,
irrespective of the current `scale_factor` and `UiScale`.
---------
Co-authored-by: Carter Anderson <mcanders1@gmail.com>
247 lines
7.6 KiB
Rust
247 lines
7.6 KiB
Rust
//! A simple example for debugging viewport coordinates
|
|
//!
|
|
//! This example creates two uinode trees, one using viewport coordinates and one using pixel coordinates,
|
|
//! and then switches between them once per second using the `Display` style property.
|
|
//! If there are no problems both layouts should be identical, except for the color of the margin changing which is used to signal that the displayed uinode tree has changed
|
|
//! (red for viewport, yellow for pixel).
|
|
use bevy::prelude::*;
|
|
|
|
const PALETTE: [Color; 10] = [
|
|
Color::RED,
|
|
Color::YELLOW,
|
|
Color::WHITE,
|
|
Color::BEIGE,
|
|
Color::CYAN,
|
|
Color::CRIMSON,
|
|
Color::NAVY,
|
|
Color::AZURE,
|
|
Color::GREEN,
|
|
Color::BLACK,
|
|
];
|
|
|
|
#[derive(Component, Default, PartialEq)]
|
|
enum Coords {
|
|
#[default]
|
|
Viewport,
|
|
Pixel,
|
|
}
|
|
|
|
fn main() {
|
|
App::new()
|
|
.insert_resource(UiScale { scale: 2.0 })
|
|
.add_plugins(DefaultPlugins.set(WindowPlugin {
|
|
primary_window: Some(Window {
|
|
resolution: [1600., 1200.].into(),
|
|
title: "Viewport Coordinates Debug".to_string(),
|
|
resizable: false,
|
|
..Default::default()
|
|
}),
|
|
..Default::default()
|
|
}))
|
|
.add_systems(Startup, setup)
|
|
.add_systems(Update, update)
|
|
.run();
|
|
}
|
|
|
|
fn update(
|
|
mut timer: Local<f32>,
|
|
mut visible_tree: Local<Coords>,
|
|
time: Res<Time>,
|
|
mut coords_style_query: Query<(&Coords, &mut Style)>,
|
|
) {
|
|
*timer -= time.delta_seconds();
|
|
if *timer <= 0. {
|
|
*timer = 1.;
|
|
*visible_tree = match *visible_tree {
|
|
Coords::Viewport => Coords::Pixel,
|
|
Coords::Pixel => Coords::Viewport,
|
|
};
|
|
for (coords, mut style) in coords_style_query.iter_mut() {
|
|
style.display = if *coords == *visible_tree {
|
|
Display::Flex
|
|
} else {
|
|
Display::None
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
fn setup(mut commands: Commands) {
|
|
commands.spawn(Camera2dBundle::default());
|
|
spawn_with_viewport_coords(&mut commands);
|
|
spawn_with_pixel_coords(&mut commands);
|
|
}
|
|
|
|
fn spawn_with_viewport_coords(commands: &mut Commands) {
|
|
commands
|
|
.spawn((
|
|
NodeBundle {
|
|
style: Style {
|
|
width: Val::Vw(100.),
|
|
height: Val::Vh(100.),
|
|
border: UiRect::axes(Val::Vw(5.), Val::Vh(5.)),
|
|
flex_wrap: FlexWrap::Wrap,
|
|
..default()
|
|
},
|
|
border_color: PALETTE[0].into(),
|
|
..default()
|
|
},
|
|
Coords::Viewport,
|
|
))
|
|
.with_children(|builder| {
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Vw(30.),
|
|
height: Val::Vh(30.),
|
|
border: UiRect::all(Val::VMin(5.)),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[2].into(),
|
|
border_color: PALETTE[9].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Vw(60.),
|
|
height: Val::Vh(30.),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[3].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Vw(45.),
|
|
height: Val::Vh(30.),
|
|
border: UiRect::left(Val::VMax(45. / 2.)),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[4].into(),
|
|
border_color: PALETTE[8].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Vw(45.),
|
|
height: Val::Vh(30.),
|
|
border: UiRect::right(Val::VMax(45. / 2.)),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[5].into(),
|
|
border_color: PALETTE[8].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Vw(60.),
|
|
height: Val::Vh(30.),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[6].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Vw(30.),
|
|
height: Val::Vh(30.),
|
|
border: UiRect::all(Val::VMin(5.)),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[7].into(),
|
|
border_color: PALETTE[9].into(),
|
|
..default()
|
|
});
|
|
});
|
|
}
|
|
|
|
fn spawn_with_pixel_coords(commands: &mut Commands) {
|
|
commands
|
|
.spawn((
|
|
NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(800.),
|
|
height: Val::Px(600.),
|
|
border: UiRect::axes(Val::Px(40.), Val::Px(30.)),
|
|
flex_wrap: FlexWrap::Wrap,
|
|
..default()
|
|
},
|
|
border_color: PALETTE[1].into(),
|
|
..default()
|
|
},
|
|
Coords::Pixel,
|
|
))
|
|
.with_children(|builder| {
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(240.),
|
|
height: Val::Px(180.),
|
|
border: UiRect::axes(Val::Px(30.), Val::Px(30.)),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[2].into(),
|
|
border_color: PALETTE[9].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(480.),
|
|
height: Val::Px(180.),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[3].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(360.),
|
|
height: Val::Px(180.),
|
|
border: UiRect::left(Val::Px(180.)),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[4].into(),
|
|
border_color: PALETTE[8].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(360.),
|
|
height: Val::Px(180.),
|
|
border: UiRect::right(Val::Px(180.)),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[5].into(),
|
|
border_color: PALETTE[8].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(480.),
|
|
height: Val::Px(180.),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[6].into(),
|
|
..default()
|
|
});
|
|
|
|
builder.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Px(240.),
|
|
height: Val::Px(180.),
|
|
border: UiRect::axes(Val::Px(30.), Val::Px(30.)),
|
|
..default()
|
|
},
|
|
background_color: PALETTE[7].into(),
|
|
border_color: PALETTE[9].into(),
|
|
..default()
|
|
});
|
|
});
|
|
}
|