forestia/bevy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
30d897a8bf
bevy/examples/ui/viewport_debug.rs
ickshonpe 9655acebb6
Divide by UiScale when converting UI coordinates from physical to logical (#8720) 
# 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:

![Bevy App 30_05_2023
16_54_32](https://github.com/bevyengine/bevy/assets/27962798/a5ecbf31-0a12-4669-87df-b0c32f058732)

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>
2023-07-06 20:27:54 +00:00

248 lines
7.6 KiB
Rust
Raw Blame History

//! 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()
});
});
}
Reference in New Issue View Git Blame Copy Permalink