Creating Main Menu UI Panel Part 1!

Objective: Create first panel/Main Menu Panel

In this tutorial we are going to create the main menu panel. We have the story boards to use as a reference.

When working with a client/company an artist will normally provide you with the assets you need to create these elements. To begin making this we are going to create the panel. This will help organize the hierarchy.

Click create > UI > Panel

Remove the Image component

right click the panel and create a UI Image.

Locate the sprite provided for the background and drag it into the source image location.

Set the anchor point to stretch

Zero out the Rect Transform.

with the background taken care of we can move on to the next UI element on the story board, the logo.

create another UI Image and set the logo sprite provided as the source image.

Select Preserve Aspect ratio then set the anchor to stretch and zero out the Rect Transform.

Looking at the artboard the logo appears to take up 50% of the screen. An easy way to set this to half we can do a simple equation in the transform. The length of the whole canvas is 949. In the bottom section of the transform you can enter 949/2

This tutorial has run a little long so we will end it here for now. In the next tutorial We will finish the main menu panel. I’ll see you in the next tutorial!