Original subtitles

Let's continue by making a hip flash

For our enemy so in addition to

Showing the damage numbers when enemy hit were asking to flash the enemy

82 very quickly this

A very Common

In games to convert

The player that died

Has been done

To the

And so yeah let's get ready

We're going to take a component base

Approach again

Just let me have

Reusable component that we can use

Instead of duplicating code in

French plaits

Now it's all a trick

And you'll see why it's tricky

In

Little

But

Here's one I'm going to

Let's create a new

Scene

And give it a true type

2D scene

Let's call it a hip flask

Composed

Just like

And then we can see that in SIA

Component

So we've got our hit flash components saved let's go ahead and create a screw

With the default settings is fine

Let's do an export variable

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

What do we want to export we want to

Westport

A variable that represents the health components of lets.do export via health compare

And that sort of type no

Turn the lights to another one export

Sprite

And that will be

Sprite 2D

Just likes

Ok so let's create a

Ready method override

Here and we're going to take this health compound

And we are going to connect to the health changed

Signal

Health component

Health check

Dartconnect

On

Health

Change

Let's Create that function

For honour

Change

I was just

Passing

Let's take a look at our health component by opening that

NR health component here

When it is midday

Changed signal

It doesn't have any r

So we should be good with just a function with no arguments in our head

Which component script

Now this is where things get a little bit

Before we go any further we need to write

A shader

And so I'm going to go to the 2D mode here

In the Hitler's component

I'm going to add each child node

That is a

Right now this is just going to be temporary

So that we can see what we're doing when we write our sheet

And I'm going to search

You can use any spray that you want I'm just going to drag the wizard anime over

The texture

Just that we can have

So select that Sprite 2D and scroll down all the way to the bottom until you see

The material

Click that drop down and then say

New shader material

And then

Click into that

There's a Shearer property here

Quickly empty and click a new shed

And this

Should be fine you can create a different shaded directory if you were

But I think we'll just leave it in the component directory that's fine

For me

So I'm going to create

And then click Internet shirt

2

Open and

Cancel this is our shader editor in Italy pre-populated with these lines and shaded white canvas item

And void

Cheetahs are one of those things that it's going to be impossible to describe them adequately

In a single lesson

These are

Very complicated things that

Kante

Long time to get

A grasp of

Premier do my

To get you interested

The concept of

Sheila

Hopefully that can kick off

Sam further learning for you

So the Shield type of line here is just telling us what the type of the shaver

For to the applications we want to use

Which is what it is

And then there's this void

And this is a function that will be called

On each pixel

That

Exists in the

And there are a number of constants

Come in

A fragment function

That we can

And this is all done under the hood behind the scenes

You can do this as a method that

Overriding

Specify the shaded function

So the first thing that we should know about is the colour constant which is an all caps colour

And this is the way that you

The colour of

The pixel

This fragment function runs for every pixel in the shade

So we can say colour is equal to

Now

A colour is represented as a verb

4 witches of 4 parameter

Or for

Element

And so we can represent

Perfect for

Just like so and we can do this apply for arguments here or against buy one argument because that will be duplicated all

Across all the

And then we do need to end our statements with

Sell my car

So if I just simply write this line what I've told the shooter to do

Is make every pixel in

The texture

White

Now you'll notice that also affects the transparent

Because

Transparent picture

Exist in the image there just try

Ok so how's that help well we essentially

Turn the

All white

When anime gets here

But we're not quite done with the shade

So what we need to do first as we need the first crab

The

Colour of the pixel coming from the shower

And select create a new

Variable and we're going to say

Vac for

And in the shader language you have to specify the time

That

You are using you

Music via

Solvac for

Texture colour

Text underscore

Is equal to

Texture which is a function

In parentheses

Learning or cabs

Texture

Can an orca

Cuv

And then put it all in

And a letter place this colour line right here with

Texture colour

Ok so what is this line doing

We're saying let's create a texture colour variable that is of type vector for cos remember colours are

Red green blue and Alpha

So that's 4

And then the texture function tells us ok we want to read

The value

Of a pixel

At the specified texture at the specified UV

Now this texture

May seem like magic but this is one of those Constance

That's coming into the funk

Soudal already knows that the texture that attach

Is this

Stay here and so it's stuff that text you

Data into this car

And then the UV

Is essentially a corner

It's a vector to

Wait between 0 and 1 in the

0 and 1 in the Y

That represents

The position

Of the pixel that were looking at in the 10

And I guess that's just

I'm sure there's a lot of technical optimisations behind why UV

Is

Who won in the accident 021 in the way

So basically that's the person

From the

And the percent

The top that real

Would be in the top left corner here

And then

You know point 5.5 would be in the middle and again UV is

Being passed in for us as a constant

So

This fragment has been called essentially for each pixel

Orridge UV core network

Ok

So what these two lines together are doing is saying grab the colour of the current pixel that were looking at

And then assign our colour out

Switch to that

Ok I'm going to remove this comment because we don't need it

So this is a very basic tool I'm sure that essentially just writes the text

Switch on the screen ok

So how do we actually manipulate the stag

In our case we want to make the Sprite alright

How can we do

To make our character or our text you're always

We can use the mix function which is

Essentially the same as linear interpolate we've used the linear interpolate in quite a few places already

And we can do the same in shade

It's just the funk

When's our call

A little bit different with the name the little that differ

So we want to essentially

Mix

Between why

The colour because we want the flash to happen and then for it to fade Out

And so that implies that we need a transition

Or a linear inter

Ok so how we can do that well first let's write our lines so let's do that for

Final underscore colour is equal to

Makes

An open for rent

Pixar texture colour

And we're going to mix two

Vector 4 in Lincoln represent

However were going to write 1.03 times for the RGB channels

And then the alpha this is very

We want to use the texture colour Alpha

So we can do text to colour got a

For alpha and then we can put let's say 1.0 as our third are

And then end with a summer cold

Ok

And then our colour output can be instead of texture colour or cold

Final colour

And now you should see that you're texture

Is all

Let me explain this mix line a little bit more

So we're mixing

Which is lenient

We're going from Artex to colour

To White

With this way

So if I turn this one point out the end down to 5 or .5

That will be halfway between the texture colour and purity

Now what is this factor for in here while this factor 4 is a colour right this is another colour that with representing

And wait is a value of 1.0

In all the RGB HR

But if we don't put a texture colour in here

And instead do 1.0

You can see that now has filled in

The entire box

So we need to use texture colour

Start a witch is how we reference

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

The alpha channel of the

Colour which is a factor of 4

And

That way we can preserve the transparency of the pixels that are supposed to be transferred

A quick word on accessing

Text akala with this

I believe this is known as swizzling in that is taking a certain number of the elements

From a vector for

By using this sort of dot notation so

I could say

Vector

Texture colour

Is a vector example

Is equal to texture colour

Start

In what this what do is this will get me a vector 2

Where the first component is the alpha value

Put the texture colour and the second component or the Wykeham

Is the

Read channel value of the

Switch the colour

So I can say

For the final colour downhill my remove this example

For the final colour I could technically do this I can do RGB

Like so

And it wouldn't change anything

Because this is essentially constructing a new vicar for

With each other

From each of these channels in that order course I don't need to do that

But that is used

Because there are some instances where you don't want to change the alpha value and I want to say for instance

Here I just want to change the RGB so I can say color.rgb

No I'm going to get an error because this is a vector for inside of a

It's here but I can do final colour

RGB

And

Science off

Alright so that's a little bit about mix

Now what is this one point of this is how we control

How bright HR

Is in Irish

And this is where uniforms

This is how were going to be able to control this value

From outside of the show

So let's do this let's do

At the top above fragment in below the shadertoy

Hello

What colour

And then we'll just go out and in that day

Ok so now

Instead of this 1.0 at the end of this

Function

I'm going to put in

And what are the uniform is it essentially a variable that we can set from outside the shelter

From something

Make a genius

So this is how you make your shaders variable

And the cool thing about a girl is if I scrolled down

To where my shelter material is

You can see that under the shader parameters heading

Percent is now available for me too

And so I can actually

Put in a value here

And now you can see that it's it's changing over

Like I do 1.0

And I can change it from

The editor now

Call thing about uniforms in shaders as we can give them

Propertyheads

So that we could for example

Constrain this range to be between 0 and

The way that we can do that no shadow

Colin

Hint underscore range

And then let's do 0.0

And one

Now you can see

Mila

Percent over here

Now has a little slider button

Or I can manually drag it between 0 and 1

And it cannot exceed those values at least in the editor

I believe that if you were going to cold and said it to something like a hundred

That wouldn't stay

You from doing that so this is a purely edit

It is nice to know

As let's say the game designer what does value is

Supposed

Salt there's are leprosy

Our Hitler shower is working now so we just need to make it actually work

And before we do that let's go ahead

And save this material

So I'm going to

We already have the shader saved but I'm going to see the material as well so I'm good

Save

This by clicking the drop down at the material level

Click the dropdown Click

Save

And we can save it in our

Siemens component directory but I'm going to call this hip flash component underscore material

Try

And so now you should have butter sugar and or material

Another thing I'm going to do now

Is we are going to

Start intergrade

So let's go to our basic anime scene biting control shift

And opening that

This will be the first one we integrate so

What I'm going to do is I'm going to instantiate a child scene

I'm going to

Instantiated hit flash component era

Ok perfect and we still have that our example texture

Set up so I'm going to go back to

Get Flash components

And delete this Sprite here

I pressing delete on my keyboard

And then remove

Let's go back to a basic enemy so I've gotta hit flash component now

This is a note to die

And I don't think it actually needs to be a no 2D so let's go and see

I'm going to go to my head

Which component let's just right click on this right here and click changed

And we're going to change that

Two nodes that are hid flash component

And then let's open up our script and we have to make sure to change this extends now

This is very important if you don't do this the game or crash

So when you make sure that extends node instead

Let's go back to our basic enemy again

Open up

Our 2D

Contact up

And we can close the shader editor as well by just clicking the shader editor button so we have a little bit more

On-screen let's move this Hitler component up near the other node Basecamp

So

With all the other white no type

And

Here's what we want

We want to assign health component by dragon dropping a health component into

The health component prop

And then we want to take a spray tan do the same

Let's go back to our hits

Components

In an open up that's

That material we created

Remember that material existed on our little

Example

That we were testing to make sure that a sheet of wood

So that material describes essential

How the spray

Or that no 2D

And more appropriately the canvas item

How should a canvas item be rendered that's essentially what a material

Roughly does

And so in order to be able to do the Flash

On a spray

The Sprite has to have that material

So what we're going to do

Is we're going to assign that material to the the Sprite that we have a reference to

When the hit flash component becomes

So let's do it

I'm going to say

Bar

What's a hit

Material

I'm gonna use the preload again so preload

And then we can just look for hip flask

Material

I just typing hit Flash and then some

The hip flask and

Material there

So we're preloading in the same way that we pre-loaded the scene before

Preloading that material

Turn on red

I'm going to say

Sprite

What material is equal to

Hip flask

Material

So now and the health gets changed

Are we go

We're going to play that

And once again we're going to use a twin for this

Sign in to save our queen is equal to

Create twin

And we could end up in a situation where the enemy gets hit multiple times so let's actually store up

A reference to hit

Flash 2

And when I going to sign that anything but we can type

Let me know what type of

And that is going to be of type

Tween

Ok

So on health change what we're going to do is we are going to first Choice

Flash Queen

Is not equal to null

Was 2 episodes

Hit

Flash queen.is

Valid

We're going to say hit Flash Queen

Kill

What is this line do

Essentially if we already have a hit Flash Queen

That is currently run

Which is what is valid

It is valid as a tween

Can still be used and is still running I believe

We can click into here and see a valid twin is essentially a tween that is ready to go or

Is currently run

I'm sure the logic is a little bit different but you can read the documentation Again by control

Clicking in

Sing if the Flash Queen is still there

Wheel

Kill it with

Invalid

What's the tween

And then we can reassign

So that we don't have two twins running so we can stay here

Are hip flash team

Tween is equal to

Create

Now whatever you want

We want a run between we want to clean a property so hit flash twin

Twin prop

What property do we want to win this is where things get a little

So the object that we wanted to lean is the sprite

Because that

Where our material is remember

We want to manipulate or change

That uniform Valley

That We Created so let me go ahead and open up my

Hip flask

Component

Material hair

We want to manipulate this

Percent

Which is a property of the material

Which is going to be attached to our Sprite as

What is this first argument is essentially what object owns the property

You're trying to try

In our case

The sprite

Tweenies right now

You can go ahead and open up the hip flask

Component shader

Or sorry to Hitler's component material

If you're curious about how are actually going to

Does what the property

You can actually just go ahead in a hover over

And you can see that

Property shader parameter

Data type that allows or you can right click this

Percent and copy the property

Right here

Someone to copy that property

And then I'm going to pay

For the property that we want to Twin so

Double quotes in then

Paris

Associated Press

Percent and then we want to live

From

We want to learn for two

Rather

And let's say the duration

Now you'll notice that were loving 20

We're not actually setting

The parameter to one so we have to manually set that as well

So let's take our sprite

And then we're going to do dad material

That's it

Now the thing is the material can either be

Shader material

Or I believe the other material

Is

Look at it

Yeah could be a canvas out of material

As shown here or a sheet

So because I can be two different material types

We can't I

NR hit flash component

Script this line that were editing right now

The Sprite material

Ring a cast that as a

Shader material

Ok and then we can do

And it has been

Play the Seas by the

No we can do darts said she

Now

The interesting thing about this function is that we don't want

Include

This first line

Here

Words share price

Slash we just want to do in Clare

Cancel alarm

Percent

And we're going to set it to 1 point

So was setting the value to 1

4 weeks

Between and tween it down to 0

Play 2 seconds

Ok

And we've got that set up in Ark

Enemy are hit

And again make sure that the health component

Set a let's run a game and see what

Ok

So first of all all of our enemies are we

We are getting an error so what is that

In our area is that there's a type mismatch between initial and final

Ok

And why is that

That's actually a mistake that I made

Right here remember how is talking about what is the object

That contains the property that we want to live

I'm actually slightly wrong about the object that contains the property we want to live

The property centre Primula percent does not

Exist on spray

It exist on spray

Material

So this can be a little bit confusing even trips me up every so often

This property exists on

Material and the material

On the sprite

So we

The specified that we

Not too long

Sprite material property

Shade of Brenda

Let's going to run the game again

Now you'll notice that when we hit an enemy

All of the other and

Please turn white at the same

As well

And this can be a very

Confusing thing

4 especially people that are new to good

I'm going to try to do my best to explain why this is

In order to explain that I'm going to open up my

Flash Campo

Material

So

This material in addition to 8 on about the thing

Basically everything and good all is

Ascent

There are slight differences between the types of resources but

When we created our

Resources up here our theme is a resource

Ok H ask that trys is a resource

Our tileset is a resource

If we right click into anywhere and then just go to New

Resource

Deezer all Reece

And the thing about resources

Is that

A reference

Of a Resources share

Between all seems that

Music

And that means that when you change

One instance of

Resources it will be reflected all across

The other instances of the

And so the situation that were ending up in

Is that we are

Attaching this shader material resource

To every any

And therefore every enemy is

Sharing the same

Material resource

That means that when we change a parameter on that resource

It will be reflected

Everywhere that this instance of

Resource

So essentially resources are real

By default

Every

So if you reference them all the time

You'll be referencing the same underlying

Luckily there is a fixed that in that is this button right

To hear so with the hit flash component material

In contact him

This property

Resource local to scene

Is what we

And this says if you have her over it

That the resource is duplicate

When this is set to true

And what duplicating a resource does is that it makes it a unique instance of that resource

Which means that

When we change things like the law

Percent it will only be isolated

2

This unique instance instead of being properly

Across

The same instance that share

Among

Multiple enemies for example

So we can turn on this local to seen property

Now the thing about this is that this will not work with the preloader strategy network

Using

Here in our hit flash composed

Script but there's an easy fix

We're simply going to

Move the hit flash material

In r script

To the expert

Add an export Direct

Over here

And then let's go ahead and remove the preload

And remove the equal sign and then we're going to type this with colon

And we're going to use

Cher

So that

We know what type it is

And then

That's basically the change that we don't make

Now open up your head flash component here

Make sure it's the stand-alone hit

Components seen in the basic anime scene

And then just go ahead and drag over

Hit flash compare

Material

2

Best hip flask material

Now we go back to our basic enemy

We can see that this is going to work

Just fine it's already

And what you'll see is that

There is an undo button here

And

The thing about that is that

That resource local to see in behave the same way in the editor

As it does in games

If I were to hit this undo it will refer

What's 2 hits

Which component in a won't have the undo button anymore

But when I close the scene

This can be seen in reopen it

Because this resource is more

As unique it's creating a new resource in

The

Editor as

So that's just a little quiet but that's me

Don't worry about it all

As long as you've got this resource

Call to seeing schacht in your hip

Composite material

So this one right here

As long as we have that checked

Now animes should be

Flashing

Individually instead of all together

No we still have to implement this for the wizard so I would encourage you to pause the video and go ahead and implemented

Flash compare

For the

Yourself

And I'm going to go ahead and do it

As well

Ok so if you pause the video and get it done

Welcome back

If not that's ok I'm going to open up my wizard enemy

And I'm going to instantiate

Control ship

A

That hit flash company

And I'm going to move that

200 mobile

Component

And then I'm going to move my health component

As Amos

There

And then the same

For the sprite

There

Ok let's give it a quick play test and make sure that every

Sing it is work

Expect

And that's looking good

Now I know this is a long lesson but there is one final thing that I want to do

Does Hitler have component

And I'm going to go ahead and open up my hip flask and pony

And we're just going to change the easy

Between

So

I'm going to change the tip flash tween into down here

So

In our Hitler's components group

This twin property line

I'm going to do a backslash for a new line

And I'm going to do SATs

Is

And I believe you want to use an easy

In

And then I'm going to say sad

Transition

I'm going to do set trance

Cuba

And what that will do is that will keep the enemy bright white

For longer

Before heating up quickly and I'm going to change the duration of

Instead of .2 at

So now let's run it and let's

I think it looks much better

A little bit more

Pronounce

The effect

Not to be too nitpicky but I think I will change the direction to

Instead of

Just to make

A few

Alright

So that is hid flash

4 hour