Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Merged by Bors] - Add UI scaling #5814

Closed
wants to merge 12 commits into from
Closed

Conversation

Weibye
Copy link
Contributor

@Weibye Weibye commented Aug 27, 2022

Objective

Solution

  • This is an accessibility feature for fixed-size UI elements, allowing the developer to expose a range of UI scales for the player to set a scale that works for their needs.
  • The user can modify the UiScale struct to change the scaling at runtime. This multiplies the Px values by the scale given, while not touching any others.
  • The example showcases how this even allows for fluid transitions

Here's how the example looks like:

bevy_scaling_example.mp4

Changelog

  • Added a UiScale which can be used to scale all of UI

Copy link
Contributor

@TimJentzsch TimJentzsch left a comment

Choose a reason for hiding this comment

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

This is promising, will be very useful for high resolution screens

/// This is purely about the logical scale, and can
/// be considered like a zoom
///
/// This only affects pixel sizes, so a percent size will stay at that
Copy link
Contributor

Choose a reason for hiding this comment

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

Phrasing:

Suggested change
/// This only affects pixel sizes, so a percent size will stay at that
/// This only affects pixel sizes, so a percent size will stay the same

@@ -0,0 +1,144 @@
//! This example illustrates the UIScale resource from bevy_ui
Copy link
Contributor

Choose a reason for hiding this comment

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

I think it's UiScale, it would also be nice if this would link to the element (or does this not work in examples?)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not really sure. I'll make the change regardless

@Weibye Weibye added C-Feature A new feature, making something new possible A-UI Graphical user interfaces, styles, layouts, and widgets labels Aug 27, 2022
@Weibye Weibye mentioned this pull request Aug 27, 2022
Copy link
Contributor

@afonsolage afonsolage left a comment

Choose a reason for hiding this comment

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

LGTM but I wonder what are the use cases for this, since it only affects values with Val::Px it may be confusing for users to deal with

crates/bevy_ui/src/lib.rs Outdated Show resolved Hide resolved
Co-authored-by: Afonso Lage <lage.afonso@gmail.com>
@Weibye Weibye added the A-Accessibility A problem that prevents users with disabilities from using Bevy label Aug 28, 2022
@Weibye
Copy link
Contributor Author

Weibye commented Aug 28, 2022

LGTM but I wonder what are the use cases for this, since it only affects values with Val::Px it may be confusing for users to deal with

  1. It is an accessibility feature first and foremost. Developers should make sure the player can adjust the scale of UI so that players with difficulty seeing can increase the size of text and other elements to actually be able to play the game.
  2. High-dpi screens will render things at the pixel-value it was designed, making the text and UI too small to interact with or read.
  • Here's the settings to adjust the UI Scaling in windows 11:
    image

  • Here's an example of bad UI scaling in Kerbal Space Program
    image

  • UI Scaling in Minecraft
    image

Here's an article on it: https://uxdesign.cc/how-to-handle-ui-scaling-in-games-3bdfe70bc7ff

Copy link
Contributor

@afonsolage afonsolage left a comment

Choose a reason for hiding this comment

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

Thanks for clarifying the use case. LGTM

@Weibye Weibye added the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label Aug 28, 2022
Copy link
Member

@cart cart left a comment

Choose a reason for hiding this comment

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

I agree that this is a valuable feature. Long term we might want to remove the global config in favor of ui-root-specific config, but thats a conversation for another day / not worth blocking on here.

crates/bevy_ui/src/flex/mod.rs Outdated Show resolved Hide resolved
@cart
Copy link
Member

cart commented Aug 29, 2022

bors r+

bors bot pushed a commit that referenced this pull request Aug 29, 2022
# Objective

- Allow users to change the scaling of the UI
- Adopted from #2808

## Solution

- This is an accessibility feature for fixed-size UI elements, allowing the developer to expose a range of UI scales for the player to set a scale that works for their needs.

> - The user can modify the UiScale struct to change the scaling at runtime. This multiplies the Px values by the scale given, while not touching any others.
> - The example showcases how this even allows for fluid transitions

> Here's how the example looks like:

https://user-images.githubusercontent.com/1631166/132979069-044161a9-8e85-45ab-9e93-fcf8e3852c2b.mp4

---

## Changelog

- Added a `UiScale` which can be used to scale all of UI


Co-authored-by: Andreas Weibye <13300393+Weibye@users.noreply.github.com>
Co-authored-by: Carter Anderson <mcanders1@gmail.com>
@bors bors bot changed the title Add UI scaling [Merged by Bors] - Add UI scaling Aug 29, 2022
@bors bors bot closed this Aug 29, 2022
james7132 pushed a commit to james7132/bevy that referenced this pull request Oct 28, 2022
# Objective

- Allow users to change the scaling of the UI
- Adopted from bevyengine#2808

## Solution

- This is an accessibility feature for fixed-size UI elements, allowing the developer to expose a range of UI scales for the player to set a scale that works for their needs.

> - The user can modify the UiScale struct to change the scaling at runtime. This multiplies the Px values by the scale given, while not touching any others.
> - The example showcases how this even allows for fluid transitions

> Here's how the example looks like:

https://user-images.githubusercontent.com/1631166/132979069-044161a9-8e85-45ab-9e93-fcf8e3852c2b.mp4

---

## Changelog

- Added a `UiScale` which can be used to scale all of UI


Co-authored-by: Andreas Weibye <13300393+Weibye@users.noreply.github.com>
Co-authored-by: Carter Anderson <mcanders1@gmail.com>
@Weibye Weibye deleted the add-ui-scaling branch November 6, 2022 09:39
ItsDoot pushed a commit to ItsDoot/bevy that referenced this pull request Feb 1, 2023
# Objective

- Allow users to change the scaling of the UI
- Adopted from bevyengine#2808

## Solution

- This is an accessibility feature for fixed-size UI elements, allowing the developer to expose a range of UI scales for the player to set a scale that works for their needs.

> - The user can modify the UiScale struct to change the scaling at runtime. This multiplies the Px values by the scale given, while not touching any others.
> - The example showcases how this even allows for fluid transitions

> Here's how the example looks like:

https://user-images.githubusercontent.com/1631166/132979069-044161a9-8e85-45ab-9e93-fcf8e3852c2b.mp4

---

## Changelog

- Added a `UiScale` which can be used to scale all of UI


Co-authored-by: Andreas Weibye <13300393+Weibye@users.noreply.github.com>
Co-authored-by: Carter Anderson <mcanders1@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Accessibility A problem that prevents users with disabilities from using Bevy A-UI Graphical user interfaces, styles, layouts, and widgets C-Feature A new feature, making something new possible S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants