Skip to content

Implement runtime UI workflow and editor integration#819

Open
Gopmyc wants to merge 37 commits into
Overload-Technologies:mainfrom
Gopmyc:631
Open

Implement runtime UI workflow and editor integration#819
Gopmyc wants to merge 37 commits into
Overload-Technologies:mainfrom
Gopmyc:631

Conversation

@Gopmyc
Copy link
Copy Markdown
Contributor

@Gopmyc Gopmyc commented May 23, 2026

Description

  • Adds runtime UI components: CCanvas, CTransform2D, CImage, CText.
  • Adds layout components: CLayoutGroup, CHorizontalLayout, CVerticalLayout.
  • Implements stretch anchor presets and effective controlChildrenWidth/Height sizing.
  • Integrates UI rendering in Scene/Game descriptors and editor controls.
  • Exposes new UI components and enums to Lua + editor actor/component flows.

Related Issue(s)

Fixes #631

Review Guidance

  • Verify child sizing behavior in CLayoutGroup (controlChildrenWidth/Height).
  • Verify CTransform2D stretch presets and inspector behavior.
  • Verify CText/Font material path (EnsureEmbeddedMaterial + color override).
  • Intentional behavior: Scene View supports inspectable world/canvas-space UI; toolbar toggle controls Scene View screen-space mode.
Reviewer Notes (Key integration details)

1) Layout behavior (CLayoutGroup)

  • controlChildrenWidth/Height now effectively writes computed sizes to supported child UI components (CImage, CText extents, CTransform2D size).
  • Update is guarded by epsilon-based checks to avoid redundant writes.

2) Dedicated layout components

  • CHorizontalLayout and CVerticalLayout are concrete specializations of CLayoutGroup.
  • Direction is locked per component (not editable in inspector for these specialized types).
  • Added to actor deserialization + inspector + actor creation menu.

3) Transform2D anchor/stretch presets

  • Added presets:
    • HORIZONTAL_STRETCH_TOP/MIDDLE/BOTTOM
    • VERTICAL_STRETCH_LEFT/CENTER/RIGHT
    • STRETCH_BOTH
  • Position axis editing is disabled in inspector when that axis is stretch-driven.
  • Runtime anchored position ignores manual offset on locked axes.

4) Text/Font material flow

  • Font now owns an embedded UI material (EnsureEmbeddedMaterial / GetEmbeddedMaterial).
  • CText reuses this embedded material and only overrides dynamic text color.
  • Reduces per-text material setup duplication and keeps shader/UI flags centralized.

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.
  • This keeps Scene View inspectable while preserving screen-space preview mode on demand.

6) Lua exposure

  • Added bindings for CHorizontalLayout and CVerticalLayout.
  • Added new Transform2D anchor preset enum values.

Screenshots/GIFs

1 2 3 4 5

AI Usage Disclosure

Generated new code / Refactored code / Debugging

Build Warnings

The changes generate build warnings, specifically 29 new warnings originating from the Clay library itself.
These correspond to typical internal conversions on MSVC side: pointer to uint32_t (hash), double to float, float/__int64 to int32_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-demo branch 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

  • My code follows the project's code style guidelines
  • When applicable, I have commented my code, particularly in hard-to-understand areas
  • When applicable, I have updated the documentation accordingly
  • My changes don't generate new warnings or errors (left unchecked intentionally: see "Build Warnings")
  • I have reviewed and take responsibility for all code in this PR (including any AI-assisted contributions)

@Gopmyc Gopmyc marked this pull request as draft May 23, 2026 08:57
@Gopmyc Gopmyc marked this pull request as ready for review May 23, 2026 08:59
Copy link
Copy Markdown
Member

@adriengivry adriengivry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  • Transform should 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::optional data 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_text should 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.

Comment thread Dependencies/clay/include/clay.h
@Gopmyc Gopmyc requested a review from adriengivry May 24, 2026 07:09
Copy link
Copy Markdown
Member

@adriengivry adriengivry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  1. Create Canvas
  2. Set Canvas to 1920x1080, with constant pixel size
  3. Create an image, and set its size to 1920x1080
  4. Notice that Canvas bounds and image bounds don't match

Noticed the same issue in Scale with Screen Size, bounds don't match.

Image

Canvas inspector field not updated properly:

  1. Create Canvas
  2. Set its "Scaler Mode" to "Constant Pixel Size"
  3. 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

Image

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.

Image

Layout groups don't have 2D transform data?

  1. Add "Canvas"
  2. Add "Horizontal Layout"
  3. 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.

Image

Gizmo translations don't exactly follow the cursor

Screencast_20260524_125606.webm

Anchored Position should be grayed out when driven by a preset

Image

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.

Image

@Gopmyc
Copy link
Copy Markdown
Contributor Author

Gopmyc commented May 25, 2026

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:

  1. Create Canvas
  2. Set Canvas to 1920x1080, with constant pixel size
  3. Create an image, and set its size to 1920x1080
  4. Notice that Canvas bounds and image bounds don't match

Noticed the same issue in Scale with Screen Size, bounds don't match.

Image **Canvas inspector field not updated properly:**
  1. Create Canvas
  2. Set its "Scaler Mode" to "Constant Pixel Size"
  3. 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

Image **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.

Image **Layout groups don't have 2D transform data?**
  1. Add "Canvas"
  2. Add "Horizontal Layout"
  3. 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.

Image **Gizmo translations don't exactly follow the cursor**

Screencast_20260524_125606.webm
Anchored Position should be grayed out when driven by a preset

Image **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. Image

It's fixed

@Gopmyc Gopmyc requested a review from adriengivry May 25, 2026 11:04
Copy link
Copy Markdown
Member

@adriengivry adriengivry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just pulled the latest version, I noticed right away after adding a canvas that the UI is messed up.

Image

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.

@Gopmyc
Copy link
Copy Markdown
Contributor Author

Gopmyc commented May 25, 2026

Just pulled the latest version, I noticed right away after adding a canvas that the UI is messed up.

Image **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.

Sorry, I'll try to be more demanding with the tests

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

Implement in-game UI

2 participants