Well just ignore dat weird tag. :D
Here is muy notes dat I learn from the Divsion UI talk.
The key is iteration, threading and data.
Iterate your stuff to make it better.
Threading and data driven make the work efficient.
Snow drop UI
- No canvas
- Immediate Mode
- Constant cost (maybe it’s more statble?).
- Vector Graphics
- Shapes(scaling friendly, dun rely on resolution) over textures masks.
- Save GPU load by only rendering the pixels gonna be used.
- Artist can play with it.
Game Data & Node graph
Lots of data getter (get pure data?) (in graph node), used in UI and also game play.
Auto conversion to save some performance.
custom UI logic components.
custom reusable compounds.
Iteration
For coder
Reduce complie time
- Blob builds(idk what is this).
- Header file reduction.
- Keep refactoring code to make it efficient.
- Remove nolonger used code.
Reduce startup time and Load time
- Only load needed stuff.
- UI preview with live data for easy iteration.
- Well some debug UI will also help :).
(for my unity project)
- Have a UI preview scene (UI only, we can preview states and transitions).
- Have simple a gym dat provide gameplay with enough content.
Coder to Artist
Coder work with artist (react fast to feedbacks).
Resable compounds, arist can directly use.
Drawback of iteration
- Hard to stop.
- Set clear goals and deadlines. (do not waste time)
- Greate for prototyping, risk for delivering. (need a lead to shut down iteration, make the decision)
Building blocks of UI
To let arist and designers to have full(or more) control?
Widget and Graphics
Widget define space, accept input. Graphic improve widget, relative size, also accept input?
5 Basic widgets with a few variations.
Use basic widgets, and use them to build functionalities.
Window
- 2D and 3D (anchoring functionalities, pixels or percentage; prepare some options for different auto scaling and apply to different UI widgets/graphic and situations).
- Vertical Stack (stack the (children)widgets)
- Layering
Text
- JIT font generaion (wtf, keep memory down)
- Fich text formatting lib to build customize text(icon, color …).
- Auto clip (no idea how to do it)
Image
- Use color/gradient more. (looks good with vector graphic)
- Texture and loose image(ikd this, no border image?) into sprite sheet.
Stack container
- For sorting elements.
- Spacing and padding (how to do it with stack)
- Invert for quick right to left language fixes (wtf)
Scroll Box
- Fixed size(viewport size) with a virtual inner space(content).
7 Graphics (nodes)
- Text with effects.
- Images(basic) with more shapes, flat or curved.
- Lines(strait, curved list?, 3d)
- Points, single point or large squares(for effects?)
- Shapes
- Sector (why? for their art style?)
- Custom graphics
Simply Ui workflow
- Complex and powerful (lots of resuable compounds, and threading stuff)
- Documentation and examples(I guess examples are better and save time)
For coder
- Simple code; Less code, less bugs
- Simple Tools; Do not overthink. Simple base, complex behaviour.
For UI artist/designer
- Communicate to avoid merge conflicts, get ahead of it (cuz yaml merge wont help u all the time).