Working on the retained-mode UI system for my game.
I've implemented two UI elements: a quick-slot panel and an inventory panel.
I've also improved the UI debugger, which now allows me to inspect the entire UI tree structure.
The inventory panel uses the nine-patch rectangle technique, allowing its texture to scale correctly, even at higher DPI scales.
Quick slots currently use simple colored rectangles as placeholders.
The UI system uses a tree structure to organize parent-child relationships.
The layout system uses two passes:
- Measure pass: Collects the desired sizes of elements, starting with the children and working up to their parents.
- Arrange pass: Calculates the actual positions and sizes based on alignment options. This time, we start with the parent and work down to the children, allowing us to distribute the available space correctly.
I use a breadth-first traversal algorithm to render UI elements.
I specifically chose breadth-first traversal over depth-first traversal because it allows me to group elements at the same hierarchy level into a single draw-call batch.