Spike: UI Test comparing with Foundation Client

[kuruk-mm]

Create a scene with UI and report the differences between the Foundation, Godot and Bevy.

How?

Start simple, and go to the UI features, comparing with the Foundation Client

When a difference is detected, take a picture of the clients (video if needed), post that a comment here the code that you used and the picture, and make a commit in the scene repo

Suggestion: To go thought the UI Features, use the docs as reference https://docs.decentraland.org/creator/development-guide/sdk7/onscreen-ui/

[sdilauro]

Input

Input behavior is weird, you can test in the branch bugs/ui-input:

• [ ] Typing is from right to left
• [ ] Input text is centered by default in Godot while always aligned to the left in Foundation.
• [ ] When I click the input placeholder doesn't disappear like in Foundation.
• [ ] Font color of the value is white by default while black in Foundation.
• [ ] Input field has a border when it is not selected.

Bonus

• [ ] Sometimes a letter is lost when typing fast (same behavior in Foundation).
• [ ] Foundation doesn't show placeholder until input was selected (and empty).

Foundation:

https://github.com/dclexplorer/ui-test-scene/assets/22157752/e7efcb16-6f4f-469c-af4f-5e1c2563bf05

Godot:

https://github.com/dclexplorer/ui-test-scene/assets/22157752/a88dbd3a-9951-45bf-afeb-57167a2ad022

[sdilauro]

Text

• [ ] The ui-text has some padding in Foundation, when font-size property is small the difference with Godot Client is more notorious.

Foundation:

Godot:

[sdilauro]

Button

You can test the scene in the branch ui-button

• [ ] Button adjusts its size to value automatically in Godot (I think it's ok but it isn't the Foundation's behavior)

Godot:

Foundation:

[sdilauro]

UI Transform: minHeight

The menu and button's parent has a minHeight applied. It works in Foundation but the element grows up to the window's limit in Godot.

You can test it in the branch ui-transform-min-height

Godot:

https://github.com/decentraland/godot-explorer/assets/22157752/c65e92c6-1ffa-4b64-b9dc-1b536913ef3d

Foundation:

https://github.com/decentraland/godot-explorer/assets/22157752/239e2cd1-35db-433e-a0bb-3385af3296af

[sdilauro]

Spinner

The left is a rotating sprite and the right is an animated sprite (8 frames).

Godot:

https://github.com/decentraland/godot-explorer/assets/22157752/d08d2ded-5ce9-4512-8352-1ebf665c5cf9

Foundation:

https://github.com/decentraland/godot-explorer/assets/22157752/a679e78b-a82d-4bdd-93e8-9a942be0d096

[sdilauro]

JustifyContent: 'space-evenly'

This property works fine in Godot but doesn't in Foundation:

[sdilauro]

Change the color on ui-background property

I was making other elements clickable, which works fine, but the Godot's button size appears broken. That doesn't be related to clickable elements but is a wrong behavior.

check this repo

https://github.com/decentraland/godot-explorer/assets/22157752/872b9b16-99e2-4e70-b8e9-70fc0d2d76c6

[sdilauro]

UITransform: alignItems: 'baseline'

see this repo

[sdilauro]

Overflow: scroll

Try this code:

const uiComponent = () => (
  <UiEntity
    uiTransform={{
      maxWidth: 225,
      height: '100%',
      overflow: 'scroll',
      flexShrink: 20,
      pointerFilter: 'block'
    }}
    >
      <UiEntity
        uiTransform={{
          minWidth: 150,
          minHeight: 150,

        }}
        uiBackground={{ color: Color4.Green() }}
      />
      <UiEntity
        uiTransform={{
          minWidth: 150,
          minHeight: 150,
        }}
        uiBackground={{ color: Color4.Red() }}
      />
      <UiEntity
        uiTransform={{
          minWidth: 150,
          minHeight: 150,
        }}
        uiBackground={{ color: Color4.Blue() }}
      />
  </UiEntity>
)

export function setupUi() {
  ReactEcsRenderer.setUiRenderer(uiComponent)
}

and obtain this:

It's the same behavior in both clients, but this should hide the overflow content and make scrollable parent.

[sdilauro]

flexWrap

When flex-wrap is set as wrap and align-content is in center the clients behave differently.

try this code:

const uiComponent = () => (
  <UiEntity
    uiTransform={{
      alignContent:'center',
      width: 450,
      height: '100%',
      flexWrap: 'wrap'
    }}
    >
      <UiEntity
        uiTransform={{
          width: 150,
          height: 150,
        }}
        uiBackground={{ color: Color4.Green() }}
      />
      <UiEntity
        uiTransform={{
          width: 150,
          height: 150,
        }}
        uiBackground={{ color: Color4.Red() }}
      />
      <UiEntity
        uiTransform={{
          width: 150,
          height: 150,
        }}
        uiBackground={{ color: Color4.Blue() }}
      />
  </UiEntity>
)

export function setupUi() {
  ReactEcsRenderer.setUiRenderer(uiComponent)
}

[sdilauro]

Dropdown

This component looks different but works fine (test in this repo)

Godot:

Foundation:

Both closed: