Skip to content

UI text rotation and scaling fix#11326

Merged
alice-i-cecile merged 4 commits intobevyengine:mainfrom
ickshonpe:fix-ui-text-rotation-and-scaling
Jan 13, 2024
Merged

UI text rotation and scaling fix#11326
alice-i-cecile merged 4 commits intobevyengine:mainfrom
ickshonpe:fix-ui-text-rotation-and-scaling

Conversation

@ickshonpe
Copy link
Contributor

@ickshonpe ickshonpe commented Jan 13, 2024 •
edited
Loading

Objective

UI node text is drawn in the wrong position after rotation or scaling.

294723406-d031a3e6-a4f9-48b4-a66a-ee963100a8b9

Solution

In extract_text_uinodes to set the text's offset create a translation matrix and multiply it by the UI node's transform.

Previously the offset was just added directly to the translation of the Node's GlobalTransform, which meant no scaling or rotation would be applied to the offset.

296440025-537ec11c-1ea1-469c-8eec-2ad4ae012095 296440156-dd04029d-8112-4fa5-89a2-56d7acab66df

Fixes #11241

@ickshonpe
In extract_text_uinodes to set the text's offset create a translati…
0c0b74e 
…on matrix and multiply it by the UI node's transform.

Previously the offset was just added directly to the translation of the Node's `GlobalTransform` which meant no scaling or rotation would be applied it.
@ickshonpe ickshonpe changed the title In extract_text_uinodes to set the text's offset create a translati… UI text rotation and scaling fix Jan 13, 2024
@ickshonpe ickshonpe added A-Text Rendering and layout for characters A-UI Graphical user interfaces, styles, layouts, and widgets A-Transform Translations, rotations and scales C-Bug An unexpected or incorrect behavior labels Jan 13, 2024
@ickshonpe ickshonpe requested review from nicopap and rparrett January 13, 2024 12:29
rparrett
rparrett approved these changes Jan 13, 2024
View reviewed changes
Copy link
Contributor

@rparrett rparrett left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to fix the issue and doesn't seem to regress #10537.

I also checked out overflow_debug, and rotation looks much better there. It's still slightly wonky, but it now looks like it did pre-#10537.

@alice-i-cecile alice-i-cecile added this pull request to the merge queue Jan 13, 2024
@alice-i-cecile alice-i-cecile mentioned this pull request Jan 13, 2024
Merged
1 task
Merged via the queue into bevyengine:main with commit 03404c4 Jan 13, 2024
@rparrett rparrett mentioned this pull request Feb 23, 2024
Closed
@rparrett rparrett mentioned this pull request Mar 11, 2024
Merged
github-merge-queue bot pushed a commit that referenced this pull request Mar 13, 2024
@rparrett @mockersf
Fix blurry text (#12429)
55b786c 
# Objective

Fixes #12064

## Solution

Prior to #11326, the "global physical" translation of text was rounded.

After #11326, only the "offset" is being rounded.

This moves things around so that the "global translation" is converted
to physical pixels, rounded, and then converted back to logical pixels,
which is what I believe was happening before / what the comments above
describe.

## Discussion

This seems to work and fix an obvious mistake in some code, but I don't
fully grok the ui / text pipelines / math here.

## Before / After and test example

<details>
<summary>Expand Code</summary>

```rust
use std::f32::consts::FRAC_PI_2;

use bevy::prelude::*;
use bevy_internal::window::WindowResolution;

const FONT_SIZE: f32 = 25.0;
const PADDING: f32 = 5.0;

fn main() {
    App::new()
        .add_plugins(
            DefaultPlugins.set(WindowPlugin {
                primary_window: Some(Window {
                    resolution: WindowResolution::default().with_scale_factor_override(1.0),
                    ..default()
                }),
                ..default()
            }),
            //.set(ImagePlugin::default_nearest()),
        )
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2dBundle::default());

    let font = asset_server.load("fonts/FiraSans-Bold.ttf");

    for x in [20.5, 140.0] {
        for i in 1..10 {
            text(
                &mut commands,
                font.clone(),
                x,
                (FONT_SIZE + PADDING) * i as f32,
                i,
                Quat::default(),
                1.0,
            );
        }
    }

    for x in [450.5, 700.0] {
        for i in 1..10 {
            text(
                &mut commands,
                font.clone(),
                x,
                ((FONT_SIZE * 2.0) + PADDING) * i as f32,
                i,
                Quat::default(),
                2.0,
            );
        }
    }

    for y in [400.0, 600.0] {
        for i in 1..10 {
            text(
                &mut commands,
                font.clone(),
                (FONT_SIZE + PADDING) * i as f32,
                y,
                i,
                Quat::from_rotation_z(FRAC_PI_2),
                1.0,
            );
        }
    }
}

fn text(
    commands: &mut Commands,
    font: Handle<Font>,
    x: f32,
    y: f32,
    i: usize,
    rot: Quat,
    scale: f32,
) {
    let text = (65..(65 + i)).map(|a| a as u8 as char).collect::<String>();

    commands.spawn(TextBundle {
        style: Style {
            position_type: PositionType::Absolute,
            left: Val::Px(x),
            top: Val::Px(y),
            ..default()
        },
        text: Text::from_section(
            text,
            TextStyle {
                font,
                font_size: FONT_SIZE,
                ..default()
            },
        ),
        transform: Transform::from_rotation(rot).with_scale(Vec2::splat(scale).extend(1.)),
        ..default()
    });
}
```

</details>

Open both images in new tabs and swap back and forth. Pay attention to
the "A" and "ABCD" lines.

<details>
<summary>Before</summary>

<img width="640" alt="main3"
src="https://github.com/bevyengine/bevy/assets/200550/248d7a55-d06d-433f-80da-1914803c3551">

</details>

<details>
<summary>After</summary>

<img width="640" alt="pr3"
src="https://github.com/bevyengine/bevy/assets/200550/26a9d292-07ae-4af3-b035-e187b2529ace">

</details>

---------

Co-authored-by: François Mockers <mockersf@gmail.com>
mockersf added a commit that referenced this pull request Mar 13, 2024
@rparrett @mockersf
Fix blurry text (#12429)
17005b3 
# Objective

Fixes #12064

## Solution

Prior to #11326, the "global physical" translation of text was rounded.

After #11326, only the "offset" is being rounded.

This moves things around so that the "global translation" is converted
to physical pixels, rounded, and then converted back to logical pixels,
which is what I believe was happening before / what the comments above
describe.

## Discussion

This seems to work and fix an obvious mistake in some code, but I don't
fully grok the ui / text pipelines / math here.

## Before / After and test example

<details>
<summary>Expand Code</summary>

```rust
use std::f32::consts::FRAC_PI_2;

use bevy::prelude::*;
use bevy_internal::window::WindowResolution;

const FONT_SIZE: f32 = 25.0;
const PADDING: f32 = 5.0;

fn main() {
    App::new()
        .add_plugins(
            DefaultPlugins.set(WindowPlugin {
                primary_window: Some(Window {
                    resolution: WindowResolution::default().with_scale_factor_override(1.0),
                    ..default()
                }),
                ..default()
            }),
            //.set(ImagePlugin::default_nearest()),
        )
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands.spawn(Camera2dBundle::default());

    let font = asset_server.load("fonts/FiraSans-Bold.ttf");

    for x in [20.5, 140.0] {
        for i in 1..10 {
            text(
                &mut commands,
                font.clone(),
                x,
                (FONT_SIZE + PADDING) * i as f32,
                i,
                Quat::default(),
                1.0,
            );
        }
    }

    for x in [450.5, 700.0] {
        for i in 1..10 {
            text(
                &mut commands,
                font.clone(),
                x,
                ((FONT_SIZE * 2.0) + PADDING) * i as f32,
                i,
                Quat::default(),
                2.0,
            );
        }
    }

    for y in [400.0, 600.0] {
        for i in 1..10 {
            text(
                &mut commands,
                font.clone(),
                (FONT_SIZE + PADDING) * i as f32,
                y,
                i,
                Quat::from_rotation_z(FRAC_PI_2),
                1.0,
            );
        }
    }
}

fn text(
    commands: &mut Commands,
    font: Handle<Font>,
    x: f32,
    y: f32,
    i: usize,
    rot: Quat,
    scale: f32,
) {
    let text = (65..(65 + i)).map(|a| a as u8 as char).collect::<String>();

    commands.spawn(TextBundle {
        style: Style {
            position_type: PositionType::Absolute,
            left: Val::Px(x),
            top: Val::Px(y),
            ..default()
        },
        text: Text::from_section(
            text,
            TextStyle {
                font,
                font_size: FONT_SIZE,
                ..default()
            },
        ),
        transform: Transform::from_rotation(rot).with_scale(Vec2::splat(scale).extend(1.)),
        ..default()
    });
}
```

</details>

Open both images in new tabs and swap back and forth. Pay attention to
the "A" and "ABCD" lines.

<details>
<summary>Before</summary>

<img width="640" alt="main3"
src="https://github.com/bevyengine/bevy/assets/200550/248d7a55-d06d-433f-80da-1914803c3551">

</details>

<details>
<summary>After</summary>

<img width="640" alt="pr3"
src="https://github.com/bevyengine/bevy/assets/200550/26a9d292-07ae-4af3-b035-e187b2529ace">

</details>

---------

Co-authored-by: François Mockers <mockersf@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alice-i-cecile alice-i-cecile alice-i-cecile approved these changes

@nicopap nicopap Awaiting requested review from nicopap

+1 more reviewer

@rparrett rparrett rparrett approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

A-Text Rendering and layout for characters A-Transform Translations, rotations and scales A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Rotated text is rendered outside of its container

3 participants

@ickshonpe @rparrett @alice-i-cecile