All language subtitles for 42. Animating the Experience Vial Pickups

As part of a general effort to make the game looking feel better one of the things that has been bothering me

Is the fact that our vials of experience

Orange End at all day just kind

Disappear when the player collapse

Soul

Make that little

More

What's open up our vile experience or experience Vale weather

And we'll take a look at this scene

And open up the Script

So remaining this experience by are collected and then

Q-free in the van

That was kind of unsatisfying is there

It's just

Disappear

What we're going to do is we're going to make it actually fly toward the player

And perhaps we'll give it some sort of rotation or something

That need

As well

So we're going to be using tween

Again for this and the reason is because

It's very easy to use tweens to animate between two variable position

And in this case we're going to end

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

Between

The position of the experience

To the position of the player

Keeping in mind

The player position will

Very

In other words it will change

While the player is moving and the violins flying towards

In our on area entered

Signal

Let's start by

Creating

Between

Is equal to create

Twin

I'm going to do is were going to say twin

Dart

Between underscore

Let's say let's call it tween underscore

And before we go any further let's Create that function so funk

Tween underscore

We're going to send a couple of

Of argument here first

The thing is going to come in is our interpolated value from

Between

This case is going to rappers

Possess

Which is of Type 4

And then we're going to pass in the start position

What is going to be of type vector2

And the

Well actually they should just be fine so just to start

And you'll see how this is all going to work

In a second year so let's just write pass

So you've got a twin collect method

Which is going to be past the percent which is what we're going to be twins

And then I'll start

So this is how this is gonna work

So we've got

Tween

Screen mesh

And if we control click into this we can see that

When you do is pass in a callable which is basically a reference to a mesh

Which we've setup

And a from na to na

What I like to do for this kind of thing is

We have the twinkle

Will revisit twinkle like in a second

I want to go from 0.0 to 1.0

Because this is from

0% to 100%

Basically

In our generation let's do something like which is do one second that should be fine

Now there's twinkl

What's going to be passed in

Guaranteed is this percent which will be anywhere between 0 and 1 depending on how far between is

In progress

Just want to pass the start position

And in order to do that we have to do this

Right to buy

And then our start position is going to be our global position

Now what are we going to do with the cinema

So

Storing a snapshot of the global position of this experience vile

Set the timer

Is quite good by the play

This will all will be passed in every single time

As a position

To twinkle

And in here what we're gonna do is we're going to grab the player

Via player is equal to get 3

Get first node in group

Claire

Claire is he good to know I will just return right out of that

Just for safety purpose

I know we've got this percent

And we're going to use a vector tool

Again

So we're going to take

The

Global position

Of the career of the note currently

Is equal to

Start positions of this is the position

At which

Civil War

When the collection started

Learn

To the player global position

And our weight is going to be the percent value that's coming in

To the mass

Another word for using the twin to control the duration

How long it takes to go from 0 to 1%

And were passing that in

To the law

And using that to calculate the new global

So you can imagine

It's going to take a number of frames

For the collect enemy

To finish

While that's happening the player is going to be me

And so we have to constantly be using the law

Between the player position

And we have to use the start position

The route

We can't use the current global position

Because that

That would not

That's what we

And then we can do something like this so we can write tween

Between call back which will call a mess

After the previous tweener is fine

And we're going to call

Q3

And actually let's do this

Create a new function

Call Colette

And in here we're going to call queue free

Light above that were going to use this game events in May

Experience by collecting so cut and paste it there

Make sure to remove the Q3 from this on area entered

And then in the screen called

Let's use collect instead

So this twin method is going to run for one second

It's going to lerp between the

Position at which it was picked up

To the player position every frame

Using the present that passed in

And then it will call collect

We should be good so let's go ahead and Run the game

And see what that looks like we need it

Add some veg

So

Let's

Kill some rats

And there you go

You should start seeing at the vials or

Being collected now when you run over there

But they still don't look

Super cool

So what we can do is there is additional stuff we can do

Please twins

We can set

Easy

And we can see

This is a very handy website this is called easons.ie

And I will link this as a resource to this lesson

What does is this shows you a graphical and interactive representation of all the diff

Easing functions now using functions are something that are very common across

Ok

Animation and game development software

So these are more or less standardised

The nice thing about this is that you can hover over it to see what their behaviour look

Until we can use this to figure out how we want

H

Vial to swing towards

What I'm thinking

Is we might use an ease in Bath

Like a voice

So that the vile

Kind of get shaved away from the player first and then comes back

So let's use the easing back and you can hover over

To see exactly how that's gonna look

Or what that's going to feel like at least

So we got back to good doll

In here we can do at the end of the screen

Start

Is

And then it will give you some auto suggestions we're going to you

Between is in because

Going back to our

Is in back

The east height

And then the transition type will be

So we're going to go to

That line again we've got set use and rights

Trans and then tween doll

Trans

Jack

And this line is a little

Big

For me on my own so one quick tip as you can use a backslash

Newlines you can make multi line

Statements by doing a backslash

And then continue on the net

This is saying is this is essentially all

Supposed to be on the same line that because guedel uses whitespace as away

Determine

Blacks

You actually need to me

When

Whitespace line

Should be

Continuation

So we got the settees and set trans

So let's go ahead and see

What that looks like when we collect a vile

From

A rat

Alright that looks really great

Let's turn the

Direction down to .5

Instead of one so that's the 3rd or the 4th of

And here weather

Let's rotate the vile according to the direction

That is between

Start position

The players global position of our current global position

So

We want to say

What's the new variable via Direction

From

Start underneath the position is equal to

Global positions for the current global position

-2

Position

And now we're going to set the rotations were going to say rotation

Is equal to

Directions

From start

Now what I'm going to do is I'm going to comment out this game events in

Experienced by all collected line

And then I'm going to open up my basic anime scene

Go to the Vale drop component

And turn the drop percent up to 1

And the reason why I'm doing both of those things

Is just so that we can test the vials

Without having to be interrupt

Why is awaiting for a while to dry

Or by level

So

Let's see what this looks

And you can see that the rotation starts to work but there are a number of Prague

It looks a little bit weird

Not quite clear wires

Looking

And so there's a little bit of weird

So the first bit of weird

Is that

When were using this angle

So this is a this is an angle

In rage

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

Any can wrap it can go from positive to negative

By crossing is

Threshold which flips the entire thing of

So we can take steps to address this first Let's Get It facing the right direction

Because

You'll notice to that device

Facing straight up and down

And that's a problem because

Remember 0 degrees is represented by being to the right

Until when we rotated to say

Face

Wednesday we wanted face

Right we want to say facing the Opera

It's actually going to be rotated like this

Because that's 9 degrees you can see my rotation is -90

So that's a problem

That's all you need to do is when you do rotated by

9 degrees a day

The weather I'm going to do that is I am going to firstly

Say

Rotation degrees so rotation underscore degrees is equal to let's do a function called

Add to date

Which will convert radians to degrees

What take that directions from star tango and put it in there

And then we can add 9

To it

So that we can get that off set

And then the other weird thing is our queen is actually being started twice

Because

This area2d is being entered twice

Why are player

Someone the vile

Flies back

When we collect it

It exits the players detection Range and then it flies back into the players detection

And that is causing the twin-to-twin

Start which are fighting with each other and that's why it's never quite ending

Add the players position

So what we can do to fix it

Is we simply need to disable

Beer collision shape

When

The area is 4

So let's go ahead and do it

In the top here going to do an on ready and I'm going to use this neat little trick I'm gonna

Click and drag on the collision

2D in the area 2

Now bring us all

And then I'm going to hit control and hold control and then release my mouse button

And I will generate and I'm ready for

Collision shape

2D

Now me on area entered we want to set the collision shape 2D

Disabled however

We cannot do that in a physics callback that will give us an error

You generally speaking cannot modify anything about collision shape

In an on area entered or on body and turn

Signal

That is a special event that

Good ol' warned you again Spotify

Let's do this let's create a

Function called disable

Collision

And then we're going to say

Collision shape to the disabled

Is equal to true

And then in our honour enter

Let's do

Callable

And then in parentheses

A reference to disable

And then we're going to call

Call Dave

So this will do is this a ok we want to call this method here

But

On the next idle frame so outside of the

Physics

Process

So now let's go ahead and collect some vials and see if that

Looks a little bit

That's looking much nice

Now I'm still getting some weirdness

With the rotation I think it's mostly looking ok

It's just it's pointing in the opposite direction when it does the first back

So we can

6

I think the simple fix for that is just going to be

To always point at the player

Instead of pointing

From the start position to the current global position

Let's point from the start position to the

Claire Lopez

What's a flower

Alright that's looking good

And let's make this a little bit smooth

By interpolating the rotation

So let's do

What's another variable called target

Rotation degrees

Let's copy this line

Work at this line Rider

And set

The target rotation degrees equal to that line

Never going to say rotation degrees is equal to

Learn

Which is just a normal function which allows is to learn

Between

Let's Learn between the current rotation degrees value

And the target rotation degrees

And our way

Let's do that trick again 1 -

Exp

And then let's do negative

Get

Process

What a time

So again this is the framerate independent variable that we have been using

And we don't actually want to use alert we want to use

Angle instead

And the reason is because this is essentially a special method that will handle smoothly interpolate

Between

When it

Flips

So there is a position there is a point where once you rotate past a certain point

The sign of the angle actually flips

And if you don't use alert angle

Then you will see your angle just flipping incident

At one point so you can play with it you can use a look and see what I'm talking about the angle is what you should be using when you're learning

Angles

When we use angle instead of work we actually have to convert these degrees

2

Simple Road

So let's change holidays degrees then

2 rotation

So that's in radians equals angle

Going to do rotation from our current rotation to

Calling this target rotation degrees let's rename this bye

Hi lighting and heating control

Target

Rotation

So that will rename both the same time

And then we'll get rid of this red

2 dead

And one stand put dead

To ride around

The nine

So that we can get

90 degrees in

Alright let's see how the

That's looking great I am really happy with Alex look

I'm going to make one change in here and instead of doing x negative

Get process all the time I'm going to do -2

Times get prices delta time

Just to make a girl a little bit faster in terms of the rotation

Alright that's looking great so now we've got

A good amount of Motion

In our

Are experienced violence and it's looking a lot better now

And one final thing that we can do

How to make this look a little bit better

Is we can actually scale

The

Vials out so that it looks a little bit smooth like they're being collect

We need to do that is let's go towards screen and let's do tween dot

Set pair

No a twin upset parallel does is a run all of the tweeners in parallel so this is one tweener right here

We're going to create another one

Which is tween

Start

Between property

We're going to tween the property of the Sprite 2

So let's go ahead and grabbing already reference to the Sprite 2D

Bye

Dragging this over into the editor and holding control to do on ready or you can type it out

Do you prefer and I'm going to actually call this Sprite instead of Sky

Today

So back down to this line to win the dream property between sprite

The property that we're going to tween is scale

Enquire

So if you're unfamiliar with what the property is called you can just scroll down into the

Editor here

Scroll down to transform if you have her over it it will tell you what the property

Flat scale

And then we're going to say we were

Transition to Vector 2.0 this is our final

Value here

And we wanted to be a duration of let's 8.1

Now the problem here

Is that when we have set parallel both of these are going to run at the same time

And so is this tween callback

Which is that what we are

So they fix the twin call back being called too early

We can

Do tween dart charge

You might win that changed as it says

Wait for all of the previous twins

To finish

Before moving on to the next

So

Now or collect only be called when both of these

Are we still the problem of this point one 5 seconds

Is quicker than a .5 seconds we have a pier

And because these are running in parallel

That means that between out before it has a chance to do any of this animation

And so what we're going to do is I'm going to set a delay here so I'm going to say sorry

Underscore delay

Animal set a delayed 2.35

And so this is going to say why

.35 seconds before you animated thing

And take a .15 seconds to do it

And that what had up to be .5 seconds total which is the same value as

Let's go ahead and Run the game and make sure that this is working as we expect

Now the vile should be

Feeding

Nothing

And if that's a little bit too quick of a fade out for you

I think it is for me I might see if I can get away with

5 for the scale duration

And then changes

2.45 delay

Alright it's very subtle but sometimes salty Is All You Need

I really like that look

It doesn't abruptly

Leave existence anymore you can see a few frames of it actually sliding out

You can't looks like it's going to the players inventory so I think that looks real

Ok so that was a long lesson but that is a good introduction to tweens and how powerful they are

It's a nice way of ending things in code

And like I said doing things

In a way where you might have variable

Think about

Doing this with an animation player how would you make a vile

Travel toward the player pointing in the direction of the player

If you want using a tweet that would be almost impossible if not outright impossible to a comp

With a plain old animation player

This is where Queen's really sure

And before I conclude the lesson that's on comment out

Game event starting

Experienced vinyl collected and a let's go back to our basic enemy

Add make sure you put the strap percent in the Vial dropped and

Back down

835

Or whatever number you feel country

And let's do a quick verification that we can still

Level

Hi perfect everything is working

And that's it for vile

Pick up animation