1
00:00:00,643 --> 00:00:03,060
In this video,
we're going to design

2
00:00:03,090 --> 00:00:08,060
the walls push animation
which should look like this.

3
00:00:08,090 --> 00:00:10,914
It's going to have
a slight delay at the start

4
00:00:10,915 --> 00:00:14,642
so that when the player enters the area,
they have a bit of time to stop

5
00:00:14,643 --> 00:00:17,043
or to move in front of the wall
and get pushed.

6
00:00:17,044 --> 00:00:21,340
Then it's going to have
a fast push with an easing.

7
00:00:21,370 --> 00:00:25,156
It's going to stay in position
for a fraction of a second,

8
00:00:25,157 --> 00:00:28,885
and then slowly move back
to its start position.

9
00:00:28,886 --> 00:00:30,670
With that,
let's get started.

10
00:00:30,671 --> 00:00:32,580
With the push wall scene open,

11
00:00:32,610 --> 00:00:35,713
we'll start by selecting
the PushWall root node

12
00:00:35,714 --> 00:00:41,585
and press CTRL-A to add a new
animation player node as a child of it.

13
00:00:41,586 --> 00:00:44,314
The first thing we want to do
is head to the Inspector

14
00:00:44,315 --> 00:00:49,585
and change the Playback Options
Process Mode from Idle to Physics.

15
00:00:49,586 --> 00:00:52,480
The Physics Process
mode ensures that the animation

16
00:00:52,510 --> 00:00:56,271
synchronizes with
Goodhouse physics updates,

17
00:00:56,272 --> 00:01:00,940
allowing the animation
to properly collide with the player.

18
00:01:00,970 --> 00:01:04,315
We're going to go down
to the Animation bottom panel

19
00:01:04,316 --> 00:01:07,301
and we'll click
the Animation menu, New,

20
00:01:07,302 --> 00:01:10,871
and create a new animation
called Push Down,

21
00:01:10,872 --> 00:01:13,571
and we're going to Zoom in
on the timeline

22
00:01:13,572 --> 00:01:16,043
in the bottom right
of the animation editor

23
00:01:16,044 --> 00:01:20,400
just to have a bit more room
to edit our animation.

24
00:01:20,401 --> 00:01:24,329
Now, we want to select
the StaticBody2D node,

25
00:01:24,330 --> 00:01:26,200
which is what we're going
to animate,

26
00:01:26,201 --> 00:01:29,329
we're going to animate it moving down,
then back up.

27
00:01:30,329 --> 00:01:34,443
In the Inspector, you want
to expand the Transform category

28
00:01:34,444 --> 00:01:38,757
and we're going to click the key
next to Position to create a new keyframe.

29
00:01:38,758 --> 00:01:39,843
So click it.

30
00:01:39,844 --> 00:01:44,271
You should see this confirm window,
you can click Create, keep the default.

31
00:01:44,272 --> 00:01:48,143
And this is going to start
the animation here.

32
00:01:48,144 --> 00:01:51,900
So at first,
we want the node not to move.

33
00:01:51,930 --> 00:01:56,660
We're going to move
the time cursor to 0.1 second

34
00:01:56,690 --> 00:02:01,314
so you can click and drag
on the gray area to do so.

35
00:02:01,315 --> 00:02:06,486
Then select the first keyframe,
right-click, and duplicate this one.

36
00:02:06,520 --> 00:02:10,886
This is going to keep the wall
in place for 0.1 second.

37
00:02:10,887 --> 00:02:15,610
You can move this key to the right
to increase that time delay.

38
00:02:15,611 --> 00:02:17,386
This will be the time the player has

39
00:02:17,387 --> 00:02:21,186
to either stop in front
of the wall or pass through.

40
00:02:21,187 --> 00:02:24,220
The 0.1 second
should be reasonable.

41
00:02:24,221 --> 00:02:27,185
Then, we're going to automate the wall
pushing down

42
00:02:27,186 --> 00:02:31,314
so we want to move the time cursor
forward to 0.3 seconds.

43
00:02:31,315 --> 00:02:37,200
And then we can again right-click
the last key and select Duplicate.

44
00:02:37,457 --> 00:02:39,686
It's going to keep it the same.

45
00:02:39,687 --> 00:02:43,299
Now, we can click that new key
to select it,

46
00:02:43,300 --> 00:02:49,543
and we're going to change the Y value
in the Inspector to 128 pixels.

47
00:02:49,544 --> 00:02:54,056
If you then click and drag
on the animation timeline,

48
00:02:54,057 --> 00:02:56,500
it's going to move the wall down

49
00:02:56,501 --> 00:02:59,100
and you can press Shift-D
to play your animation.

50
00:02:59,130 --> 00:03:03,460
We're going to keep the wall in place
for 0.2 seconds.

51
00:03:03,490 --> 00:03:07,228
So select the last keyframe,
right-click Duplicate,

52
00:03:07,229 --> 00:03:10,740
and finally we are going
to have it move back to the start position

53
00:03:10,770 --> 00:03:15,113
so we can move the time cursor
to the end of the animation timeline.

54
00:03:15,114 --> 00:03:18,742
Select one of the first keyframes,
right-click Duplicate.

55
00:03:18,743 --> 00:03:21,471
And if you play the animation
with Shift-D now,

56
00:03:21,472 --> 00:03:25,380
you're going to see the wall
push down, wait, and go back.

57
00:03:25,410 --> 00:03:27,580
Now, the animation
is a bit robotic.

58
00:03:27,610 --> 00:03:30,770
This is due to the lack
of animation Easings.

59
00:03:30,771 --> 00:03:35,370
We're going to change those
to make our animation a bit more natural.

60
00:03:35,371 --> 00:03:37,214
So select the second key.

61
00:03:37,215 --> 00:03:40,571
And in the Inspector,
you can see the Easing curve.

62
00:03:40,572 --> 00:03:44,740
It's a field on which you can click
and drag to the right or drag to the left

63
00:03:44,770 --> 00:03:49,820
to change the animation transition.
I invite you to play a bit with it.

64
00:03:49,821 --> 00:03:51,614
You can drag it a bit to the right

65
00:03:51,615 --> 00:03:53,828
and then press shift-D
to see the animation.

66
00:03:53,829 --> 00:03:57,314
and you can see now
the wall accelerates down

67
00:03:57,315 --> 00:03:59,599
and it gives you
a bit more of a push.

68
00:03:59,600 --> 00:04:04,313
So a value around two
or above two should work.

69
00:04:04,314 --> 00:04:09,914
And then we're going to click the key,
add 0.5 seconds after the wall pushed

70
00:04:09,915 --> 00:04:14,728
before it starts going back,
and we're going to do the opposite.

71
00:04:14,729 --> 00:04:17,571
We're going to drag the curve
a bit to the left.

72
00:04:18,629 --> 00:04:21,769
And this is going
to make the wall slow down

73
00:04:21,770 --> 00:04:24,771
as it arrives to its starting position.

74
00:04:24,772 --> 00:04:28,056
And if you want,
you can also drag it a bit to the right

75
00:04:28,057 --> 00:04:30,940
and have it go back
a bit more slowly.

76
00:04:30,970 --> 00:04:32,940
Actually, it feels a bit better to me.

77
00:04:32,941 --> 00:04:35,220
So I think we're going
to keep it that way.

78
00:04:35,221 --> 00:04:37,420
You now have
your push animation done.

79
00:04:37,421 --> 00:04:40,214
But for now, it's not going
to interact with the player

80
00:04:40,215 --> 00:04:43,180
because we are lacking
the code to do so.

81
00:04:43,181 --> 00:04:45,757
We'll add that in the next lesson.
See you there.