[Merged by Bors] - Add UI scaling #5814

Weibye · 2022-08-27T13:50:52Z

Objective

Allow users to change the scaling of the UI
Adopted from Allow for ui scaling #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:

bevy_scaling_example.mp4

Changelog

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

Co-authored-by: Daniel McNab <36049421+DJMcNab@users.noreply.github.com>

…-ui-scaling

TimJentzsch

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

TimJentzsch · 2022-08-27T13:58:03Z

crates/bevy_ui/src/lib.rs

+/// 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


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

TimJentzsch · 2022-08-27T14:01:28Z

examples/ui/scaling.rs

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


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

Not really sure. I'll make the change regardless

afonsolage

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

Co-authored-by: Afonso Lage <lage.afonso@gmail.com>

Weibye · 2022-08-28T07:07:17Z

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

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.
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:
Here's an example of bad UI scaling in Kerbal Space Program
UI Scaling in Minecraft

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

afonsolage

Thanks for clarifying the use case. LGTM

cart

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

cart · 2022-08-29T23:35:36Z

bors r+

# 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 · 2022-08-29T23:56:34Z

Pull request successfully merged into main.

Build succeeded:

# 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>

TheNeikos and others added 8 commits September 13, 2021 12:51

Allow for ui scaling

472808e

Add ui/scaling.rs to readme

2940eda

Change the docstring for the example

143c804

Co-authored-by: Daniel McNab <36049421+DJMcNab@users.noreply.github.com>

Do not postfix the scale

50ab722

Re-order TargetScale in scaling example

c3613e4

Clarify scaling easing

2eead4b

Merge remote-tracking branch 'neikos/feature/add_ui_scaling' into add…

9c15d3e

…-ui-scaling

Bringing code up to date with main

bce4b3b

TimJentzsch reviewed Aug 27, 2022

View reviewed changes

Cleanup doc-comments

e40c1b9

TimJentzsch approved these changes Aug 27, 2022

View reviewed changes

Fix doc-issue

a501b0a

Weibye added C-Enhancement A new feature A-UI Graphical user interfaces, styles, layouts, and widgets labels Aug 27, 2022

Weibye mentioned this pull request Aug 27, 2022

Allow for ui scaling #2808

Closed

afonsolage reviewed Aug 28, 2022

View reviewed changes

crates/bevy_ui/src/lib.rs Outdated Show resolved Hide resolved

Update crates/bevy_ui/src/lib.rs

6e17540

Co-authored-by: Afonso Lage <lage.afonso@gmail.com>

Weibye added the A-Accessibility A problem that prevents users with disabilities from using Bevy label Aug 28, 2022

afonsolage approved these changes Aug 28, 2022

View reviewed changes

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

cart approved these changes Aug 29, 2022

View reviewed changes

crates/bevy_ui/src/flex/mod.rs Outdated Show resolved Hide resolved

factor out scale_factor

c484ebf

bors bot changed the title ~~Add UI scaling~~ [Merged by Bors] - Add UI scaling Aug 29, 2022

bors bot closed this Aug 29, 2022

Weibye deleted the add-ui-scaling branch November 6, 2022 09:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Merged by Bors] - Add UI scaling #5814

[Merged by Bors] - Add UI scaling #5814

Weibye commented Aug 27, 2022 •

edited

TimJentzsch left a comment

TimJentzsch Aug 27, 2022

TimJentzsch Aug 27, 2022

Weibye Aug 27, 2022

afonsolage left a comment

Weibye commented Aug 28, 2022 •

edited

afonsolage left a comment

cart left a comment

cart commented Aug 29, 2022

bors bot commented Aug 29, 2022

	/// 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

[Merged by Bors] - Add UI scaling #5814

[Merged by Bors] - Add UI scaling #5814

Conversation

Weibye commented Aug 27, 2022 • edited

Objective

Solution

Changelog

TimJentzsch left a comment

Choose a reason for hiding this comment

TimJentzsch Aug 27, 2022

Choose a reason for hiding this comment

TimJentzsch Aug 27, 2022

Choose a reason for hiding this comment

Weibye Aug 27, 2022

Choose a reason for hiding this comment

afonsolage left a comment

Choose a reason for hiding this comment

Weibye commented Aug 28, 2022 • edited

afonsolage left a comment

Choose a reason for hiding this comment

cart left a comment

Choose a reason for hiding this comment

cart commented Aug 29, 2022

bors bot commented Aug 29, 2022

Weibye commented Aug 27, 2022 •

edited

Weibye commented Aug 28, 2022 •

edited