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.