1. Home
  2. Docs
  3. Unity SDK
  4. Motive UI System
  5. Panel – Our First UI Component

Panel – Our First UI Component

 

Introduction

Panels are one of the most important parts of the Motive UI system. They are the backbone of how the UI system operates.

Conceptually, a panel is a screen that the user sees when interacting with the app.

Here we will use an example of creating a screen that shows a user the current time as an overlay.

We will begin with the Ghost Hunter template.

Creating the Panel

To begin we will create a game object called our first screen that contains a canvas renderer and image. This will be created under UI > Main Canvas > Main

We will then attach a new script to it and name it our first screen panel.

 

Once that is done we will add a child game object called “container” and size it to be the same as our parent object.

We will create a child object to container called clock and a child button to container.

We will attach Text object to clock as well as create a script called UserClock.

Adjust the color and opacity of the our first screen game object as you like and see fit, make sure that the text object in clock uses a color that will show up against the background.

Writing the Scripts

We now have two scripts that we created that we need to edit. Let’s start on the UserClock Script.

UserClock Script

Lets create a public text variable and set its content to the user time every update.

Doing this in the start method here is also a bit redundant but we will leave it for now.

Okay so back on the Unity side we should make sure that it knows what that “time” variable refers to. Wire this up to your game object.

Now that we have that wired up lets make sure that PanelManager will know how to interact with this.

First Screen Panel Script

All we need to do to the OurFirstScreenPanel script is to make it extend Panel.

Showing and Hiding the Panel

Now that the screen is ready we will need a way to show and hide the panel. Because we already have a button on our overlay screen we can use that to hide the panel.

Panel Manager Pop

Position the button at a location that you would like and wire it up like so

Where it calls UI -> PanelManager -> Pop.

This means that when the button gets clicked it will pop the active panel off the stack!

Panel Manager Push

Now that we have a way to pop the panel, we need a way to push it (show it).

Ghost hunter already has a bottom panel with buttons so we will make use of that! Locate the panel in the hierarchy (UI >Main Canvas > HUD > Bottom Bar) and clone one of the buttons. Change the icon and remove all of the on click methods.

I have also added a dark circle image behind the button to make it contrast a bit better and changed the icon to a stopwatch. If you search for time you can find the same one.

Next add an  on click method of UI -> Panel Manager -> Push and drag the OurFirstScreenPanel in. It should look like this:

 

 

Just like that you are done! Now when the app is run and the user clicks the button the panel manager will push our panel on the stack and the user will see our overlay. When the back button is pressed the panel will get popped and they will see the screen they used to be on.

This is a deeper dive into the motive UI System. We will be having a look at the task panel from the ghost hunter sample, explaining what everything is doing,  and making a few modifications to it.

The Game Objects (Unity)

The first thing that you will notice when having a look at the composition of the task panel game object is that it is fairly complicated. We will be having a look at each component in order to fully understand how it works!

Items

Task Table. Here TakeTaskItem can be seen as the top most item, and GiveTaskItem can be seen as the bottom one.Conceptually, an item is a single section within the table. It is a single entry for the table. Here you can see that there have been two items defined, TakeTaskItem and GiveTaskItem.

Each one of these has a script called TaskItem attached to it.  We will dive into this script in a little bit, but for now, just notice that it is attached and think about how that will interact with the table panel.

 

 

 

 

 

 

 

Table Panel

The table panel script exists on the outer most game object (Tasks). Examining the script shows us a couple of things. Firstly, it shows us that the TaskPanel script does indeed inherit from table panel.

Specifically we can see the following very important methods:

Populate

The populate method can be seen to grab the data source for this panel. In this case the driver list. Task drivers are objects that allow for a task that the user should do that manage the state around them. This will be covered in a later tutorial so don’t worry too much about the specifics of what they are for now. Just think of them as an entity for our table.

 

As you can see for every one of these entities we add them to the panel via the AddTaskItemPanel method.

 

The add task item method is a method that that just instantiates the item prefab with the task data and adds that item to the table. The important part to note is the call to

Add item call

Here one can see adding the item to the table. The call to this adds a single prefab/entry to the table.

 

Did Push / Did Pop

The did push method is a method that you can override to run logic for the table that needs to happen when the panel is pushed to the top of the stack.

Did pop is the opposite of this.

 

Here you can see that when the panel is pushed to the top of the stack, that the TaskManager_Updated method attaches to the updated event on task manager.

Pop panel removes this from the event.

This is a common pattern for these screens as it allows for any of the panels to automatically update when the data source updates. (If you have any questions about this feel free to ask us on intercom or on the forums!)

 

Was this article helpful to you? Yes No

How can we help?