bevyengine / bevyengine/bevy

UI layout tree optimizer

Open
#9,487 2 comments 1 reaction 0 assignees View on GitHub
A-UI C-Feature D-Complex
Dominant language
Rust
Stars
48.2k
Forks
4.8k
Avg merge
3d 22h
Merged PRs (30d)
161

Description

## What problem does this solve or what need does it fill?

It's possible to construct UI layouts that look and behave identically but which have vastly different performance characteristics. Often the most natural approach to constructing a UI is going to be the least efficient design.

Consider this simple inventory UI with some item buttons and labels :

![inventory_example_batches](https://github.com/bevyengine/bevy/assets/27962798/10472c23-9fee-468b-87ea-233f09ff6335)

Assume the labels are all from the same font, and the images are all from the same texture atlas.

A natural way to construct this UI is to have a row of nodes, where each node in the row contains an item button and its label arranged in a column (the red lines denote the boundaries of the column nodes):

![inventory_example_batch_lines](https://github.com/bevyengine/bevy/assets/27962798/8f83e802-03db-4392-ab82-b91c15f2b3fc)

With this design, the items will be rendered in seven batches:
1. inventory panel, border, inventory label, potion border
2. potion sprite
3. potion label, boots border
4. boots sprite
5. boots label, gem border
6. gem sprite
7. gem label

A different approach would be to place all the labels first and then arrange the items in a row inside a node placed above the inventory panel:

![inventory_example_batch_lines2](https://github.com/bevyengine/bevy/assets/27962798/ecadce3b-9052-4ad9-b3a2-24f87760ed00)

Now only two batches are generated:
1. inventory panel, border, inventory label, potion label, boots label, gem label, potion border
2. potion, boots border, boots, gem border, gem

Unfortunately though desirable, the second design is much more difficult to construct. The user has to work out a way to align the item labels with the item buttons even though they are in separate branches of the layout tree.

## What solution would you like?

A tool, maybe it would be a feature built into the editor eventually, that can analyse a UI layout tree like the one in the example above and transform it into a more efficient form, without changing its appearance or behaviour.

Maybe there are some simple transformations that could be applied in `ui_layout_system` at run time, I'm not sure.

It could also be a nice project for someone who wants to make a third-party crate.

## Additional information

Some relevant PRs: #9471, #9212, #8793

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.