Original subtitles

Now that we have our meta upgrade card it's time to create a UI

Through which the player can actually

Acquire upgrades

And before we actually work on a UI we don't have a way to specify a

Experience cost

4

The Opera

So let's go ahead and open up our resources folder

Measure up

And that's open up Armada upgrade rgd

And just below the max quantity

Let's export a variable

Call

Experience cost

And that will be able to type in

What's on at 2:10 by the fault just had some value is there

Alright so now we have a way of specifying the experience cost and our experience keen.com

I'm here should have the experience cost of 10

I'm actually gonna bump that up to 100 through here

Just because this is actually a relatively powerful upgrade all right so now it's work on our UI 4

Collecting those eyes

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

So are you I that we want to use for selecting the items is actually going to be very similar to the options menu were going to do it

Transition

Into that upgrade screen

And then we're going to have a bunch of

Cards in there

So what I'm going to do is I'm going to search for the options menu here

I'm going to duplicate the options menu by selecting it and then pressing ctrl d

No do I call this method

Menu

And Dougal

Open up that Meadow menu

And here's our Meadow menu

Now I mostly just duplicated outside the vineyard and the tilemap are here

I'm going to rename this Meadow menu

Rename the root note

What we really want as actually

Mostly all of this is going to go away so I'm going to delete this panel container right here

Alright so now we just have our margin container which is filling up our screen

And

What we're going to do is we probably need to introduce

A

Grid-container so let's go ahead and add a grid container

And the grid container does exactly what it sounds like it displays all of the child elements in a grid

In order to test this

Let's go ahead and instantiate a metre upgrade card

Like so

And then let's just go ahead and

Duplicate

Alright so are we seeing as there are two cards do not fit on the same screen

Let's

Duplicate let's just have three

We need our grid container to be 3 columns

Like so

We can change the spacing of the great as well

With the age separation and V separation

The first I'm going to say like my margin container and add margin

So I'm going to go to the market and go to the constant section

130 mobile

And then give it a margin of Eden Hall directions

And actually I might do 16 instead

Is that give us a nice amount of padding

On the left in the tops

Before we go any further I'm going to remove the script from this menu

Like so

Now that we've got those margins configured

Let's figure out why

Separation we need to do in the Bridge Inn

So basically we have the cards which are 170 pixels

Why

And so basically we need to figure out what

Spacing between each card is appropriate in the X Direction

Just going to take a little bit of a mess but if we look at our display window we have a viewport width of 6-ft

There should be a spacing of 49 so I just did all that

Sorry I'm off screen but that's how

That's how the math works in Sale

Let's select a grid container and scroll down to the

Age separation

And let's put 49-in for the 8th of April

And we should be perfectly on the edge here so now

Our cards are perfectly spaced out

Now if you wanted to

You could try and make the spacing

Between the edges and each individual card

A little bit more

And I might try to do that so I'm going to go to my margin container

I'm going to give it a margin-left of

24 which is an increase of 8 in immersion

Of 24 which is an increase of 8

I'm going to subtract 8 from the 8th

Separations that I have for you

So that didn't make a huge difference but the space is all about more even

You can also you can play with that space in to get it to work exactly unfortunately the grid-container

Doesn't really have a great way of lining things

One other thing you can do is change the 8 separation to something like

16

And then

What you can do is change the container sizes

From cell to shrink Centre

And that we'll centre it a little bit with even spacing between

So whatever method you want to use for spacing is fine I think I'll leave it like this cause this looks pretty good actually

So now we actually need to create the car

So

I'm going to remove all these cards here

Because they just for testing purposes

And I'm going to have a script to this many men

And the first thing we need to do this we need a preload the major upgrade cards I'm going to save our

Meta upgrade card seen is equal to preload

Meadow

Upgrade

Car

Dirty syn

So this is the line here

Now he did it actually load or upgrades and we can actually make this and export variable for user

So let's export that

Variable and we'll call it

Abrade

What does got upgraded

That will be of type array

Metre upgrade

Like so and then we're going to initialise that to an empty array

So

On a ready-made

Let's iterate over all of us upgrades also for upgrades in upgrades

What are we going to

We're going to save Armada upgrade card

Instance is equal to Meadow upgrade

Card seeing that instead

Like

And we need to grab a reference to the grid container

So I'm going to

Right click the grid container access as unique name

Turn on ready

Bar on red

I'm going to say my voice

Create container

Is equal to

Dollar sign for Sen

Create container

And again you don't need to use the dollar sign if you don't want to

I decided to use it for a concert

That we've got a reference to agree container

Let's go back to our for loop and say grid-container

Add child

Meta

Upgrade

Card

Instance

Now we can just test this real quick so I just run the scene by heating at 6

So I can run for and see

That did not work because we do not configure or upgrade here so I'm going to

Click into the upgrades array here

Increase the size 21 and then drag over the experience game to the first

Element

And now I Run the game

Now you can see that we've got to

Option in here

And obviously nothing is Hooked Up

Alright so what are we going to do well back in our for loop what we need to do as we need to say met up

Play card instant darts

Upgrade

2

Our upgrade that were currently looking at from this array

And I'm going to open up my

Meta

Upgrade

Card

And look at this

The function of extra cold SET M upgrade

And that's what we want to do

So back in the meadow menu

Let's call this a set metre upgrade instead

Because that's the proper function

And that should be fine

Now in arm upgrade car

If we go back to the sky

We actually need to update

The

Progress bar

Right we need to set this value

To be some process

So I'm going to

In America upgrade card scene

Right-click the progress bar set access as unique name

And then let's grab that in the on ready here and we're going to do it different way this time

Drag the progress bar over

Hold control in Drogheda

To generate the automatic

Line I'm just going to put a door sign in

We want to create a new function called

Date

Progress

And why do we want to do that because as soon as we purchased something

We're going to want to upgrade only the progress but for every single card right

We don't want to recall you know set men upgrade because that's unnecessary so we can create an update progress

And how are we going to do this one

What's Right pass in here

First

And we actually need a store a reference to the upgrade that zombie

Past

So let's

Create a new variable called upgrade

Make it of type major upgrades

And then we call set better upgrade here let's just set

Southdown upgrades is equal to

Why do we need to use self upgrade

Because upgrade is coming in here and doing what is known as shadowing

Meaning that

If we use upgrades

In this blog

It's going to refer to the upgrades that is coming in as

Argument

Or a parameter

Rather than the upgrade this to find a p

But by using the keyword self

We are referencing

The upgrade that is attached to this instance and not the upgrade that is

Here

Example

Then after I sign the upgrade

We are going to at the end of the sat nav upgrade call update

Progress

And then here we calc

The percent so we're going to save our percent

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

Is equal to meta progression

Save data

Anarchy which is called

And I forgot what it was called so I'm going to open up my medal progression

Scene

And it is cold

Metre upgrade currency

So I go back to my metre

Upgrade kardia

Pasted in there

So were getting the value of the data

The key

Meteora Greece

Which is going to be an integer

I'm going to take that

I'm going to divide that by

The upgrade

Experience cost

So I'm taking the car

Currency essentially and then dividing it by the upgrade

Now this could be a value larger than 1

So what we're going to do as we're just going to reassign percent will say percent is equal to

The minimum of

Percent and

So simply saying

Take whichever one smaller 1 or percent

And then we can set our Private bar

Start value

Is equal to

Percent

Alright

So there's one of the things we need to do and that is we need to disable this purchase but

If the

Progress is not 100-percent

So let's grab a reference to this purchase button

In the already here

Time is going to do that little quick trick again

So drag over and then once you're covering over the line hold control and release the mouse button

And so now we've got

A reference to the purchase but

And I'm going to set

Any update progress method

Purchase bot

Start disabled

Is equal to

Percent

West End

So what is this do well percent less than 1 resolves to either true or false

And as what were the signing to the disabled property here

So that means that if present a lesson one then disable this

And there's one more thing that we need to do and that is we need to make the upgrade actually added to the save data

When the purchase button is clicked

What we can do is

In the ready method

Wheel

Take the purchase button

Connect to the press signal by doing dark pressed

On purchase

Breasts

Alright and then let's go down to the very bottom

Let's Create that function on purchase

Press

And then we can do is very simple we can say meta progression

Add mirror upgrade

And we're going to pass in the upgrade

So again this upgrade it prefers to this

Now let's be a little bit save here

And I'm going to do a check in the on purchase press

And that check is going to basically being all check

I will say if upgrade

Is equal to null

Then I'm just going to turn out

Ok

So now that all of that is set up

There's one more thing that we want to do

And I'm gonna

Control click into this admin upgrade Hero

And I'm actually going to call save

Right after we had a metre upgrade so in here I'm just going to call save

Socially Everytime We add in bed upgrade the files going to be

Let's go ahead and go back to our menu

Let's go in a run ok and we have a minor issue

In a set manner upgrade function this upgrade that name this is actually called upgrade Dad

Tidal

But I think everything else

Here is fine

So let's go ahead and run it again

With this

Ron currency but

And look at that for progress bar has been reset our button is disabled

And we have the title and the

Text

Being displayed properly based on the description

So now we just need to update

To this

This text right here this 50 out of 200

So let's go back to Armada upgrade card

Open up the 2D

Views that we can see this

Let's call this the progress label

So this label that contains that 50/200 text right there

And

Let's go in and right click and

Like access as unique name

Go back into that Meadow upgrade car

And that will be part of the update progress as well so I'm going to grab on ready reference

To this progress label like so and then I'm simply going to see him

Progress label text

Is equal to

We're going to crab this meta progression currency again so let's

Create a new variable called

Currency

What's that equal to this

I'm just going to cut and paste that

Then the present is going to be the currency / the upgrade that experience cost

And an appropriate label text as going to be

String

STR

Currency

Plus

In quotes

Slash

Annum Plus

STR

Upgrade

Start

Experian score

Alright son now if I go to my menu and run the scene again

You could see that now it says I have 1 out of 100 experience required

And just for

The sake of completeness

I'm going to go ahead and collect some experience and then die

And then run that seem again

To see if that number updates

Ok so I'm going to quit the game now I'm going to run this again and you can see now that I've got 16 out of

Experience

So there is definitely updating

Alright there is just a couple tidying things to do

Before we are

Basically done with the screen

And that is that once we purchased the upgrade

We actually need to subtract

The data

From the currency total

So I'm going to copy this line again this meta progression save data upgrade currency

After we admit upgrade I'm going to say

Mirror upgrade save data to upgrade currency

- = the upgrade dot experience cost

Like so

Ok and then we need to call meta progression dad save

And then we need to

Call Abdi

Progress

The progress gets refreshed

And this was actually need to be called for every single

Mega upgrade car

So let's actually go to the murder of record route here go to the Node

And we have a groups here

And it's already part of the upgrade card

Because we

Duplicated

And I'm just going to go here and add the prefix and underscore so that it's got its own group

And then I'm here

We don't want to call update progress

Only on this card we need to call it on all

Meadow upgrade card so we can actually do something really cool here

You can call get three

Call group

And the call group

Takes the group name

Which is meta

Upgrade card

And then the string name which is

Update

Progress

And that's going to do is that's going to get every single note in the matter of great car group and then call the

Method on each one which is update progress so all of our cards are going to be updated all at once in terms of there

Alright

And then we need to take our animationplayer

And play the selected item

So

Down here at the very end of the unpurchased bracelets do animation player

Play

Select

Ok and then one final thing that will do

For testing purposes we'll just override this disabled so

Add a new line called purchase button disabled

Equals false

And now if I run the menu scene

I should be able to clear

So

I'm going to collect purchase

And now I'm at -84 and that animation played so that's great

So that's working well

I'm going to go to my metre upgrade card and remove that line will be hard coded the

Disabled = false

Get rid of that

One final issue to address with our upgrade card and that is

If you go to the menu and you run that

Scene

What you see is that when you click on the card it plays the animation and we only wanted to play

When

The purchase button is pressed and enabled right

And the reason that Dad's still around is because we didn't get rid of this on gym

So go ahead and remove this on gui input

And now you go back to the main menu and go out and play

That animation will no longer play when you

The card

And now the

Upgrade card is in good shape

ARDS are upgrade card is

Basically free

So in the neck

Lesson

We're going to actually make the upgrade functions in game and we're also going to add a live

Indicator on the card itself

Of

How many

Of the upgrades have been chosen right because you can choose an upgrade multiple times theoretically

The user or the player

Has no way of seeing currently how many upgrades

Of each

Type then

So we'll tackle

Both of those things in the next lesson