This page will walk you through the basics of adding UI to your game packages. From health bars to score trackers to reference notes, UI offers a lot of powerful options for your game.

As with 3D objects, UI objects are built from templates in your Object Library. We’ve included a few examples with pre-built functionality in the Tools package, along with 3D Object Templates that make use of them.

Adding UI to Objects

You can add UI to an object at both the object level and the template level.

To attach it at the object-level, right-click on an object on the table, and choose Customize -> Properties. Then click the UI tab, followed by “Attach UI.” This will bring up a window showing the UI Templates available.

Once you’ve attached the UI, you’ll see some new controls appear.

The Position, Rotation, and Scale controls allow you to change the UI’s position and rotation relative to the object. (You can also change these using the UI Cursor, as described below.) You can remove the UI by hitting the “-” button at the top, duplicate it with the duplicate button, or add additional UI with the “+.” If you have multiple pieces of UI attached to the object, you can use the arrows to cycle between them.

Some UI will also have special options you can configure in this panel. For example, the Flexible Counter in the Tools library offers controls for the increments associated with each button.

If you want the same UI to show up on every object of the same type, you can instead attach it at the Template level. To do this, open the Customize dialogue, choose the bottom tab on the left, and then click on “UI” along the top.

From there, the controls are exactly the same as those found in Properties.

Advanced Options

At the bottom of the UI tab, you’ll see a “Show Advanced Options” button. This reveals the following:

• Presentation Style: Offers the following options:
  • Regular: The UI is shown in 3D space, as defined by its position, rotation, and scale.
  • View Aligned: The UI is always shown facing the camera. (Rotation is not used.)
  • Screen: The UI is shown in 2D at its position. This looks similar to View Aligned, but it also ignores scale values and transparency settings (Screen UI can always be partially transparent).
• Visibility: Allows you to limit who can see the UI. This can be useful if you want to give players personalized UI, either to record secret info, or simply so that they can manipulate it without bothering other players.
• Zoom Visibility: Determines if the UI will be seen when the user zooms in on the object it is attached to. The default “Regular” setting makes the UI only visible on the table (and not on Zoom).

Adding Global UI

If you want to add UI to the screen or the table rather than to an individual object, open Session Options by right-clicking on an empty bit of table and choosing “Session.”

You should see a “Global UI” button in the list on the left:

This will bring up a modal where you can choose 3D or Screen.

3D uses the same UI as attaching the UI to an object, and works the same way; you can think of it a little like the UI is attached to the table.

Screen lets you put the UI on the UI Layer, meaning it will remain in place on the screen as the user navigates the 3D space, similar to elements like the toolbar.

Note that by default the position definitions here are relative to screen size (which is to say the size of the TTP window), with 0,0 meaning the top left corner, and 1,1 meaning the bottom right corner. This means you will usually want to use values between 0 and 1 on each axis. Anchor position meanwhile determines where on the UI this relative position refers to, again using 0,0 as the top-left corner of the UI. Some combinations of numbers may cause the UI to be off-screen – for example, if position is set to 1,1 and anchor is set to 0,0, the UI will not be visible, because it is anchoring the top left corner of the UI to the bottom right corner of the screen. If you change the Anchor position to 1,1, you will see the UI appear hugging the corner, as now its bottom right corner is being aligned to the bottom right of the screen.

The UI Cursor

You can resize and move UI with the UI Cursor. You can access the cursor from the toolbar by mousing over the “Zone” icon and selecting it, or with its keyboard shortcut (Ctrl+U on PC).

The cursor allows you to: 

• Click and drag a UI to reposition it
• Resize a UI by clicking and dragging the grey box that you will see appear in the lower-right corner of each UI
• Rotate a UI by clicking-and-holding and turning the mouse wheel.
• Right-click on a UI to bring up its context menu.

Note that right now this has a few limitations:

• It does not work for UI attached to objects at the template level (but will work for UI attached to objects via Properties).
• It does not work for 3D or Object UI set to the “Screen” presentation style (but will work for Global Screen UI).

Creating UI Templates

To create a UI template, go to the Object Library and select “New Template” in your package, just as you would if you were making a 3D object. Then in the Select Object Type dialogue, scroll to the bottom and choose UI.

This will bring you to the UI Template Creation screen. 

On the left you’ll see a Hierarchy in which you’ll place various Widgets to create your UI. When you create a new UI object, you’ll just see a Canvas. This is a container widget, in which other widgets can be placed. Hit “Add to Canvas” to add a Widget to it, and it’ll pop up a dialog in which you can select the type of widget you’d like to add. Let’s add a Button:

You’ll now see that below the hierarchy is a dialogue giving you all of the options for your chosen Widget. And now that you have a visible Widget, you can see it on the right.

Moving, Deleting, and Copying Widgets

If you mouse over a Widget, you’ll see some controls on the right-hand side:

The up-and down icons move the item up and down in the hierarchy. This has a few uses:

• If two items overlap, the one lower in the hierarchy will be shown on top of the one higher up in it.
• Within a Panel, hierarchy determines the order things appear in.

The copy icon can copy a widget and its children. (You can also accomplish this with Ctrl+C). To paste a widget after copying it, click “Add to Canvas,” and choose “Paste from Clipboard” at the bottom of the Widget Type list. This works across templates, allowing you to move pieces of one template into another.

The trash button deletes the chosen Widget and all of its children.

Borders and Layout Boxes

Beside the name of each item in your hierarchy, you’ll see boxes allowing you to add or remove a Border or Layout Box. A Border provides both a background and border color around the UI widget. A Layout Box meanwhile provides controls that let you more precisely define things like the size of the widget. 

If you click on the Border button, it will add the Border, and show you the options for it below. You’ll also see an Eraser button appear to the right of the Layout Box icon, which can be used to remove the Border. 

If you click back on the hash icon on the left, you’ll switch back to the default controls for positioning the widget on the canvas, but you’ll see that the Border button is now white, indicating that a Border is present; clicking on it now will switch you back to editing the Border options. 

The Layout Box button works the same way.

Next Steps

Learn About the Widgets

Click the links below to learn more about each of the Widgets at your disposal. We recommend starting with Canvases and Panels, followed by Borders and Layout Boxes, and from there visiting whatever widgets you think you might want to use.

• Canvases and Panels
• Borders and Layout Boxes
• Text Widgets
• Buttons
• Input Fields
• Checkboxes
• Progress Bar
• Switchers

Add Scripting

When you’re ready to add functionality to your UI, read Adding Scripts to UI.