Original subtitles

We've got our code in place for saving and loading data

And now we actually need a way for the player to be able to choose the upgrades

When they're in the game

So we are going to need to create a new UI for

And to start let's Create the upgrade card

Now what I'm going to do

Is I'm going to

Essentially just copy the upgrade card that we have

So if I go to my upgrade

MyBuilder upgrade card

This is basically what we want duplicate here there will be some minor changes

I'm going to duplicate this

Card now

We couldn't merge these together so

Include some functionality in here or abstract out the common functionality between

The ability upgrade in the middle upgrades

I think these scenes are going to end up being different enough from each other

That it's not worth the effort trying to reflect

And unify bunch of things

So what's going to straight up duplicate

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

In one trick you can use if you go your tab here with the ability upgrade card

Play cricket you going to punch other options here

And you can for example click showing files

And now automatically expand your filesystem

To where that seem is locate

And that makes duplicating it very easy so I'm just going to

Select that ability upgrade card hit control

And make sure that you have the file system

Select

In contacts

Control d

And then I'm going to call this Meadow upgrade car

Get let's go ahead and open up that made upgrade card and clothes

The other scenes

Unless detach this

I'm going to detach The Script

Annan

Create a new script

That we can use

And let's open up our ability upgrade card script again

And let's copy over some of the functionality that we need

And actually now that I look at it I think we can just copy the entire contents of this

Scripture from our ability upgrades

Which I

Up here you can go ahead and open the ability upgrades card scene if you don't have it open

Go ahead and

And then we'll put it into the meadow up

Play card

And so I'm going to close that ability upgrade card seen and I'm going to rename this route note in my med up

Card to

Metre upgrade

Alright so what things do we still need

Well we do need the

Play in animation

In the playtest car

We are going to rename this function to set up grade and this type is going to

Measure up

Ok we don't need this bit of the select card so for other car

Little loop around here we don't need any of that so let's get rid of

An actually we don't even need any discard whatsoever something

Remove this play discard function

And that should be good

Ok that should be a good start

For us

And let's let's go back to the 2DS in here

And in our animationplayer

We don't need this card animation anymore so I'm going to

The animation button

Click remove while I have the discard selected

No I'm going to click ok

Just to clean it up because we don't need it anymore

We are going to need a couple more

Elements on this cardigan

One thing that were going to need

So in the box container here let's click add child node

Button

And then let's say

What's cordless button

Acquire

Or we can say

What's card purchase

Those are purchased but

And we'll call it purchase button here

And let's Mark that as a unique name by right clicking

And saying access as unique name

And one other thing that we might want

Do is have some sort of indicator of how much experience is needed

For this

So I think we can put

In this box container as well

So let's do a progress bar

Put that above the purchase but

Let's uncheck show percentage

Set max value to one the step is fine

And let's see what happens when we set the value

5

Ok so we're going to need to change the inner colour of this

Progress bar so I'm going to scroll down to

The theme override

And for the

Phil

I'm going to select new style box flat for the Phil style there

And I'm going to go into that and let's see what we got going on

So the bgcolor I'm going to change to that light blue for the experience in that is

Hex code 75y 3FF

And I'm going to send my border with 22 in every Direction

And then change my border colour

2

I have an alpha of 0

Kept and I'm going to change the content margins to

4-in the top

For in the bottom

And I wish I could something look

Like this

Alright

But perhaps we should have some time

To go along with this in perhaps even in ice

So let's Create another element

And actually let's create a new age box container as a child of that

This container

Let's put that above the progress bar

And inner Edge box container

Do a texture rectangle

And then

Is there an Xbox container is essentially the view box container but horizontally so it will horizontal

Align the item

In for a texture rectangle here

Let's find that vile resource so we going to see in the game of

Experience by

West draganova

Experian smile.png

So that it's a nice little icon there

Ok and then for a label let's just put in some

Placeholder text like

50 out of two hundred

This label is a little bit

Off in terms of it online mint and this is a problem that were having with this font

We can ask that are little bit by going down to the container size in here

And changing the vertical

Sizing to shrink and

Wish you put it at the bottom of the Xbox container

And that sort of aligns it a little bit

Ok and then with the label selected let's change the type variation under the theme section

Two blue outline

And we are good girl

Now one thing that we can do that very interesting

Any

Each box of the box contain

Is we can actually change

Sea margin or the separate

To be neg

So if I go to my age box container here and I change my separation to be near

4

I can actually make these things appear some

On top of

And I think I'm gonna switch the order of this so that I can make that happen so I'm going to

The text to read below level

And maybe it doesn't look so good

Being exactly overlapped by that but if I change my separation to something like -2

Or perhaps -4

Not my look a little bit nicer

Ok

So that's actually not looking that great so I'm going to kill it with a different approach year so I'm going to keep

Text Direct

But I'm going to create a margin container under the sea box

And I'm going to make the progress bar a child of that margin container

And then I can move my text array

As the first child of that margin container as

Now you can see that my text Direct goes a little bit haywire here

That's ok we just need to select the text erect down here

And change the container size

2

Shrink begin

In the horizontal and shrink begin

In the

And that's actually go ahead and move that texture

As the last child of the modern container that Rangers on top

I'm going to show you a little trick that can make

Organising a lay a little bit better

If you go ahead and add just a regular old control note

2

A container and then make whatever you're trying to position a child of that control note

What your notice now is that I can take this and I can position it harder I want

The container affecting that

So what does control now I'm going to keep it locked in the top left

And I'm going to change the sizing of that control no to shrink

Begin and drink begin in bar

Cases

So that means that it will be at the top left corner

And then my text

I can simply take

This and use the move tool to position at haiwan

And I'm going to put it

Reading vs

RV

Progress bar like cell

And now he's got a pretty at least decent looking

You are

For the cost of

The ark

Another text is a little bit disassociated from

And so dealing with her levels of nesting here

I'm actually going to get rid of that label out of the Xbox contain

The experiment failed that's ok we're just doing

Some iteration trying to get the UI to look like we wanted to

Now this label and it's margin container actually need to be associated together

So I'm going to create a new v box container

And

I'm going to take that label and emergent container and put it as a child of their vbox contain

Like so

And I'll keep that above the butt

Kia

Ok so with the label let's change the text

To be

Scented in the horizontal

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

And then for the vbox container that contains that text

Let's go down to The Separation and make it something like an egg

2

Or let's try

-1

So -1 works well as a separation there I think

Alright so that looks decent I probably would spend more time playing

The placement of this

We need a move on with

The presentation of the Rose

The card

Upgrade card

Now has

A different pivot offset and it's actually going to have quite a bit of a different pivot offset than what we

Configured for a custom minimum size so I'm actually going to get rid of the customer minimum size in the Y

So I'm going to set that to 0

We will keep it at 1:50 because that's a good size

Turn the card I might even bumpers up to 170

Yeah I think 170 looks good for

It's there

Alright so

Let's go ahead and expanded this entire subtree here

And let's select everything

With shift key

And what does Guinness scroll down until we see the mouse filter app

Now

It's going to say ignore probably but we just added a bunch of different control now

So what we're going to do is run a click

Filter mode

Clickstay

And then we're going to set it back to ignore

So what we doing is for selling everything to stop

To get all of them to be the same option and then setting them all back to it

Because if we don't do that

And we have them all highlight

Then there are some in that highlighted collection

Can't set to ignore

Even though that's what the u i is 10

So just setting it to something else and then sending them back to ignore

We'll make sure every single night here is

Set to ignore

Now the one thing we don't want to ignore that is the purchase button

So let's go go

To the purchase button

We probably should have excluded out from our

Selection but that's ok

What does go back to the

Mouse filter mode and Reece

Because we don't want to

To stop

Actually now that I think about it because we enable clicking and harvest

The cards

The buttons not gonna work so I think

I think in our case it actually makes more sense

To not have

A hover and select state

Cardinal

Actually going to delete most of these animation players and his animations

Let's go ahead in Inner animation playlist delete the in animation so I'm going to remove that

We will keep the selected animation by let's make a minotaur

So that our purchase animation with scroll in zoom in just a little

Purchase animation

Goes from one point to in the scale all the way to 0

But

I want to instead go back to 1

So at last key from here I'm going to change that to 1

And so what we're going to get is just sort of an exaggerated

Will shuffle when week

And I will be

Perth

For our selected anime

Anna let's at the interpolation mode on this route

2 cubic

So that's probably the only animation we need

We don't need a hover animation player because that's going to be annoying

For when we have a budget cards in the screen so

What's the Leeds v hover animation player

And then let's delete the other player

Component

Here

And then let's go into our script and let's remove anything related to those end

Directions here so

We don't need to play the in animation

We actually don't need this

Play info

So we'll get rid of

We do want

Yes functions

Card so that's good

We don't need this selected function anymore

The so I can sing anymore so let's get rid of that

And get rid of it is a weed

We don't need any other

And will remove this so I can sing

And we also don't need this disabled flag anymore so let's go out and get rid of disabled plug and then

Get rid of anywhere worth checking

That disabled flag also we don't need this on now

So get rid of that

Disable

And

Disable there

Ok and then we don't

This connection

So you can see why we opted to create

Brand new seen compared to our ability upgrade card

So it might be tempting

To try the shop

Two similar things together in terms of

Function

Here is the tree for our ability upgrade card

And then here's the tree for a metre upgrade

It is completely and totally different and we don't need

75% of functionality from the ability upgrade

We just used it as our base so we don't have to rebuild everything from scratch

And you can see

It's become so much different so

I know especially if you're engineering minded the temptation

To say these things are going to be similar so I'm going to immediately try to make them the same thing

I'm going to use inheritance or I'm going to do component design

A lot of times especially when you're working on you wise

That is actually going to hurt you more than it

Certainly if you end up

Finding yourself using a lot of similar functionality all over the place

Then you should definitely

Abstract that into something that like a shared scene or shared

Or something about nature

If you just building out a new UI initial

Just start with duplicating

And work with the sea

And if you discover that it ends up being largely the same then you can figure out

But I don't message them until you're sure

That are going to be the same because that's just

So we've got our scene which is much different in our building upgrade car

And it's looking great

And so

In the next lesson were going to set up the UI that can display all of our upgrades