Some styling properties don't work for UI entities

Studio Feedback
1

I’m trying to create some simple 3D textboxes using the Studio API’s Ui component, but I’m having some issues creating the styling that I want. Some properties seem to work for Overlays but not 3D, and some don’t work for either. It also seems like the default values listed on the doc page aren’t quite accurate.

Can someone provide some sample code showing how to configure a Ui component to look like what’s shown in my screenshot below? Here’s what I have so far, with comments about what works and what doesn’t.

  const textboxEntity = world.createEntity()
  ecs.Ui.set(world, textboxEntity, {
    background: '#000000',
    backgroundOpacity: 0.75,  // 0 by default
    borderRadius: 10, // setting this to a high value like 9999 makes the background transparent instead of making the corners fully rounded
    // type: '3d',
    // width: '500px',
    padding: '17px', // no effect. Same with the granular padding properties like paddingTop
    height: 'auto', // 'auto' makes the background transparent for both 3D and Overlay types
    display: 'flex',  // no effect
    justifyContent: 'center', // no effect
    alignItems: 'center', // no effect
    text: 'Hello world',
  })

image
image603×594 59 KB

2

Studio UI works differently from CSS. Values aren’t in pixels, and flexbox can’t be set the same way. To create a flex layout, use the Layout property on the UI component in the configurator or the UI API. You can find more details in the docs here:

3

Thanks! I’ve been using that doc page for the last couple days, I’ve just been missing some details I think. The code sample I posted above was based on what’s provided there. Many of the properties have a string data type, so I had expected it would accept a variety of values, since it is inspired by CSS. I don’t see a layout property in the properties table, but there is a display property - same thing?

Can you provide a code sample that shows how to achieve the styling I’m looking to achieve?

I’d much rather create these programmatically because the content and art direction can change at any time, so it’s much faster to iterate when I don’t have to manually configure and place every textbox by hand.