Divide by UiScale when converting UI coordinates from physical to logical

[ickshonpe]

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:

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.

[alice-i-cecile]

@ickshonpe can you resolve conflicts? I think this is likely to get merged preferentially.

[ickshonpe]

@ickshonpe can you resolve conflicts? I think this is likely to get merged preferentially.

Yep done. This seems like the right approach. Once users have set up their window and set UiScale they shouldn't need to ever be conscious of anything other than logical coords.

I can't see where there are any tangible benefits from the extra precision using f64s for the scaling, I think that's one of the first things we should deal with after 0.11 is done. I'll make an issue.

[ickshonpe]

Checked all the examples and they all seem fine. ui_scaling, overflow, game_menu, relative_cursor_position and ui are the ones most likely to go wrong if there are any bugs.

Just going to fix up the viewport_debug example for this, as I want to make sure the Val viewport coordinates variants still work correctly with borders and this PR together.

[ickshonpe]

Updated viewport_debug so it uses a UiScale of 2.
Changed extract_ui_borders to divide the UI's viewport size by UiScale so the border thicknesses with viewport coords are resolved correctly.
In ui_focus_system the cursor position was scaled incorrectly as well.

Shouldn't be any other problems.

[cart]

This looks good to me / seems like the right fixes.