[Merged by Bors] - Change UI coordinate system to have origin at top left corner #6000
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
djeedai
added
A-UI
mahulst
force-pushed
the
feature/invert-y-ui
branch
2 times, most recently
from
4ca9759 to
ba1318e
Compare
mahulst
force-pushed
the
feature/invert-y-ui
branch
from
ba1318e to
8429b6d
Compare
mahulst
force-pushed
the
feature/invert-y-ui
branch
from
a4f1c72 to
9aa2503
Compare
|
I think the PR is ready to go now. All examples working as they should. |
alice-i-cecile
requested review from
inodentry and
Weibye
and removed request for
tim-blackbird
|
@inodentry @Weibye @TimJentzsch can you review this over the weekend? I'd very much like to merge this on Monday before any other UI PRs. |
Weibye
approved these changes
Oct 8, 2022
TimJentzsch
reviewed
Oct 8, 2022
There was a problem hiding this comment.
Thanks a lot for working on this, this will make Bevy UI a lot less confusing!
I left a few comments regarding the AlignSelf::FlexStart. The default value is AlignSelf::Auto, but it might visually the same.
I'd suggest that we try to remove the explicitly set values and see if it still looks similar, if yes I'd be in favor of removing them to make the examples a bit shorter.
|
In the changelog / migration guide I would suggest to clearly specify that the UI coordinate system was bottom left origin, y+ up and got changed to top left origin, y+ down; to avoid confusion :) |
|
@TimJentzsch Changelog was updated, and I removed the redundant styles where it made no changes. |
alice-i-cecile
removed
the
S-Ready-For-Final-Review
Argh! I'll look at this in the morning. |
|
"suggested changes" is just one of the 3 "status" options you can choose when leaving a PR review. It doesn't refer to anything specific. When you review a PR, it asks you to select what "kind" your review is: just leaving comments, an endorsement/approval, or wanting changes. It's just to help communicate how the reviewer feels about your PR. |
Ah right 🤦 I was expecting a code suggestion or something. @alice-i-cecile example has been updated! Does this need to be merged by cart? |
|
Nope, I can merge this :) It would be controversial, but @cart gave his blessing in the linked issue. The actual implementation isn't the tricky part, so this has already passed through the critical review step. |
alice-i-cecile
added
the
C-Usability
alice-i-cecile
approved these changes
Oct 11, 2022
bors bot
pushed a commit
that referenced
this pull request
Oct 11, 2022
# Objective Fixes #5572 ## Solution Approach is to invert the Y-axis of the UI Camera by changing the UI projection matrix to render the UI upside down. After that I'm trying to fix all issues, that pop up: - interaction expected the "old" position - images and text were displayed upside-down - baseline of text was based on the top of the glyph instead of bottom ... probably a lot more. --- Result when running examples: <details> <summary>Button example</summary> main branch:  this pr:  </details> <details> <summary>Text example</summary> m  ain branch: this pr:  </details> <details> <summary>Text debug example</summary> main branch:  this pr:  </details> <details> <summary>Transparency UI example</summary> main branch:  this pr:  </details> <details> <summary>UI example</summary> **ui example** main branch:  this pr:  </details> ## Changelog UI coordinate system and cursor position was changed from bottom left origin, y+ up to top left origin, y+ down. ## Migration Guide All flex layout should be inverted (ColumnReverse => Column, FlexStart => FlexEnd, WrapReverse => Wrap) System where dealing with cursor position should be changed to account for cursor position being based on the top left instead of bottom left
|
Pull request successfully merged into main. Build succeeded: |
bors
bot
changed the title
This was referenced Oct 16, 2022
Closed
james7132
pushed a commit
to james7132/bevy
that referenced
this pull request
Oct 19, 2022
…gine#6000) # Objective Fixes bevyengine#5572 ## Solution Approach is to invert the Y-axis of the UI Camera by changing the UI projection matrix to render the UI upside down. After that I'm trying to fix all issues, that pop up: - interaction expected the "old" position - images and text were displayed upside-down - baseline of text was based on the top of the glyph instead of bottom ... probably a lot more. --- Result when running examples: <details> <summary>Button example</summary> main branch:  this pr:  </details> <details> <summary>Text example</summary> m  ain branch: this pr:  </details> <details> <summary>Text debug example</summary> main branch:  this pr:  </details> <details> <summary>Transparency UI example</summary> main branch:  this pr:  </details> <details> <summary>UI example</summary> **ui example** main branch:  this pr:  </details> ## Changelog UI coordinate system and cursor position was changed from bottom left origin, y+ up to top left origin, y+ down. ## Migration Guide All flex layout should be inverted (ColumnReverse => Column, FlexStart => FlexEnd, WrapReverse => Wrap) System where dealing with cursor position should be changed to account for cursor position being based on the top left instead of bottom left
bors bot
pushed a commit
that referenced
this pull request
Oct 24, 2022
# Objective - Clipping (visible in the UI example with text scrolling) is funky - Fixes #6287 ## Solution - Fix UV calculation: - correct order for values (issue introduced in #6000) - add the `y` values instead of subtracting them now that vertical order is reversed - take scale factor into account (bug already present before reversing the order) - While around clipping, I changed clip to only mutate when changed No more funkiness! 😞 <img width="696" alt="Screenshot 2022-10-23 at 22 44 18" src="https://user-images.githubusercontent.com/8672791/197417721-30ad4150-5264-427f-ac82-e5265c1fb3a9.png">
james7132
pushed a commit
to james7132/bevy
that referenced
this pull request
Oct 28, 2022
…gine#6000) # Objective Fixes bevyengine#5572 ## Solution Approach is to invert the Y-axis of the UI Camera by changing the UI projection matrix to render the UI upside down. After that I'm trying to fix all issues, that pop up: - interaction expected the "old" position - images and text were displayed upside-down - baseline of text was based on the top of the glyph instead of bottom ... probably a lot more. --- Result when running examples: <details> <summary>Button example</summary> main branch:  this pr:  </details> <details> <summary>Text example</summary> m  ain branch: this pr:  </details> <details> <summary>Text debug example</summary> main branch:  this pr:  </details> <details> <summary>Transparency UI example</summary> main branch:  this pr:  </details> <details> <summary>UI example</summary> **ui example** main branch:  this pr:  </details> ## Changelog UI coordinate system and cursor position was changed from bottom left origin, y+ up to top left origin, y+ down. ## Migration Guide All flex layout should be inverted (ColumnReverse => Column, FlexStart => FlexEnd, WrapReverse => Wrap) System where dealing with cursor position should be changed to account for cursor position being based on the top left instead of bottom left
james7132
pushed a commit
to james7132/bevy
that referenced
this pull request
Oct 28, 2022
# Objective - Clipping (visible in the UI example with text scrolling) is funky - Fixes bevyengine#6287 ## Solution - Fix UV calculation: - correct order for values (issue introduced in bevyengine#6000) - add the `y` values instead of subtracting them now that vertical order is reversed - take scale factor into account (bug already present before reversing the order) - While around clipping, I changed clip to only mutate when changed No more funkiness! 😞 <img width="696" alt="Screenshot 2022-10-23 at 22 44 18" src="https://user-images.githubusercontent.com/8672791/197417721-30ad4150-5264-427f-ac82-e5265c1fb3a9.png">
Pietrek14
pushed a commit
to Pietrek14/bevy
that referenced
this pull request
Dec 17, 2022
…gine#6000) # Objective Fixes bevyengine#5572 ## Solution Approach is to invert the Y-axis of the UI Camera by changing the UI projection matrix to render the UI upside down. After that I'm trying to fix all issues, that pop up: - interaction expected the "old" position - images and text were displayed upside-down - baseline of text was based on the top of the glyph instead of bottom ... probably a lot more. --- Result when running examples: <details> <summary>Button example</summary> main branch:  this pr:  </details> <details> <summary>Text example</summary> m  ain branch: this pr:  </details> <details> <summary>Text debug example</summary> main branch:  this pr:  </details> <details> <summary>Transparency UI example</summary> main branch:  this pr:  </details> <details> <summary>UI example</summary> **ui example** main branch:  this pr:  </details> ## Changelog UI coordinate system and cursor position was changed from bottom left origin, y+ up to top left origin, y+ down. ## Migration Guide All flex layout should be inverted (ColumnReverse => Column, FlexStart => FlexEnd, WrapReverse => Wrap) System where dealing with cursor position should be changed to account for cursor position being based on the top left instead of bottom left
Pietrek14
pushed a commit
to Pietrek14/bevy
that referenced
this pull request
Dec 17, 2022
# Objective - Clipping (visible in the UI example with text scrolling) is funky - Fixes bevyengine#6287 ## Solution - Fix UV calculation: - correct order for values (issue introduced in bevyengine#6000) - add the `y` values instead of subtracting them now that vertical order is reversed - take scale factor into account (bug already present before reversing the order) - While around clipping, I changed clip to only mutate when changed No more funkiness! 😞 <img width="696" alt="Screenshot 2022-10-23 at 22 44 18" src="https://user-images.githubusercontent.com/8672791/197417721-30ad4150-5264-427f-ac82-e5265c1fb3a9.png">
ItsDoot
pushed a commit
to ItsDoot/bevy
that referenced
this pull request
Feb 1, 2023
…gine#6000) # Objective Fixes bevyengine#5572 ## Solution Approach is to invert the Y-axis of the UI Camera by changing the UI projection matrix to render the UI upside down. After that I'm trying to fix all issues, that pop up: - interaction expected the "old" position - images and text were displayed upside-down - baseline of text was based on the top of the glyph instead of bottom ... probably a lot more. --- Result when running examples: <details> <summary>Button example</summary> main branch:  this pr:  </details> <details> <summary>Text example</summary> m  ain branch: this pr:  </details> <details> <summary>Text debug example</summary> main branch:  this pr:  </details> <details> <summary>Transparency UI example</summary> main branch:  this pr:  </details> <details> <summary>UI example</summary> **ui example** main branch:  this pr:  </details> ## Changelog UI coordinate system and cursor position was changed from bottom left origin, y+ up to top left origin, y+ down. ## Migration Guide All flex layout should be inverted (ColumnReverse => Column, FlexStart => FlexEnd, WrapReverse => Wrap) System where dealing with cursor position should be changed to account for cursor position being based on the top left instead of bottom left
ItsDoot
pushed a commit
to ItsDoot/bevy
that referenced
this pull request
Feb 1, 2023
# Objective - Clipping (visible in the UI example with text scrolling) is funky - Fixes bevyengine#6287 ## Solution - Fix UV calculation: - correct order for values (issue introduced in bevyengine#6000) - add the `y` values instead of subtracting them now that vertical order is reversed - take scale factor into account (bug already present before reversing the order) - While around clipping, I changed clip to only mutate when changed No more funkiness! 😞 <img width="696" alt="Screenshot 2022-10-23 at 22 44 18" src="https://user-images.githubusercontent.com/8672791/197417721-30ad4150-5264-427f-ac82-e5265c1fb3a9.png">
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Objective
Fixes #5572
Solution
Approach is to invert the Y-axis of the UI Camera by changing the UI projection matrix to render the UI upside down.
After that I'm trying to fix all issues, that pop up:
... probably a lot more.
Result when running examples:
Button example
main branch:
this pr:
Text example
m
ain branch:
this pr:
Text debug example
main branch:
this pr:
Transparency UI example
main branch:
this pr:
UI example
ui example
main branch:
this pr:
Changelog
UI coordinate system and cursor position was changed from bottom left origin, y+ up to top left origin, y+ down.
Migration Guide
All flex layout should be inverted (ColumnReverse => Column, FlexStart => FlexEnd, WrapReverse => Wrap)
System where dealing with cursor position should be changed to account for cursor position being based on the top left instead of bottom left