Original subtitles

Let's continue making our upgrade card

Nisa

And we're going to get into a concert in this lesson known as

Seem very

So let's go ahead and open up our theme inorganic create another

Panel container type

Can you open up the theme

By double-clicking our theme

Trys

And then click the add button

Again

Or on the right hand side

Let's call this

Alton

Kennel

Container

So we can have type our own name in here and then click add type

You could do that we don't get any

Because

Does not recognise this type

Essentially what we cannot do is really go over to the tools button right

Tab

And then we're going to click the Plus button next to base type

I'm going to take the base

Panel container

Just like so

Set up a standard panel container

And now you can see that

We have a panel option

And we're going to override

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

As well so

Quick Plus

To override the item

And then we're going to collect the empty and do new style boxed

Click Internet style box text

How much drag over our you are so I'm going to search for UI in the file system

Drag over that png onto the

Mr property

And I let scroll down and click on edit region

And we're going to set up a 9 Patrick the same way that we did before

So I'm going to use this light

Square in the middle

So it's actually I'm going to click and drag from the top

To the bottom right

And you can turn on pixel snap so that you're doing

On a pixel staff pieces you can also use a great if you like but

Snap is good enough for the size of art

And everyday drag over these

Margin line

I'm gonna drag it over one pixel

And one pixel

And one pixel down and one

That's essentially what we end

Play clothes

And we can verify that our text your margins are set that way as well

And you can prove you are panel to make sure that it looks

As

Ok

So what is this mean

Let's open up our upgrade card

So I'm

Ctrl shift to search for that

Open up the upgrade card

And now if I have the root type selected which is panel contain

And I scrolled down

To the theme section I can see an option that says time

Variation

And under here you can see that we have the alternate panel container

And I clicked that

Liquid

It's using the the other panel containers Style

As well

So this is a nice way

The type variations are nice way to have multiple differ

Themes or stylings for

The same control

Element we're not gonna do that here that's why I'm going to undo that type

What I want to do

Is that want to use that panel container essentially to wrap

The title

Of

The

Upgrade that route

So let's go ahead

Do that

The first thing I'm going to do is I'm going to create

Underneath the box container

Another

Panel container

Likes

I'm going to move it up to be the first child

And I'm going to move the name label label to be a child of god

Panicking

What's click on display or container

Scroll down to that type of variation option

And change it to alter

Panel container

I'm going to like this name label now and

The

Horizontal alignment to centre in the

Vertical line

Too I'm gonna use bad

Because I think there's some spacing that weird with this phone

Bottom makes it looks like it's centred prop

Ok so that's looking good

One thing that I think is really useful to do is to add some padding in your UI elements give

4 elements of room to breathe you can see there

The text

Is right up alongside the side of the

Card here and it doesn't look good especially considering that were using these really thick outlines and his general

Alarm

Spacer

Chunky nest to the UK

And so what we can do is

As a direct child of

Ability upgrade car

What are in margarine contain

And then let's go ahead and

Drag that up as the first time

And then we can drive the vbox container as a child at the moment

Ok

And then for this Martin candy

What's selected

Scroll down

To the

Theme override can't

And let's give it

IPad

Or margin of 4 in everyday

And now that's looking a lot better and honestly I might even go a look

Hiya I might do

In

Yeah I think I like the way that look

Quite a bit

Now the top is a little bit more

So we can turn down

The tab we can keep the top at 0

And that

Just fine wondering you might be noticing is that our text is a little bit too spaced out

Between each

Line

And we can actually theme this as well

So I'm going to go ahead and open up my theme file

And let's

Add a new

Label type

So I want you to think about for a second how do we go about adding a new

Type 2 Style

And

We open our theme in we collect this right

Plus button over here

And then we search for label

And that's how we had sales

Ok and so you can go ahead and click through

All these tabs here

To see what you can override are we can override the things you expect like font-color

Find Cheryl O'Connor all that good

We also have a line space

Here

Which is what we want to look at

And we can override the actual font file and the font size and all of their goods

What I'm interested in is overriding this line space

So what's quick add

So I can wear in this

I don't

Honestly no it is I can't supposed to be

That's the least that's what it looks like

And I'm going to override a line space in by clicking the plus and then just said it to 0

Now you won't see an immediate change here but if you click away and then come back

Now art

Next is a little bit more

A little bit more like you expect where

Compressed

Let's go back to your name level now

And we want the name to be big

Right we don't want the name to be the same size

Does the rest of it

So what we can do as we can scroll down

The name label inspector properties here

And we can actually override the font size

So I can

Answer

Equal to 32

Again we have to do multiples

Of 16

Because that's how they fall

Is design

Just a pixel

And now we've got a big name

I'm here

Now the problem is that this is going to make our cards a lot bigger

Used to

Let's just take a quick look at how that looks in game to see

It's a little bit too big or fine

So that text is taking up a lot of room by here's what we

Right we can

Georgia's name label here and we can go to the top

Of our inspector here

And there is an option

Call

Auto

Mode

Let's go ahead and select auto wrap on Word

And what that's going to do is that's going to wrap

What's the next line

And then we can do as we can change the horizontal line

To be less

Because that is

I think of better display when

Trapped

Let's take a look at that

Again UI design in this

Engine is going to have to be a little bit enough so if it seems like I'm going back and forth and a lot of things that's because

Trying to figure out what the best way

Two displays

It takes a little bit of

Of fiddling I don't want you to walk away of the impression

I am so sure everything I do that I don't need to test know the price

Building a game

Is it alright if you need to try something see if it works try another

Can you see if that works

You're not going to

Get the right answer the

Switch time very off

I think what we should do as we should

Change our custom minimum size

To be something like

115 the X4 the ability upgrade card route

Just a little bit

All about wine

Let's go out and give that

What I can see

I think I look too much

And I'm going to go back

2%

Text so I'm going to

Click on the name Layla

And change the horizontal alignment

Ok so we're going back and forth little bit but that's ok

And the let add some padding to this penalty the thing we can do is we can either add another margin container

Is a child of this panel container but we can also do

Is we can also open up our theme

Select the alternate pen

Container

Here

And then

Open up the Starbucks texture and we have something called

Can't

If I scroll down

So we have contents margins on

The style boxhead

I will change this

For in all directions

And then I'm going to click away from the building upgrade

Look back and if your label has disappeared

They might just be ok dahlberg it certainly was for me

You going to hide it with this type of visibility and then

Set it back to visible and shut up

And now he's got padding around our

Can't enlarge

That's looking much nicer

And a one file think that I want to do is add an outline around the

Name

So let's go ahead and some like that

And

But scroll down to the theme override

Section

What's change the font outline colour so we're going to church

The Spar

I'll find out and colour to make It Black

Let's make the outline size here something

6 which is I believe over you

Elsewhere

Can also use a Thai think he is probably appropriate actually

This UK

Can I change the font outline colour

To the Blue that

Click here now typically what you can do as you can open up the colour and

The colour picker

Here

But this appears not to be working

In my version of you do

I'm going to use a different colour picker tool and I can read to you

The Hex codes on picking this dark blue outline

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

And the hex code I'm going to paste in here

It's too

6

2

B4

So get the hex code

Put in there and I'm also going to add as a swatch bye

Expanding the swatches button here

Why does watches drop down red

And then click in the past

And now we

Ok so now you can see that we've got a nice outline around our name

And we can also experiment with adding at around the description as well

I'm going to go to the description labour

Scroll down

Select the font outline colour

Open up swatches

Select that blue

And then change the outline

What's the hooks in game I'm inclined to say that I think that looks really good

Yeah I think that looks fine and so the last thing we can do is do these are too bunched up together

Description and the name

And so I'm going to

Beatbox container hair and we have an option at the bottom

Steam override constant of separate

Scroll down to the

The theme override section

Alexa turn The Separation to something like

Or let's do

And let's do

Ok I think 12

Create

Yeah that looks great to me

Now wanting everything is

We have little holes

In our text here

And that's fine

This happened before

What does garage description label

What turn the front shadow colour on under theme override

And then let's just change that

Go to our blue

And now we filled

Alright so now text is low

Good

And once I know saying you'll notice that when we click

On either card

It's very hard to choose an app

That's because we introduce a new panel container

Which is intercepting the mouse

So remember earlier on in the course

I mentioned that control nodes

Will

Have a certain behaviour with how they handle input

Such as a mouse

In the case of the margin container

That option that filter option is past

Which means

It will take a input event

Mica Mouse Harvard or mouse click

And if it doesn't handle that input event it will pass it up the

To it

However with some node type

Like the pelican

The pill container actually buy

Fault

As the stop-motion filter on

And so this means that

If you

On in area that is represented by the panel container

It will not make it up

Parent and the peri

Is where we are handling are on gym

This is this is a gacha this is a very pretty thing with Google

They contribute up to

If you're not careful so

Just need to pay attention to the mails filters

And by The Fall

The most nested node is the first note that guy

What's the inputs of the input

Start at the lowest level of the tree

And and bobbles

If that makes

No but we're just going to turn this

Panel container

Mouse filter

To ignore

And you can also use past but I like to use ignore

And then now I Run the game

We should be able to

Selecta upgrades even when we click on an area represented by the pain

Ok

Perfect and now our upgrade card is starting to get in good shape