Original subtitles

The next step in our effort to me

Our game look a little bit nicer

Is

2 up

You do think you are

We've already done some

For instance we've got our theme

Roughly define

I'm here

And we very put a font in here

But we want to replace all

Is pan on saying why

Because

When I go into the game

This looks

Very ugly

One it is not enemy to do anything so it just kind of static

Doesn't really look

Wheezing

But also the style of the boxes

The text is just

Well there's nothing else to say other than it's ugly and it does

So we're going to start addressing that in this lesson

It will be

Tightening of the UAE

Presentation

Animations and all that over the

Several

The first thing that we're going to do is improved

Is panels

Here so let's go ahead and open

Upgrade card

Scene

We can see

This is what it is

Now

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

So our route type here is a type of panel container which you can see by hovering over

And it will tell you

What type

Internal container

Can be

Can have

Styles or themes

Applied to them

And so we can in our theme

Resource that

Save

Override the panel styling to make it

I want it to look

Before we go any further I've attached as

A resource to this lesson

Is it file called UI

Which you should go ahead and download

And once you extracted

You are

Zip you will see a UI that a Sprite in a UI that piano

I actually through together this you I myself

For this course

There was no matching UI for the asset pack ever using so I did my best

To try

Magic

And the UI Sprite file

Is a file for a

Programme called

Hairspray which eyes

Studio

You should definitely check it out if you're interested in doing looks like yourself

It's a very affordable and very power

The program

But there's also the png

The texture that

Is Ferrari

So glad and happy that you are pee

And actually you can just drag it over into the file

Perfect

And then you can drive a UI into

The theme

Directory in your resources theme

I think I'm going to put it in the assets folder instead so I'm going to create a new folder under asset

UI

And I'm going to move with you

That you are

Ok so go UI png

Play Snow let me just open this up and take a look at it for a

Cancel

Blacks here essentially are going to be panels and we're going to be using something that's known

9 patch or 90

Which essentially allows us to make a pen

That is of any size

With just a stat

Sprite here

And I can't I

Stretch properly and you see at work

As we can

Garden open up your theme

Serious

And we have all over theme

And we have a bunch of control nodes down here for Arthur

Now remember a control node is basically any UI element

So buttons

Text boxes

Number

Spinners

Cabs trees all that good

L r controllers and we can smile each of them

Independently

To do that we're going to start with

Overriding

Panel container

In the way that we do that is we open a bar theme so we got the theme panel here

And I am going to kill

This

Add button

Which says add a type from a list of available

And this is the worst of all of the things

Can be styled with a

And I'm going to search for penalty

Double

Ok so we've got the type so I can pay Knockin

And

These tab

Underneath

That drop down

Are all

Things that can be overridden in the panel container now just so happy

That the power container only has

One property that

Ovary

But other types

Control no one to have all kinds of prayer

Override

So it's like today pal container now in order to override a certain

Properties for

The panel you can either collect this Plus button here

That says override item

Or what I like to do usually is just click override all

How many clicks override on

And you'll notice now that the panel option underneath the colour tab here or like this the theme to A

Now it has a bunch of different

Pin it

We can edit the name

And we can delete

So what we want to do is we want to change

The style

In the style box is essentially resource that

Define

How the box

The panel should be

I'm gonna click the dropdown

I'm going to create a new style box

No just a word on all of the style boxes

The style

Empty is nothing so the essentially means

Starbucks text your means we're going to supply texture and tell

How to tile

Properly for the

What is just a flat colour in UK

Do things

Like change

The colour of the background

But also the radius of the corners and all that good stuff

And then stylebox line is similar except for line

I don't really ever noticed a time where I want to use tile boxes

Most of the time I'm using

Style bags

Something to click on Starbucks text you there

And now you can see that that is

So I

Here now open that

We'll get is you'll get a new inspector over here

And we got a preview and

You got a budget setting

The first thing I'm going to do is working a drag over

The

UI png texture onto the texture

Properly

Ok no problem is that this is now

Referencing

Everything right we have always individual ones that we want to use this

Grey

Barks here that's the one we were

So

I'm in a scroll down until I see the sub-region

Setting a click edit region

And this brings up a separate window

So you can navigate this window by using the scroll wheel

An

Using middle Mouse button to move or you can hold space and click in the empty spot don't click on the lines because that way

Not navigate you at will do something

And if you lose track of where you are you can click this one button in here

If you lose track of where you are

Likely same way over here

I can zoom in a little bit and then click this one

And that will reset my zoom

Putting this

Into can't

Ok so

This is a little

Hard to use because of you

Click without pressing space you will do

This drawing with this

Until we're going to go over what this means

Smallest change the snap mode to

Pixel snap

Zoom in on h

Panels

And what we want to do is we want to draw by clicking and holding

We want to drag this rectangle so that it is perfectly encapsulated

That

Boundary now I know this is a little bit hard to see on the video

And probably in your edit

But there is a outline around

That panel

So you're back

Should look like

And let me just show you as well

In the USA you can see

There is an outline

A dark outline around there so just make sure that you capture there

When you're when you're doing your

Area selection

Can we have these data lines and what are these

This is how you define

You're 9 slice

You'll see how this work

But basically we want to define

9 cm

Using

Four Lions

Where to find 9 cells

Where are the top left cell represent

The court the top left corner

The top right cell

Sensor top right corner

And so on

Other corner

And then there's going to be a top middle or bottom middle

Beside me

Left side middle and right side middle and then there's going to be the app

Centre and I know that's all

Let's just go ahead and set this up

You can see what we're talking about

So I'm going to drag

This line

So that it is just

Pass

The corner like so

Kemp and I'm going to do the same

For this line I'm going to drag this one to the bottom of the bottom most like

Drag it down

Until it

Just got in the corner like sell

Ok

And then for this line the rightmost line I'm going to drive this over

An actually

We wanted to be right

Here to see how there is a little Curve

Right here

Texture we wanted to

Reset just past

Samuel do the same for the other one minute drag the other one so

And in the topmost

Line needs to be dragged to the bottom of the high

Suggest like

Ok so now you can see that we've got essentially 9 cells

Here

Which defines our 9 slice

Or nine patch

We've got the top left

The centre

Top top

And you can imagine now imagine that this is

Search that

The corners stay there consistent size

What time is the high

Is variable so it will just take this left side and stretch it out as well

Possible no takers right side in stretched out as far as possible

And the bottom sing for the bye

The top and then in the middle that's essentially the fill colour so that will be stretched

To cover

The entire set

Are there

In this will become more a

In a second solicitors clothes that was that configuration done

Have you got a preview check it out

Are preview looks like an actual panel

Which looks really nice

You can see that the texture models have been filled in

Here as well

So if you

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

Are so confused about the marriage

Should be

Here are the numbers so we

4 pixels in the

13 pixels

4 pixels in the

Intend

So what we were doing was essentially we were sending those

Graphic

But you can also type

I'm here for the same as

Helen the actress stretch this is how those

Different pieces of the pan

Will be stretched in our case for using flat pics

So

Tile

Or stretched doesn't really matter so we just leave it on stretch

And that's pretty much all we need to worry about

Now you're not is that if you have your ability upgrade card in contacts that hasn't been updated

And the reason is

Because you need to click away

Back

So that good

So just click to a different scene

Can you come back to me building upgrades

And I can see

We've got power

Panel looking really good

And if you crab

If you grab one of his corners and stretched out

You can see what a nine patch rectangle is doing so noticed that

No matter what size you said

For this panel by dragging this corner

The corners are always going to be maintained their perfect pixel ratio

What are the top middle here is going to stretch all the way up

That is the same for the sides and the same for the

So essentially all of the corners are preserve

The sides and top and bottom

Are stretched

According to what you've said

And then the meal will be filled in with whatever your middle section

So in Ark

If I go ahead and open up the theme and go back to that sell boxed

Our middle is

This colour

Right

Here

Ok

Let's go in a reset the size of this thing by going to say

Not custom minimum size we want to keep

So we want to reset the size I just clicked the reset

And that will put it back to our

Minimum

And Alfie Run the game and get your first set of upgrades

Now we're starting to look a lot nicer

In the next lesson we're going to continue work on this were going to set up

Another nine Patrick

To make the

Card look a little

Nisa