Skip to content

UI Toolkit Based Tablet Workflow

Overview

A walkthrough on how to create a prototype screen using the UI Toolkit workflow with the modified 3D UI Interactables.

The goal is to cleanly seperate the User Interface into 3 clear layers.

  • The Display layer which references the UI Document and controls the visuals of the UI Panel.

  • The Elements layer which contains all of the modifable elements of the document.

  • The Data layer which handles the backend logic and binds itself to the elements.

This will allow for front end modifications while keeping the back end intact and vice versa.

Warnings

  • Backend orchestration is thrown together for prototypes
  • No proper data binding set up
  • Used AI to seperate inline styling from UXML to USS
  • AI is pretty much useless for anything else if you try asking it to generate some stuff on it's own it won't be able to

File Structure

UITK / Documents

The Documents folder contains the UXML Docs for each full panel in the tablet system. These are what can be opened directly in the UI Builder and what gets referenced in the UI Documents in World Space.

UITK / Styles

The Styles folder contains the USS Style sheets that are added to the UXML documents and define how the panels look.

UI Builder Setup

Document Size

When you open a document for the first time sometimes it squashes it to the default settings. To fix this, select the document in the hierarchy and set its size to 800 x 500. This is the size used in the world space panels.

Example Documents

Instead of starting from scratch you can duplicate one of the existing panels, either a pop up or full screen. This will give you a good example structure, naming conventions, and style class pre loaded. There are 5 to choose from currently.

Creating Styles

When starting don't worry about cleanly seperating styles in the UI Builder, but once you get the hang of it for each screen you'll want to add it's own unique styles so the core doesn't get cluttered and you don't modify another screens style sheet if you are working off a duplicate.

To add a new style press the + icon in the top left and create the new file. Name it after the screen you're making and add it to the styles folder. Then you want to right click it in the styles list and select active styles. This will add all new style classes to this file only when creating them in the UI Builder.

To create a style in builder you want to go to the classes section on a visual elements inspector, here you'll see an empty text box. Enter the name of the class you want to create then press enter and it will add it to the object. Double clicking this class button will then add it to the active style sheet.

Screen Creation Steps

UI Builder Screen Creation

Create the base layout and screen in UI Builder. Apply the core style sheet in the top left and create a screen specific style sheet. Bind the localised strings to the text elements in UI Builder too.

For buttons, you can create them in UI Builder if you want to adjust the spacing of all the elements then turn off their visibility before placing 3D Buttons on top. Ensure every element has clear names and has a reference in the constants class for the query utility to access.

UXML and USS Cleanup

The UI Builder generated code can be messy with no root variables, repetition and inline styling in the UXML. You will need to clean this up either manually or ask AI to do it for you so the documents can be used in production.

Element Record Creation

Create a record containing all of the elements that need to be modified in the UI Document. This will usually be Labels for display data and Containers to populate during run time.

Document Query Utility

Create a function in the query utility that fetches all of the elements in your created UI Document by running a bunch of queries in the record constructor. The function should return a type of your element record. There are examples there for you to reference. All of them are in one file.

Panel Host Script

Create a new panel host script and inherit from the base host class. Here you will get the elements from the root through the query utility, reference the unity interactable event wrappers for any 3D Buttons. Then if you want it to be accessed by an orchestrating controller class, create Unity Event properties for each 3D Button which return the Wrapper.WhenUnselect when called. You can see the other hosts for examples.

Controller Creation

Right now the controller references each of the hosts and the hosts buttons. This is just so it can hide all the buttons when a pop up is shown.

The controller accesses the UnityEvent properties on the screen so it can bind transitions between different tablets in a central spot through code without needing to do manual inspector references.