Scripts can have a user interface (UI) canvas attached in order to display information on a player’s HUD or in-world. Each UI component can be exposed to the script and affected through script execution.
To attach a canvas to your script, click the “Add UI Canvas” button in the action bar.
The action bar hosts controls to add/remove layouts and switch between the node view and layout view.
At current, only one canvas can be attached to each script, so if a script has a canvas attached, this button will remove the canvas (”Remove UI Canvas” is an irreversible action and the UI will not be recoverable).
Playground game scripts are created with a HUD layout.
Next to the layout toggle button, there is a drop-down which allows you to switch between the Node View (the default view where you edit nodes) and the Canvas View (for editing UI components).
The Canvas View provides a place to lay out your UI components, and templates are provided to help guide your placement. The visualization of the template depends on your canvas type.
The template for a HUD canvas, which shows the positioning of UI on a 16:9 display.
The template for a World canvas, which just shows the center (the position of the placed script instance).
In the canvas view, with no UI component selected, the Inspector panel contextually shows settings for this canvas, a component hierarchy view, and editing preferences. Most importantly, this main inspector tab allows you to change the type of your canvas between HUD and World.
The Inspector tab shows high-level settings for your canvas.
The Hierarchy tab is broken into its own section here.
The Template tab allows you to toggle pieces of the template on or off, since certain pieces of the UI may not be relevant to your canvas.
In the Canvas View, just like when scripting with nodes, you can right click to bring up a menu to select UI components from and then place them onto the editing grid.