Build a Basic No-Code UI
When constructing a UI, the first thing you need to do is create is a Frame to hold the contents of the UI. A Frame can displayed in the Viewport or in a Window. In this example we will create a simple UI in to be displayed in the Viewport.
Transcript
Step 3: Make the UI Visible
Now, lets enable our Frame so we can see our UI start to take shape.
Select and right-click the Frame in your stage.
Select Viewport Frame from the menu.
The Button will take over the entirety of the viewport, not what we want, but it let’s us verify the Frame is there.
Step 4: Organize your UI with Stacks
Adding Stacks to allow controlled placement and arrangement of our interface.
Select the Frame in your Stage.
In the UI Flyout Panel, select VStack to add a vertical stack to the Frame.
Step 5: Push Content into Position with Spacers
Spacers allow us to fill stacks easily with empty space. This is useful for positioning things like Buttons. In our example we will use spacers in the VStack to push our button to the bottom.
Select the VStack in your Stage.
In the UI Flyout Panel, select Spacer to add a Spacer widget.
Repeat above step by selecting Spacer to add a second Spacer.
Select HStack.
In the Stage, click and drag the Button under Frame to the VStack.
Notice how our button is now on the bottom of our vertical stack and occupies the lower third of the screen. The first and second VStack positions are occupied by our Spacers, the last third occupied by our HStack with a Button nested in it.
Step 7: Enable Child ReOrdering
There will often be times where you wish to reorder child elements in a stack. This is locked by default and reordering must be enabled.
Select the Hamburger Menu in the Top Right of the Stage.
Select Enable Children Reorder
Step 8: Reorder Children to Control Position
If we wish to adjust the position/placement of items in an HStack or VStack, we can simply drag items to the position we want them. Lets move Button row HStack we created to another position.
In the Stage select and drag the HStack from below the Spacers within the VStack to above the Spacers.
Notice how the Button row moves to the top 1/3 of the viewport.
In the Stage, select and drag the HStack from the above the Spacers in the VStack to between them.
Notice how the Button group centers vertically in the Viewport.
Step 9: Unblock UI Widgets
By default UI Widgets does not “block” mouse clicks from selecting Prims in the Viewport. In order to block accidental clicks, Stack Containers have the boolean property content_clipping. Enabling this option will make the UI “consume” mouse clicks and prevent any unwanted selection of Prims behind the UI.
Select the HStack in the Stage
Enable Content Clipping in the Properties Panel.
In the Viewport, add a cube or any other non UI element to your stage to test.
At this point you should have created a simple UI using most of the key elements. As some next steps you can try adding other buttons and working to arrange more complex UI layouts.