Original subtitles

Let's create a UI

To present upgrade choices to the player

The first thing we're going to do is run a create a new scene with a root type

Canvas layer

The Grand Prix that canvas layer

Rename this to upgrade screen

Garden save that

And audio

Seems

You are

And save the upgrade screen in

The first Noel beginner

With control a is a Mars

Container

And then in the top toolbar

Click on

The Anchor preset button and change it to the

For wrecked option again

So that we have a margin container that's

Pictures to fill the screen

And then underneath that we're going to add in age box

So

This 8 box container what is it

Well it is a container just like them

Container and remember a container is a control node or a you I know

That automatically controls the size and

Position of its child element

Subtitled by online-courses.club We compress knowledge for you!

Automatic container will control the position of the child elements by

Applying margins around the edges of itself

What an Xbox container does is it online

Horizontal

So if I go home

You don't have to do this but I'm just going to demonstrate

By Alan button

Can I duplicate a cup of tea

You can see that the Xbox container is aligning them

Horizontally neck

And this is what we're going to use the Press

The options

2 hour

Clear ok so what we're going to do under the age box container is first we're going to go to the

Spectra of the 8 box container

Go down two containers sizes

And change both horizontal and vertical to share

Centre

Friends on the other side of the Ajax container

Is in the middle of the March

And then underneath that you asked internal is added child known

I'm really creative

Play panel can't

No you're not going to say anything just yet

However

This is another type of container

Nfi for example change the custom minimum size here to 101

You can see that

It has a panel background

And I'm actually going to

Change this I think I like this

Remind me to change it to be

Perhaps

What's keep it

Maybe 120 in the WI

And then perhaps

150

In the

So it looks kind of

Card you can see

Search panel container

Underneath the panel container let's add another child

The box contain

Sophie box container is just like the h box contain

Accept

8 sticks things further

So we are going to use this for what purpose well we want to display the name and the description

Have the upgrade

That

Is being presented to the player

So what's going on add in label

Underneath the box container

And just write something like test name in here

Another label under the box container

Rename this 12 description

And we can rename

Best top 1 to name label

Just like so

And then a description labelled let's just write something

Right

Psalm description

Here now your notice when you're right

A longer description it actually extends

The

Of the pan

We don't want that to happen because we want all of our upgrade cards

To be the same

Width

What you can do is scroll down

When you have a description label selector

Change the Auto rap mode

To work

So that will do a spares to automatically wrap

As you write

A long

Describe

Ok so what I'm going to do is I'm going to read in the panel container to ability upgrade

Card

And I'm going to write

On this

And I'm going to say

Save range as seen

I'm going to save that in scene

You are

Alongside our upgrades

Save that

Click the scene button right here

To open

Scene

And now we've got her own will seem for an ability upgrade car

That we can use

Multiple times

To display

Let's go out and add a script to the ability to upgrade card with descriptor button up top

And then go ahead and

Create

Ok and wondering if we're going to work

To do is we're just going to create a function

So so far

Set

Ability

And this is going to accept

A variable or a parameter called upgrade

Type

Ability

To be passing in

The resource

To this note

Pass right here for now

And then

Avatar

We want to grab a reference to the name and

So go ahead and highlight both of these by holding ctrl and click and both of the name and description

Blakely

Select access as seen unique

And then we're going to do an add-on

Bar

Name underscore label

And this is all type label

Is equal to

Dollar sign

Percent name

And again

We're going to do the same

With the description

And you can if you want

You can use the force

Pass if you want to like the

But I prefer to use the short hand saw

Dollar sign for Sen

Description

Ok so in Irish setter Billy upgrade function you can probably guess what we're going to do

What we're going to do as we're going to say name underscore label

Text to set the

Eagles upgrades at name

And then

Underneath

Description label that text is equal to up

Sorry upgrade door

Description

So that will update our two

According to what we've said

The ability upgrades and just as a side note

This is an example of separating data from large

Right so we have a generic card

There is a built for the purpose of displaying any ability

The Billy upgraded coming in we don't know what specific upgrade this is

We just know that we're expecting

This data

And so we can

Right you can see how we could

Create as many ability of great as if you want

And Everytime We pass

Inability upgrade into this car

Scene

It will just work

So

Separating logic from data is

Also is a good idea especially when you're

Dealing with a somewhat complex system

Alright so let's go back to upgrade screen so I'm going to switch over to the tab and then click

Into the scene

Darko here so we don't actually have a square

Two for the

Read seen

So let's go ahead and create once

Click the script with the upgrade screen route

And then click

Will you define a function in here

And what dysfunction needs to be in

Ability

And this is going to accept

A parameter upgrades

What is going to be of type array

Ability

And then Colin at the

Let's do a pass just to make this work

So basically saying we're going to pass on in a rear of the building upgrades to display on the upgrade screen

Now what we need to do is we need to get a reference to that seen disability card

Right so

In our upgrade screen scratch

Let's go ahead and create and export

Upgrade

Card

Seemed

And this is going to be of type packed scene

And then we can

Control

In here

So before we go any further

I'm going to delete the ability card

From my operate screen so attractive it to leave you so you can see

I'm just going to leave this ability upgrade card because we Don't Need That Anymore

And then I'm going to rename this each box container 2 card container

And I'm going to Mark this with right click as unique name so go ahead and Mark that there

Same as we did with the labels in the upgrade car

Open up script back

And we're going to go ahead and do an unread

Bar

Card container

And then we can take that as an outbox container cos we know that type

Is it going to dollar sign

Percent

Card contain

Alright

So now what are we going to do when we call set ability upgrades

What we're going to do is we're going to say

4

Upgrade

In

Upgrades

This is going to do is this is going to iterate

Over every element in this upgrades array

And

Give us

Each individual upgrade

And what are we going to do with that while we're going to save our

Card instant

Is equal to

Card scene

Start

Instantiate

Going to grab an instance of the card seem that we have

We are going to

Say

Card container

And Child

Card instance

I never going to say card instead

Dart set

Ability

FTSE 100

Set ability

So because Google doesn't know the type of this

We're not getting our recommendation

So card instant start set ability upgrades

And then we're going to pass out

The up

There

Just passing around this ability upgrade resource

And we're creating a card for each

Ability upgrades

Into the

Upgrade Sky

Alright there's a lot of set up here and we're not quite done so let's go on to the next thing that we need to do

Which is that we need to create this upgrade screen

When

There is a law

Let's go back to our main scene

Animes like the to Nemo

Upgrade manager

Subtitled by online-courses.club We compress knowledge for you!

Needs to create

The upgrade screen

When

We experience a level up so let's go ahead and open up this script for the upgrade manager

Let's do another export variable at the top

And we're going to say up to

Screen

Scene

And we're going to take that as a packed scene

Perfect

And so this on level up now

This is where the bulk of our work is going to come

So what we're going to do is we're going to

Take this code

What's create a new function

Apply underscore upgrade

Win a taking an upgrade here

As in ability upgrades

And then we're going to piss what we

So there's going to be some slight changes that we need to make hair so on level

We're going to move the Chosen upgrade

Out of

This apply upgrade function in back.into.the on level

Ok

And then in here we have some errors this chosen upgrade no longer exist right so I'm going to highlight

In my apply upgrade function

Highlight chosen upgrade hit ctrl d

Until I'm so I can all the Chosen upgrade variables in this function body

And I'm just going to upgrade instead because that's what are variable is

So Dad should

Clear things up

So I'll ever

We actually going to have to choose a couple of upgrades but what does keep it as for now

And then in here this is where we going to instantiate the upgrade screen so I'm going to save our

Upgrade

Scream

Is equal to

Upgrade

Screen

Scene.in stands

Where is going to go ahead and add it as a child directly so bad child

Upgrade screen instance

And then we're going to say upgrade screen instance

That's it

Ability

Upgrades

And we're gonna send

We're going

To indicate that this is an array

I'm going to pass out

Chosen

Sorting array with one element

Now we can test and see if this works so

We're not done yet but let's test and see if we work so if we do on level up

What should happen is that we should instantiated the upgrades

And

One ability upgrade selected which is the sword

The sword quick

So before we Run the game let's go back door to my mum so I can see what everything's looking

What's open up the upgrade managers seen the routine so not in the main

But in the roots

I'm going to change that exported upgrade

Screen scene

So I'm going to

In my files

Filter with the word upgrade

I'm going to find my upgrade screen under the UI directory and just dragged that on over

To my upgrade screen scene

Export variable

Alright then one final thing and I'm going to do

Is I'm going to go open up my

Experience manager script

And this requires

Target experience of 5

I'm going to turn down this target experience

21

For the first level

That way as soon as we collect one Vial we should be able to see something

Something around the game

And let's see what happens when I

And you can also increase the drop rate of the vile if you were

Be quicker ok so we've got a crash here

Ok night crash is because of a type or so it just doesn't realise that this array is the same

What were expecting inset ability upgrades

So we can just right as

And then

In brackets

Ability

Upgrade

So that will work

The other option which I don't prefer but what you can do is just remove the typing entirely

And

You'll lose some

Code suggestions in hinting

But you won't have to worry

These types being

But I think this is ok for you

And then there will be another crash too

Which I'm realising

Which is that we need to go or ability upgrade car

Or sorry we need to go to upgrade

And we need to supply a value for this upgrade cards in export so we never did that

Oh that's pretty easy we can go to where you are if you still have upgrades

In the file system

You should just be able to drive over disability upgrade card

Into that

Internet export variable there and some now if you run the game

Can you collect a vile

Then everything

Should

Start

Ok it's a look at that

Someone to collect that you've got your sword quickness

And then your description

So that is working now it's not working is that the game

Is still running in the background

Which is not

So what we want to do is we want to pause the

And something for we can actually control the pause mode

Various branches of the same tree so we can set some branches to pause and some branches do not pass

This is going to be very easy so what we want to do is let's go into our upgrade

Screen

And in are ready method

Select override the ready method

Underscore Reading

Are we going to do is there in a call get through

Pause

Is equal to

True what does going to do if that's going to pass the rest of the game but you have to be careful just because this is also going to pause

The current node the upgrades

Other way around that

Is that we are going to

Scroll down on the upgrade screen in the inspector

And we're going to change the process mode here

To always

What does it's going to say is this is going to say

Always handle this node always process this note

Even when the rest of the tree

Is paused

Cancel let's go ahead and Run the game again

And now when you pick it up you can see that the game has been paused

And we can still see our upgrade

So the next step is to make it so that we can actually select our upgrade from the UI and Wilko

That in the next lesson