All language subtitles for 49. Animating the Upgrade Card

Our upgrade cards are looking better now bye

They

Need to be animated to give a little bit of love

52 that screen so

Let's go ahead and go to our upgrade card

Scene

Let's create an animation player

As a child

Of this

Route now

And we can drag it up to be the first child

Let's create a new animation by clicking the animation button

And then clicking new

McAuley

In

So what we want

Is we want to

Make this bounce in a little bit so we're going to select our ability upgrade car

The root node and then let's go ahead and keyframe some of the transfer

Stuff so

Keyframe V scale here

By clicking the key button

Be good for now

And we're gonna make it sort of bounds since I'm going to make the

Animation .4

Skins long with this input right here

And I'm going to zoom in

Turn the slider at the bar

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

And let's say ad

0

The first keyframe let's set the scale to 0

Annan at .1

Vets in Surrey Quay right there

Add set the value to 1.3

In both the X and Y

And then let's have it fade out to

1 by .4

Add .4 sec

How to change a back to wall

Play the

So this looks really bad

And the reason is because our pivot offset is in the top left corner in so that means that is

Rotate and scale around

Point

What we want to do is let's like our building up

Card and we have our size set to 150 by 1

So that means that in order to centre our pivot offset

We can change the pivot offset property under transform

Tu150

2 which is 75

Multi-x in the

And then you'll notice that the orange cross

Is now on the Seine

Which means that

That's the pivot offset

So now you can see that

That scales in really nicely around the centre

No I'm going to do something to change the snap down here in the animation so weak

Select

Animation player tab by clicking this button if it's not open

Let's open up that animation

And then

Can I change my snaps

2.05

In the bottom

And then drag over this one

3 scale

Keyframe

2.15

Instead so that looks much nicer

And I'm going to change the

Interpolation mode here

2 cubed

Alright so that's a very simple

In animation

Can play now we have

To tell the card to

Play this

What's go ahead and open up our school

And we will need to create a new function that we can call from our upgrade screen

Scotts Farm

Play

In

Alright and then we're going to do is you're going to rest

The animationplayer

I'm going to call dart player

Alright so

We've got our play in function

Let's go out and opener upgrade screen

With our quick open seen button

Double click to open that upgrade screen

And you can see that we are

Creating Oliver cards

In here

So what I want to do before

Connect to the selected

Method here for the selected signal

I'm going to say card instance

Play underscore

In

End call

Alright so let's go out

And Run the game and see what that looks

That's looking ok

Now we probably don't want both of those two play at the same time

So what we can do is let's go back to our ability upgrade card and we can enable staggering

Introducing a delay

So it's a delay

In our play in right ear

And that's going to be uptight float I would have said it 0

To start

Sodalite

Is it 0

I'm here what we can do as we can use the away

So what we can do as we can stay awake

Get tree

Start create timer

Delay

Start timer

What is this weight do

So this is a concept known as a synchronous program

What is actually happens as first of all we're creating a timer

Which you can do this is a scene 3 time

It's different than the timer that you can add 2 as a note to your scenes

And it's a nice way to create a one-off timer so you don't need to cover up your nose strong

And we are passing a delay to say ok this is how long a timer

Needs to wait

And then we say that timeout will referencing at signal now when we do a weight

My dad is saying is we are going to wait

We're going to stop execution of this

Puncture

Until the timeout signal has been in middle

From

Set a timer and so this is a nice way of not having to

To write

Specific signal connection

Method

And

Does await essentially just passes this function until that time as done in the rest of the game continues

Executing until

Time out is

Omitted and then it will continue on with this phone

Is meant by a single

Usually function

All run line by line at the same time

But when you're using a weight

You can actually the engine tax I do other things including rendering more frames

Until this time out is a minute and then it will continue

Lucian from the

The final thing we want to do is we want to set the scale to zero when we called

Because our skills not sitting here until animation place

So let's just make sure that were setting the

Scale

Is equal to

To that

And we should

Girl

Now let's go back for upgrade screen we need to keep track of our delay

So let's create a very delay is equal to 0

Was passed that delay into the play in

And at the end of each iteration were going to say delay

Ok and I would that generated PT 2 second delay between each

I'm going to run out

And see what is going on here

Ok looks like Iris scale isn't work

So we need to fix it

So let's go back to our building

So the reasoning skills and working is because again

The

Containers

Resize their children including the scale

Essentially nothing about the Transformers reliable when you're working with

Parent control nodes that are container types

So what we need to do instead

Is I'm going to do a different trick which is modulus

I'm going to say modulate is he go to

Colour

Transparent

And if this is essentially going to change the model

If I look at my 2DS

Images play the

Animation

So I look at my modulate by scrolling down

That's under the visibility section

Is margarine is essentially a colour that is x the colour of

Whatever has been rendered and so if I turn the alpha all the way down to 0

You can see that it's still exist

And it still takes up space

But it's just not visit

This is a nice cheap way of hiding a UI element but keeping it in the layout

So that things don't get shift and

That's what we do

The code

If I open

My play in resetting a modulator colour that transparent which is essentially just a constant that represents

Get rid of scale in an after the timeout were going to set our margin

Back to

Coloured

White

So let's see if that

And again that white colour is just

Concert

The way

And it looks like

So one other change you need to make so you can notice that it's flickering a little bit or that it's a little bit

Jerky

And that is another problem with another cork of Cadell

Is that the animation player

Will not play immediately when you can't play I believe it it only takes effect on it

Next frame cleaning up with one frame where

Card is visible

But our animation Player is not forcing the scale to be zero so I

The beginning of our in animation

You can see that it's sitting a scale 20 but were setting the card to visible

Before that

Evaluation

In Southern one frame where the card is fully visible and then

I know that makes sense but basically there's a lot of quotes around animating UI elements and one of the biggest pain points and get it

By the way we can avoid this is

We can get rid of the model y = coloured at White in here

And then we can put that in our animation instead

So I'm going to select my in animation

And select the 2D

Are you at the top

Select the root ability upgrade card

How much keyframe the modulator

And I will drag that key

All the way up

So we're going to be setting the modulator transparent at the code and then as soon as the animation player

Takes effect

It will send it to visible

So let's see

How the

Alright that's much now

That's looking great

Now let's do

One other thing which is that I'm going to modify my my information I'm going to change the

Turn volume to 1

2 instead of 1

Just to make it a little bit

Nisa

And then I'm going to go to my upgrade screen and discard container

I'm going to say

The card counter

And then I'm going to scroll down to

The theme override consonants and let's put a separation in there of something like

Pixel

Set a larger set

Between the cards

In the game

And remember that separation

Is how far away is each element of the h box can

Alright so we've got a nice

Nicely spaced out I'm probably going to go up to 16 actually on at separation summer to changed

Download a 16 just to provide extra space

Alright that's looking really

So now let's do some animations for the hover

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

So let's go back for a building upgrade card

The tricky thing about animation players as they can only play one animation at a time and there is

I can't have known as blending but that's not really that applicable in

Situation

The reason I mentioned this is because we're going to create an animation

4

A hover a

Play the animation when the card is hovered now the problem is

Is H in animation

Is being played

And we have over

The hover animation is going to interrupt the in anyway

So

Just keep in mind that only one animation

Can you play any time with an animation player

But the obvious way to get round it

Is to introduce a new

So I'm going to create a new era

Claire

Call Dave

Hover

Animation

And I'm going to create a new animation on generic called

Alright and let's change the duration 2.4 again

Exchanger snap 2.05

And then you can zoom with the slider

What's the weather to the root node and we're going to

Scroll to the

Rotation

Let's keyframe that road

And basically when I want to do on hover it's just rotate It Like Jagger little

So I think at 0.1 second I'm going to put a keyframe

With a value of -10 degrees

And then I'm going to do a keyframe

.2 of May

More positive 10 degrees weather

And then

Dad

Three I'm going to give it a value of

So you can see how that looks

Pretty nice and then I'm going to change the duration of .3 instead of .4 so it's right at the end of the animation

And then change the

About the

If you prefer you can make little bit tighter so I might try

.5 and 10.1 in

Two from IKEA

I think I like that so I move my first key from the 0.05

My first my second keyframe or rabbits

The first keyframes at 0

Then the second keyframe is at 0.05

Send

38.1 and then

I have a larger gap

Between when

Steps back to zero

And the reason for the larger gap is that

Makes recovery local

Instead of making everything the same distance away and

Time

Little bit of variation in there especially when it's resetting

Exposition

Is

Is good

Making a feel a little bit more

I never gonna change

What's 2.2

And I'm going to decrease the amount of rotation

Change this to -5 degrees and 5

Ok so now we've got something that a little bit more

Southall now going to play the centre

Let's open up our ability upgrade card I'm going to close the animation panel by clicking the animation button at the bottom bar

And now we have this on gym

Now

We could listen for mouse events to detect hover

If we got 1 mil job but we have the ability upgrade cards selected we can see that we have a mouse entered and mouse

Single and so we can look into those to the German when they play

The hover

So I'm going to unready I'm going to go up here and I'm going to say

Mouse

Entered

Connect

On

Mouse

Create a function on mouse enter at the bottom

And this takes no arguments so we don't need to worry about that

And unless reference are hover animation player

I'm going to play

Cover

Just like so

What we can do to test this instead of running a full game

Is we can just run the scene with the runner and scene

Cancel that

And I can see that this is looking really

Now you can see that

Explain the animation over and over again

Because

Even when we have the mouse on the inside

And this is also due to the mouse filtering

So

We're talking about mouse filtering how it passes gui input event

Up the tree

Default however that behaviour is different with the mouse entered in Mouse exiting signal

Which is varian

Fortunately we can get around this by Justin marking everything that's not important as ignore Mouse

Pass

And that means that

The Missenden signal is just not going to work

Or it's going to be detected

Separate

From where we listening to in other words

Mel centre there's going to be detected for

On this v box contain

Which means that it can't be detected on our route now which is where we're looking for

We listening for the mall Centre

So simple fix to this is we're going to

Select all of these nodes by clicking the margin container and then selecting all by holding shift and clicking on

And we can actually change the properties of multiple nodes by select

Bolton Wanderers

If I scroll down

Cinemas Nottingham

I can change this to ignore and that changes it to ignore for all of

If you got your outfit with now you can see

It says set Mouse filter on 500

Confirming that

We've said it on multiple

Now if we're on the currency

You can see now that the hover animation does not play

Until we leave and come back

In terms of h

Mouse

So that is good and then we can verify it by playing a game

We got a nice animation we have her over it with her

I and then were thinking we needed

In terms of animations

Is

Create a

Animation for one week

1

So let's go ahead and do that so we're going to go out animationplayer

Let's create a new animation

And we're going to call

Selected

Looks like a building upgrade card

And change the scale here

So

What keyframe the scale

Let's reset the skill first 21

And then what keyframe the scale

Just like some

And then

Let's do another point for decoration

Let's change the snow

2.05

Let's also change this interpolation Lauder Cuba

And what would I do it after .5 seconds were going to snap this up to something

1.2

And then

At the very end point for let's change it to

Alright so that's what we end up

However I'm going to change this

Easing

On the second keyframe here

I'm going to change this by dragging this down to something

2.2

Ok I think that looks alright I might do something close

To act

You can play it over and over again see how that works

I think that looks really great and then

The last thing that we're going to do is really create an animation for

The card being discard

So we want to

Take all the rest of the card the word select

Make them

Maybe fadeout

So let's create a new animation

In

Hear cold discard

And again click the animation button click

So we should have three animations on

Route default animation player here

Which are discard in and selection

So just

Let's do the same settings

0.05 snap

And let's

Keyframe the scale on the route

No here

Find the scale keyframes

And then we'll just send it out

2

0

Immediately

Network analyst change the interpretation about the queue

Let's actually make the situation PT 1

So that's what the rest of the cards are going to do

If you're not selected and then

This animation is gonna be the one that plays

When is elected now we can make this little bit fancy here

So I'm going to

Also add a keyframe at the route

4

Rotation song

Create a

Keyframe for the rotation

I'm going to

At 0.05 change it to next

10

And then somewhere around let's say

2

A rotated two positive 5

And then out to zero

-10 then deposit 5 lenders

Can I get a bit more movement little bit more Windsor

And I think it looks nice

So now we got a hug knees

So the first one we will need to do

Is we can open up our ability upgrade card script

And a here

When we

Omit the selective sync

We want to play that animation

So let's go ahead and before the selected in

What's a animation player.pl

Selecta

Now there is

Something that we have to consider here

Which is that now were introducing animation

It is possible for the user to of instant spam their Mouse button and select multiple times

We don't

So we actually have to keep track of whether we can actually interact with

Ability card so let's Create another variable up

What does calling disabled

What is equal to false

And then when we

Have a left click let's Create and set that brother to disabled = true in that

And now all we can do is we can say

On gym put

Disable

We can return out of

Like so

And the same for the on mouse

If disabled

Return

That way we're just not going to listen to those events anymore

If disabled

Disabled will be true when we see

Ok the other problem is that as soon as we admit the selected signal

The

Upgrade screen in here without upgrade screen

Script

Is automatically going to unpause the tree

That's

Shop

What we can do instead is we can

Await for that too

Done

Before we emit the selected sig

So what we can do as we can say

100 animation play without play we can stay away

Animation player

Animation finish

So that will do is that's the same away that we use earlier it's just going away for the current animation to be finished and then

Will it fit

Selected

So that means that are Renovations are going to finish

4

The upgrade screen gets the single that was some

So in addition to that we need to discard the other car

As well

And so let's go to our ability upgrade card

Let's go to the new tab and select the groups to have a good day

Let's add a to a group called upgrade underscore card in the reason I were doing that

Is because

We need to grab the other upgrade cards

And make them play their discard innovation

So we've got that Adam

Let's

Create another function Coldplay discord

So far

Play

Discord

And we're going to do

Where is Saints v Wigan

Animation play

Stop Play

So now in a hear when we select the car

We are going to

Tell the other car

Play a discord animation

I'm actually going to create another function in here called the select

Car

And we're going

To take all of these lines

Cut them in peace them there

Make sure the Indian

When is proper

One level of intuition

And then in that is blocked that we just cut the code out of let's call Saul

And the reason is because this is starting to become quite a lot

An

I just think it'll

Cleaner

To have

Each distinct set of functionality have its own

For instance here this is just responsible for handling gym

What's the light card is responsible for doing all of the things that need to happen when the card is

So playing it selected animation now what we need to do

Is we need to

Other under scorecard in

Get tree

Get nodes in

And that string name is going to be what we supplied in here

Which is upgrade

Card game

And we can say

If other card

Is equal to

Then we're just going to continue

So where is actually bring it over it bye

Since

The current card is obviously going to have this group as well we need to make sure that were not

Doing anything

When

The card that were currently selected

Comes up in this

List or there's a raid

It comes back

And then continue again just tells us to continue with the iteration and don't do anything

4th

Item for this

Other cars equal to self continue otherwise were going to say another car

Start play underscore disc

Like so

No it all went well

We should see that

All those animations play it so we'll have a select animation that's played

When we select

A card and we'll have a

Discrimination has played for the other one so

Alright look at that so we've got that set up really nice

You'll notice that the game does not on pause until Oliver's animations are finished

And look at that looking

And that's animations for our upgrade cards