Implement runtime UI workflow and editor integration#819
Conversation
adriengivry
left a comment
There was a problem hiding this comment.
Found a bunch of issues that I reported to you directly on Discord.
Didn't dive into the code yet, as it's subject to change.
Some design issues to figure out:
Transformshould be "adaptive", depending on the context (2D/3D).- When in 2D mode, width/height/anchor preset/anchor pivot should be displayed
- When in 3D mode, nothing should change from what was previously shown
- There should be no need for an extra component, the transform should store 2D-related properties under an
std::optionaldata struct.
- Font rendering: currently fonts are rasterized with a fixed font size, so scaling a font will lead to blurry text. This could be fixed by implemented either SDF or dynamic glyph rendering. Dynamic glyph might be easier for now.
CText::m_textshould be displayed as a multiline string. Right now it's not possible to add line breaks in texts.
Some bugs I found so far:
- Anchor presets not working properly (partially addressed, the bounds in scene view are rendering incorrectly)
- Constant-size/scale with screen size issue, if I set the Canvas to 1920x1080, and add an image of size 1920x1080, it doesn't exactly fit the screen. When using scale with screen size (which should be default), we should be able to choose when the ratio is mismatching, to either match Width or Height, shrink, or expand. (see Unity documentation)
- When using multiple Canvas, composition order should be based on their position in the hierarchy.
adriengivry
left a comment
There was a problem hiding this comment.
Didn't look at the code yet, but after pulling this PR and testing it for a few minutes, I've noticed many issues.
Incorrect image size:
- Create Canvas
- Set Canvas to 1920x1080, with constant pixel size
- Create an image, and set its size to 1920x1080
- Notice that Canvas bounds and image bounds don't match
Noticed the same issue in Scale with Screen Size, bounds don't match.
Canvas inspector field not updated properly:
- Create Canvas
- Set its "Scaler Mode" to "Constant Pixel Size"
- Notice "Screen Match Mode" and "Match Width or Height" are still visible
This also happens when changing "Screen Match Mode", "Match Width or Height" won't show up until the selected actor changes
Transform2D
Shouldn't be needed, it should be merged with Transform, and expose optional data depending on the context.
Redundant "Size" setting
Both Transform2D and Image share the same "Size" setting, which isn't necessary. Size shouldn't be needed in Image if it's already present on the transform.
Might be applicable to text as well, the text could control the size of the element instead of "extent".
Font size scaling doesn't work past 80
When font size goes above 80, the font disappear and a warning shows up: "Font atlas is too small". Framerate also drops considerably.
Layout groups don't have 2D transform data?
- Add "Canvas"
- Add "Horizontal Layout"
- Notice that the horizontal layout has no transform 2D data (cannot be anchored, no size, pivot, etc...)
Gizmos don't match the selected object
Self-explanatory.
Gizmo translations don't exactly follow the cursor
Screencast_20260524_125606.webm
Anchored Position should be grayed out when driven by a preset
Incorrect text alignment
When "Center" is selected, the user will expect the text to be centered, but multi-line text doesn't get centered properly. It's always left aligned.
adriengivry
left a comment
There was a problem hiding this comment.
Just pulled the latest version, I noticed right away after adding a canvas that the UI is messed up.
Some other issues:
- The Transform2D is still there and should be removed.
- "Size" is still in "Image" (with a message saying that is "Driven by Transform 2D", but instead it should just be removed from there completely).
- The translation gizmo still doesn't exactly follow the mouse (compare moving a 3D object vs 2D object)
- Elements under a layout keep their position before they joined the layout
- Creating an image and changing its size, in the scene view, the image and its bounds don't match
Some other improvements:
- When any element under a canvas is selected, the canvas bounds should be displayed.
Thanks for being reactive with these edits. Going forward, I'd appreciate a bit more thorough testing before requesting review, as some of these issues are fairly easy to reproduce and it would help reduce unnecessary back and forth.







Description
CCanvas,CTransform2D,CImage,CText.CLayoutGroup,CHorizontalLayout,CVerticalLayout.controlChildrenWidth/Heightsizing.Related Issue(s)
Fixes #631
Review Guidance
CLayoutGroup(controlChildrenWidth/Height).CTransform2Dstretch presets and inspector behavior.CText/Fontmaterial path (EnsureEmbeddedMaterial+ color override).Reviewer Notes (Key integration details)
1) Layout behavior (
CLayoutGroup)controlChildrenWidth/Heightnow effectively writes computed sizes to supported child UI components (CImage,CTextextents,CTransform2Dsize).2) Dedicated layout components
CHorizontalLayoutandCVerticalLayoutare concrete specializations ofCLayoutGroup.3) Transform2D anchor/stretch presets
HORIZONTAL_STRETCH_TOP/MIDDLE/BOTTOMVERTICAL_STRETCH_LEFT/CENTER/RIGHTSTRETCH_BOTH4) Text/Font material flow
Fontnow owns an embedded UI material (EnsureEmbeddedMaterial/GetEmbeddedMaterial).CTextreuses this embedded material and only overrides dynamic text color.5) Editor rendering mode behavior
GameView: always includes UI in screen space.SceneView: always includes UI; toolbar toggle switches screen-space mode on/off for Scene View display.6) Lua exposure
CHorizontalLayoutandCVerticalLayout.Transform2Danchor preset enum values.Screenshots/GIFs
AI Usage Disclosure
Generated new code / Refactored code / Debugging
Build Warnings
The changes generate build warnings, specifically 29 new warnings originating from the
Claylibrary itself.These correspond to typical internal conversions on MSVC side: pointer to
uint32_t(hash),doubletofloat,float/__int64toint32_t.These are true narrowing warnings, but not relevant to our current integration as long as we remain within normal layout/UI sizes.
Note
You can find an Overload project on the
631-demobranch of my Overload fork. It includes scenes and scripts used to test the Lua API, as well as the added and modified source code.Checklist