Unity UI Tasks

The New unity Tool Kit uses:

Unity Extensible Markup Language (UXML)

and

Unity Style Sheet (USS)

Prep Task - Download & Launch Unity Project

Download the zip file.
Move this to your S drive.
Right click on it to Unzip.
Open Unity Hub.
In the Project Section select Open.
Find the folder for the unzipped project.
Run the Project to test

Block_Drop_for_UI.zip

Task 1 - Creating & Linking to Document

Create a UI Document in your assets folder.

Add a UI Document to your scene.

The UI Document in the Scene is a container to hold the UI Document you created in the assets folder. Drag the "New UXML Template" into the UI Document > Source Asset

Task 2 - Setting Up the UI Builder Window

Double click on the UI Document file in the assets window. This will open the UI Builder Window.

Let's set up this window so we are working at the same size as our Game Window.

Select the main area in the viewport window.
Tick 'Match Game View' for the canvas size.
Tick to activate the Canvas Background, then press the Camera Button.
For 'camera' select the main Camera.

Task 3 - Setting Up the UI Hierarchy

To create the UI we add elements inside existing elements and format these as needed.

First I added a VisualElement inside the NewUXML Template. I named this PageHeader.

Inside this, I added two more VisualElements named ScoreArea & HighScoreArea.

Add two Label elements to each VisualElement. Name these as shown:

Initially, these elements will be shown as a vertical pile.

Task 4 - Positioning the Boxes

Select ScoreBox and in the Inline Styles set the width to 30%. Repeat for HighScoreBox. These should still appear below each other.

Next, we need to move the Boxes. To do this select position and select Absolute and top to 50px. Set the Left value for ScoreBox to 10% and the Right value of HighScoreBox to 10%.

You should have the result below. I have added colour to make things clearer.

Relative V Absolute

Absolute Positioning works from with in the parent object. So our example moves the HighScoreBox to the right hand side of the PageHeader.

Relative Posititing works from where the element is supposed to be. The default position and size of most object is below the previous object and 100% of the parents width. If we set the width of an object to 50% and set the relative position 25% from the left the object should appear in the centre of the parent.

Task 5 - Flexing

We can use the Flex property to organise the direction of child elements. Part of the Flex involves which way the children are organised.

Choose ScoreBox and HighScoreBox and set the Flex Direction to horizontal.

Size the children as shown:

ScoreLabel

Width: 40%;

ScoreDisplay

Width: 60%;

HighScoreLabel

Width: 40%;

HighScoreDisplay

Width: 60%;

Task 6 - Styling the Text

Next, we can Style all the labels:

I set the font size to 24 and aligned the actual labels to the right.

I made the Displays bold and picked a dark red colour to make all the text stand out. I also removed the background colours.

Task 7 - Linking to the Code

For this code to work select UIDocument in your Hierarchy and tag this UIObject

Open the PlayerCtrl script.

Add a Using statement so the script can access UI elements.

Add Variables to hold references to the Labels

Inside the Start Method add:

A statement to find the UI Document
A root variable to hold the root of the UI Document.
Statements to store the labels in the UI in the variables.

In the update method:

Comment out the lines that write the score to the console.
Write the score and high score to the UI Document.

UI Challenge 1 - You Died !!

We need a message to appear to tell the player they died and they need to press space to start again.

See if you can create this with out help.

If you need it the instructions are hidden in the drop downs below.

Step 1 - Design the Message

Click for Possible Design

Click for instructions

Add a VisualElement to the Hierarchy, name this Death Message.
1. 1. Set the width to 60% and set the position to 20% from the left and about 30% from the top.
  2. Give it a Red background color.
  3. Add two label elements and set the text and format as show below.
  4. Also, add a VisualElement between the labels, make this black and set the height to 10px.