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

Allow for ui scaling #2808

Closed
wants to merge 6 commits into from

Conversation

TheNeikos
Copy link
Contributor

@TheNeikos TheNeikos commented Sep 11, 2021

Objective

  • Allow users to change the scaling of the UI

Solution

  • 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

@github-actions github-actions bot added the S-Needs-Triage This issue needs to be labelled label Sep 11, 2021
@TheNeikos TheNeikos force-pushed the feature/add_ui_scaling branch from 8c71310 to caa58f9 Compare September 11, 2021 20:59
crates/bevy_ui/src/widget/text.rs Outdated Show resolved Hide resolved
examples/ui/scaling.rs Outdated Show resolved Hide resolved
examples/ui/scaling.rs Outdated Show resolved Hide resolved
examples/README.md Show resolved Hide resolved
Copy link
Contributor

@MinerSebas MinerSebas left a comment

Choose a reason for hiding this comment

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

Accidentally pressed approve

Copy link
Member

@DJMcNab DJMcNab left a comment

Choose a reason for hiding this comment

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

This looks like a handy small addition, thanks!

Overall I don't see anything technically wrong with this implementation, just a few misc thoughts

examples/ui/scaling.rs Outdated Show resolved Hide resolved
examples/ui/scaling.rs Outdated Show resolved Hide resolved
@@ -39,9 +41,33 @@ pub enum UiSystem {
Focus,
}

#[derive(Debug)]
/// The current scale of the UI for all windows
Copy link
Member

Choose a reason for hiding this comment

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

Is there a conceptual reason this should be global instead of per-UI camera?

For example, I've needed a custom scale for different vscode windows because of different monitor scaling requirements - e.g. for presenting on one with notes on the other. Although I appreciate that is slightly different because those windows are different processes.

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 a conceptual one no. So far ui-handling is not done per-window though, so I didn't go as far as understand how multiple window bevy works technically.

///
/// ## Note
/// This is purely about the logical scale, and can
/// be considered like a zoom
Copy link
Member

Choose a reason for hiding this comment

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

Hmm, I'm not if it's quite a zoom - in my mind it's closer to a shrinking of the logical UI window size. For me, a zoom suggests showing only part of the logical window, which this isn't intended for.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

As a dev I feel it more intuitive if one considers a zoom, since it effectively multiplies the size of the pixels shown just like a zoom would.

Copy link
Member

Choose a reason for hiding this comment

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

This feels better described to me as "setting UI scale", rather than a true zoom.

Copy link
Contributor Author

@TheNeikos TheNeikos Sep 15, 2021

Choose a reason for hiding this comment

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

So, should I remove the note?

///
/// # Example
///
/// A scale of `2.` will make every pixel size twice as large.
Copy link
Member

Choose a reason for hiding this comment

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

I think this whole 'example' section is potentially superfluous

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Potentially, I prefer to make it clear though that one needs to put in 2. instead of 0.5 for twice the scale.

examples/ui/scaling.rs Outdated Show resolved Hide resolved
@TheNeikos
Copy link
Contributor Author

TheNeikos commented Sep 12, 2021

There's some build failures that do not come from my changes as far as I am aware: https://github.com/bevyengine/bevy/runs/3578487123#step:6:223

@TheNeikos TheNeikos closed this Sep 12, 2021
@TheNeikos TheNeikos reopened this Sep 12, 2021
@DJMcNab
Copy link
Member

DJMcNab commented Sep 12, 2021

Hmm, yeah

That's a new nightly check which excludes derived clones and debugs from counting as reading fields

@TheNeikos
Copy link
Contributor Author

I've added a video to the description

@TheNeikos TheNeikos force-pushed the feature/add_ui_scaling branch from eaf5f09 to 2eead4b Compare September 13, 2021 10:52
@TheNeikos
Copy link
Contributor Author

I have rebased on e74f7a7 so it should build again.

Is any of the open discussions blocking? Otherwise I'd suggest to transform them into issues/discussions.

@alice-i-cecile alice-i-cecile added A-UI Graphical user interfaces, styles, layouts, and widgets C-Feature A new feature, making something new possible and removed S-Needs-Triage This issue needs to be labelled labels Sep 14, 2021
@alice-i-cecile
Copy link
Member

@TheNeikos, sorry for letting this languish for so long. If you can rebase I'll wrangle the reviewers needed to get this merged.

@alice-i-cecile alice-i-cecile added the S-Adopt-Me The original PR author has no intent to complete this work. Pick me up! label Jul 4, 2022
@TheNeikos
Copy link
Contributor Author

TheNeikos commented Jul 4, 2022

Heya! Sadly I won't have the time in the foreseeable future to do this. If anyone else wants to pick it up, they are free to do so.

@alice-i-cecile
Copy link
Member

Sounds good. The label is added; thanks for letting us know.

@Weibye
Copy link
Contributor

Weibye commented Aug 27, 2022

@TheNeikos Thanks for your work! I've continued it over at #5814 so will close this :)

@Weibye Weibye closed this Aug 27, 2022
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>
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>
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-UI Graphical user interfaces, styles, layouts, and widgets C-Feature A new feature, making something new possible S-Adopt-Me The original PR author has no intent to complete this work. Pick me up!
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

6 participants