bevyengine
Add support for world space UI
Objective
Try #5476
Existing problems:
- [x] Fix node rotation
- [x] UiTransform based on UiContain Transform
- [x] Layout based on UiContain size
- [x] UiContainTarget passes to child nodes
- [x] Support Anchor
- [x] UiContain Support Overflow
- [x] Node click
- [x] ~~performance optimization~~
...
Expectations and difficulties:
- ~~Non root nodes take effect (May affect the entire Node)~~
- ~~UiContain supports Visibility (Restricted by the relationship of visibility)~~
Solution
1.Ui follows the world from a point (Transfrom) to move 2.Modify Ui Layout Size Source (UiContainerSize) 3.Place Node in UiContainer for rendering(Use UiContainerTarget to specify Container) 4.Distinguish different render layers for the UiContainer.
Testing
-
Did you test these changes? If so, how? Specifying the current UINode example within a UiContainer yields no difference compared to rendering on the camera.
-
Are there any parts that need more testing?
- The Button function of Container Node may need to be tested
- Is there a performance issue
- Does screen scaling affect the proper functioning of containers
- Zindex
Showcase
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
It looks like your PR has been selected for a highlight in the next release blog post, but you didn't provide a release note.
Please review the instructions for writing release notes, then expand or revise the content in the release notes directory to showcase your changes.
我非常支持添加对世界空间界面的支持，但这份PR描述和文档中的写作相当糟糕。我很难准确判断意图，无法好好审查和修改这本书。
你能花点时间改进吗？如果英语不是你的母语，请告诉我们你是否更流利的语言，我会看看有没有人能帮忙翻译。
我非常支持添加对世界空间界面的支持，但这份PR描述和文档中的写作相当糟糕。我很难准确判断意图，无法好好审查和修改这本书。
你能花点时间改进吗？如果英语不是你的母语，请告诉我们你是否更流利的语言，我会看看有没有人能帮忙翻译。
Yes, I really need it. My first language is Chinese and I need a translator
The example needs to be run with the "bevy_ui_container" feature enabled:
cargo run --example ui_container --features bevy/bevy_ui_container
Otherwise it doesn't work correctly.
I think the feature gate would probably be better removed, world UI is fairly fundamental and probably not something that should be feature gated.
And also just for this PR, it adds a lot of extra nouse that makes the changes more difficult to review.
Yes, perhaps we need to open a new create or plugin? I think I can try. I have come up with a solution
@ickshonpe I have reduced the extra noise and will migrate to the new plugin. To be honest, I don't want to remove the feature gate.
I don't want this feature-gated either. I think it adds complexity, and makes it harder to reason about how layout works.
我也不希望这个功能被限制。我觉得这增加了复杂性，也让理解布局的运作变得更难。
Since the majority of the members agree, I plan to remove the feature gate.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Judging from your modifications to UiSurface and UiScale, it appears that your PR lacks a systematic approach to bevy_ui. Instead, it seems you made changes based on a targeted look at certain parts of the code, resulting in several adjustments that do not align with Bevy’s current architecture and design principles. Therefore, I suggest you first explain your design approach, discuss it with the team, and then proceed with the changes before submitting the PR.
Judging from your modifications to UiSurface and UiScale, it appears that your PR lacks a systematic approach to bevy_ui. Instead, it seems you made changes based on a targeted look at certain parts of the code, resulting in several adjustments that do not align with Bevy’s current architecture and design principles. Therefore, I suggest you first explain your design approach, discuss it with the team, and then proceed with the changes before submitting the PR.
Yes, there is indeed this issue. My design solution is based on an idea: since the UI is laid out relative to the camera—where the camera acts as a "container for the UI"—and this container always follows the camera, why not define a container in world space to hold the UI and make the UI follow this container? For this purpose, I designed UiContainerSize, which corresponds to the layout size of the camera. After considering the above, I distinguish between UI laid out in world space and UI laid out relative to the camera as ContainerUI (perhaps it could be called WorldUI?) and CameraUI, because there are slight differences between them, such as in the coordinate system. (Regarding the multiple "fix ci" issues—I admit it's just a personal habit of preferring to make improvements on relatively correct and standardized code.)
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.
Your PR caused a change in the graphical output of an example or rendering test. This might be intentional, but it could also mean that something broke! You can review it at https://pixel-eagle.com/project/B04F67C0-C054-4A6F-92EC-F599FEC2FD1D?filter=PR-21812
If it's expected, please add the M-Deliberate-Rendering-Change label.
If this change seems unrelated to your PR, you can consider updating your PR to target the latest main branch, either by rebasing or merging main into it.