Original subtitles

Let's get some UI up on the screen

To represent the players health

I'm going to do is we are going to create

Health bar

In the pliocene

So I take control shift

To open a quick open scene dialogue

Let's go ahead and search for

The player

So we're gonna play essene open

And what we're going to do is working to create a

Progress bar same as we did

For the Xperia

Let's go ahead and add a child node

The player

Progress bar

And let's move the Priory Spa

Above

The pickup

And let's change a couple of these inspector settings

So I'm gonna unsure

And again setting mean value and max value of 0 in 1

We can leave the step as it is let's at the value of .5 just so that we can see what we're working

Another custom minimum size

Let's create a good size for us let's try 64 in the

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

A little bit big so maybe will do 48

And let's go down

I think 32 is going

Just fine

And then for a while let's do something like

Pixels

No you're not going to notice a change when you change

A pixel

And that's because we need a change this Transformers

Now because we've got a custom minimum size

Set a 32 and 8

We should just be able to collect this reset button on the size property here

And that was

To the customer

Minimum size

Now this might still be a bit too thick so I'm going to turn it down to 6 in a custom size

And then click the reset button again

And it seems reasonable

No we don't have to manually offset this now what I want to do as I want to change the pivot offset for this

Call no

So by default the control nodes have pivot offset letter in the top left corner

And remember we talked about the pivot offset being the note around

Or rather the point around which

The Node will rotate

So if I click the rotate mode

Here and then I wrote a

This

You can see that it's rotating around

The

Top left corner

And it's not like we're going to be rotating this it all but

It does make sense in terms of layout

You have the origin be

In the centre of this

No so what we're going to do is run a scroll down a bit upset

And we're going to set the X to 16 because it's half of 32

And then we're going to set the Y

23 because that's half of

Now is in the centre is the one we rotated you can see that a bit offset

Worstest

Now what did I do that because now it's easy to move it so if I select the move to

I can centre it so the cross is in the centre

And then move it

To where I live

To be healthy

To be what's a right there and you could even if you wanted to if you prefer

You can put the health bar below the player

If you want

I think I'm gonna put it above the player just because I think that's a little bit more traditional in video

But the positioning of this

Progress bar

Does not really matter all that much so do what you think is best

Alright so let's

Open up our health components

And let's create a little helper function in here

I'm going to

Create a function underneath a damage function call

Get

Health

And what we're gonna do is we're going to say

First of all

Max health is equal to it's a last

What is 0

Then we're just going to return

Otherwise

Let's go Henry return

Current health

Slash

Max

And we can even go further here we could say

Return the minimum of current house / maxwellton one

And what's that got to do is that's going to basically make sure that we can't have a number greater than 1

Ok so no helper function

Let's open up our players

And in here let's grab a reference to the health component because for referencing it in

What place is now in so what I'm going to do is I'm going to

Go up

Hello this on ready up here

And I'm just go

To create another one via

Underscore

Al Capone

And then let's go ahead and replace all in

What does a health component

So we can go down and check the other day

Select the dollar sign health

Control d

To highlight

The second occurrence of

And then just replace it

Health underscore compare

So let's go back to your health component script

Which you can navigate between your opens

Here by the way in

Panel

And we currently don't have a signal that tells us that the health has changed

Cancel let's go ahead and do that

I'm going to write another signal underneath died

I'm going to collect health change

And in a damage here

What I'm going to do before this calibre line

Is I'm going to

Right

Health check

Darling

So now or doing is essentially just sending out an event

Every time

Change it now

This will not work

If we end up having a way for the player to heal

So this is probably gonna need to be referred

In the future

But for now this work just fine

Don't go back to my playlist

We're going to underneath the damage interval timer

Connection here

In the ready-made

Let's

Do

Health composed

Health

Underscore chain

Dr No

On

Health

Change

What's scroll down

To the bottom of our script

Create that function

Hello

Changed

And what we're going to do is we're going to get a reference for the progress bar which we might as well go ahead and put me on read

Up here

So let's get a reference to that

Progress bar

Progress bar is he

2 dollar sign

Progress

And let's actually rename this so over in the pliocene I'm going to double click this to

Rename it and we're going to call it help

And then make sure change

Ok so got her progress parlours renamed this to health bar as well

Good to be constantly iterating on your naming

To make it as clear as poss

So

On health changed what we're going to do

Is going to say hello

Bar

Value

Because that is this property here

So if I scroll down to value here

You can see the dad

That's what we need to change because that change

How far along the progress bar is

If you ever unsure what a property is called

You can either check the documentation or

If you have her over this property

It will tell you what the property name is

PropertyPal

You here and then max value property underscore Max or Max underscore value

So if you ever unsure just know that

You can access the property names

Going to say health board values

To help underscore

Composed

Get

Health

Invoke

And then we're just going to

Call

This line

In the ready-made

Now we could

Copy and paste as well to make sure that this is updated when the game start

What I'm going to do instead

Is I'm going to create a new function below check deal damage

Which is Justin Bieber called update health display

I'm going to pay stat line in this healthbars

Eagles health component

And the universe is now we don't have to worry about

Copying pasting this line we're going to call update health display

And know that funk

Contain all the code that is necessary

To update artist

And I'm going to go ahead and replace this and the ready up here

When I call up day

Display a cooling update help display in ready as well as

Neon health check

So let's see if that were

So you can't see the health bar very well

It looks like our health bar is not

Let's go in Hindi

So I'm going to start the debugging process

Bye

You can use

Breakpoints

So maybe this is a good opportunity to do

So I can place a breakpoint here

By clicking in the gutter next to line number

What are tyres that won't tell the game to pause execution at

What's the point so that we can inspect

Various

Issues with Ark we can inspect variables and all that good

So

KFC on health changed signal is being emitted proper

We should see

This

Stop the games execution at this

What's going around

And I'm just going to go ahead and

Get it down anime

Ok Anna breakpoint is not work

That means that are on health change this

King cod and why is that

And the reason is because we actually have never connected to that signal in are ready

And perhaps I had that earlier and I just didn't

Connected but it's very simple

So

Health components dot

Underscore changed dartconnect

On

Health

Change

And I'm going to leave that break point

In the code here to show you how

So if I go

Into the game and get hit

Alright so you can see that as soon as that code is wrong

The game has pause execution you can see that is paused

Here and I can actually inspect

All kinds of stuff in the debugger

So I can see what the self is what the damage interval timer is but this I can see what the number of colliding bar

Please is right

I can also see the list of breakpoints on the right here

I've got a number of

Options

So I can turn on skip breakpoint I can copy the error I can step into the function I can

Over the function and I can continue

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

So these are the three functionalities that you're going to 1

So we started this breakpoint update

Display let's say that

I want to see actually I want to step through the execution of this funk

What I can do is I can use

The

Intu Barton

When I click that

That's going to immediately take me

To the first line of Ed

And now I can in

Everything

I'm here ok and then I can also continue to step into so if I click this button again

That's going to take me to the health percent function because that's what is calling

And then in here

Let's say that I wanted to nitpick or inspect various property so I can see

What is my Max health I can hover over that I can see all well it's 10 ok

What are my current health I'm going to hold over that

That is 9 ok

That makes sense and I can step

Over these

Siemens so if I click so we've used to step into

A couple times now

Banana fake Step Over

You can see that it goes to the next line that it Valley

And then I can click Step Over Again

And that will take me

Back to

Just after the health changed and minutes ago which is what kicked off dad in tyre

12 oz

And we pretty much step through all the code that we want to inspire

And so to continue the execution of the game

I can do

Hitler's continue

And I will take me back to the game

But we had the break point again because

The health exchange

If I want to I can just on

Select

Breakpoint

Continue

Now everything is good and I can see that my health is actually going down

Which is very hard to see

So let's address that

Style of the progress bar for the health bar

I'm going to click my health bar in the scene tree over here

I'm going to scroll down

Until I see

This Styles section here

Now we're going to get into in more depth

UI theme

Because you're definitely not

Not even close to polishing up this game yet

Now's a good time to

The first little bit of exposure

So we can seem h u i l

With

Athene

And we can override individual parts of that theme

At the individual node level

So another word

I can provide in global theme

That all control nodes

Will sell themselves after oral inherit the styles of ethene

But I can also override

What's a 15 of the individual love

And that's what the

Styles

So what

If I decide

That I want to override the fill here

I can't click into this empty button right here

If I select new style box

Why because I'll B empty is what it says it it's empty

Of course we don't want that so I'm going to undo that

What we want instead

Is we want a style bar

You can see immediately upon

Choosing Starbucks we have just

Regular rectangle

Boxer

And to make it easier to see I'm going to talk with the visibility of these areas I'm going to talk to the visibility of the pick-up area

I'm going to town with the visit

So we have much cleaner

Go back to the health bar

If we click into this so I'll box flat here

You can see that we've got

One of them being the background colour

This is going to be the one that's most important to us

Something it's important to do when you're working with an asset pack or

Just pixel are generally

Is understood

Maybe you can't tell

Explicitly

These colours are all very thematically see

So this green in the health potion this light

Is the same green

This fountain

Because the pallet is very restrictive it's it's the same colour as you can even see that the flesh colour of the sky right

Is the same colour as the sun

A little bit of this

Up here

So all the colours are very similar and the reason I bring this up is because we want to do the same for you Ireland

Are games going to look out of place if we for instance went to this background colour and just choose a random shade of green

That will work

But it's not going to look

Like if it's in the game

So you don't have to do this

But

I'll give you the hex code

I'm going to

Grab the colour

Of one of the screens

So this one friend

431

And in my

Background colour

For my style box flat

I'm going to Golden paste

So again that

Text number

43

E1

B

I'm going to enter

And so now we've got a green colour that

Ok let

Clothes that by clicking the Sky box

Compressed air

And then I'm going to

Do the same for the background so I'm going to collect this empty here

New style backsplash

And I'm gonna open it up and we want to change

Bgcolor here as well

Imagine that we probably want to use this outline colour for our bgcolor

So I'm just going to go and grab

Caveat in a read off the code for you as well

So I'm gonna go to my bgcolor here

She stayed in there

And it is

3 f

26

31

And so now looking how much better that looks the

Let's say that we want to have a border around or health bar so that it matches

The thickness of the outside

So let's

Clothes style box flat for the background open

The film

Tile backsplash

In what we can do in here if we can change the border

Here so

I'm going to do

2

222

Cancel that out of order

Now the problem is that

This border colour is not correct

So what I'm going to do as I'm going to open up the background style again

Clicking device bgcolor I'm going to copy this

And then I'm going to go over to the

Border collie

Of the Phil Style

And Peace that colour in

And now we've got a pretty respectable

Health bar

With a

Bored

So let's see how this looks in game and see it

Works

An hour in game we can see the health bar around

The character

And as I take Dam

I'm going to see that health bar get deployed

So that is

The UI implementation for the player health