Sprint 6: Bringing UI into Unity

Using Wipha's beta UI design,

I updated them a bit and brought them over into Untiy.

In Unity, I created a new scene called Menu. I want to do put everything in this scene, so I don't have to deal with bringing over input information with switching between scenes.

Created a Canvas with a panel, then created a few empty game objects that will act as parents to the elements in each page. Each empty object was named after a screen.

It was during the making of the scripting when I learnt that I can straight forward use the built in option in buttons > gameobject > set active false. Welp QAQ.

Moving on, I exported the updated UI assets from XD and imported them into unity. I put them in menu sprits folder.

Then I changed each of their texture type from Default to 2D Sprit.

Then I drag them into a UI Image child under panel.

I'm also using this resolution, this is similar to my phone's as I am using it to test.

Next, I created a script called MenuCntrl to control the menu in MenuScripts folder.

Then I dragged the script onto an empty game object named Menu Controller.

First part of code, I created public GameObjects so I can enable and disable them with ease later, without using "find".

The idea here is when a button is pressed, the current page will disable and next page will become active.

Here are some examples, other buttons have similar code.

For the loading screen when the app opens, I wanted it to fade into view from black, then fade out and cut to home screen. First, I added a Canvas Group onto the image I wanted to have fade in and out.

Then in MenuCntrl script, I created a public IEnumerator to control the Canvas Group

The fade in duration will be 2 seconds

Following a similar tutorial, I start the lerp function. The tutorial explain that commonly people will use time.deltatime, but we want to avoid that because it makes it so that it never reaches the end value. I will now create a value for the time we start lerping & a percentage complete.

Next part, while the coroutine is true, I want to constantly update the time since started so I can use the percentage complete to measure how far along the lerp is,

When the percentage complete is >=1 aka 100%, I want to wait 2 seconds, let the logo stay visible at 100% opacity for 2 seconds then let it fade out. Oh yeah, the FadeIn() and fadeout functions:

When the app opens, the Start() sets the canvas group alpha to 0, then when fadein is called, the lerp will activate and change the 0 to 1. When it reaches 1, my FadeOutDone bool will turn true after 2 seconds which will then stop the coroutine, ending the transition. When it ends, this screen will become not active and the next screen will become active

I forgot to talk about the Input Field. It's my first time using Ui's input field.

After adding input field ui as a child of landing screen, I added this in MenuCntrl script.

This will allow what ever the input the user types in to show up at the guest name text.

Example