Hello! This is part two of the Zelda-like tutorial. This part will cover animations. By the end of the tutorial we should be able to walk around in four directions and push up against walls. As I said in the last one, expect some very minor differences between the video and text tutorials. If you are watching the video and following along here at the same time, just keep that in mind.
The first thing we need to do is update our player sprite. The box from the last tutorial is going to be replaced with a sprite sheet. You can find the sprites here.
The sprites present in the videos have been replaced with new Zelda-inspired sprites, courtesy of Andrew Glubrecht. Here is his page, retro-dragon.com. The graphics for this series will be through links to his website.
Anyway, once you have downloaded that just replace player.png with this one. In the inspector, go under Animation set Hframes to 8 and Vframes to 2. We also want to make the player’s collision to be smaller, so go to CollisionShape2D and click its shape in the inspector. Set the extents to (6, 7). Finally, create a new AnimationPlayer node. We are going to rename it “anim” so we can access it in the script more easily.
Make sure anim is selected. Create a new animation called “idledown”. All of our animations will have an action first and the direction second. Keep Length at 1 second, set Step to 0.5 seconds, and turn repeat on. In the inspector, go under Playback Options and set the Speed to 4.
Now, with the animation editor still active, select our Sprite. Go to Frame, set it to 1, and click the key next to it. Press Create at the prompt. Duplicate the animation and rename the new one to “idleup”. On the Sprite, set Frame to 3, and press the key button. Do the same with “idleright” and “idleleft”, with frames 5 and 7, respectively.
Next we are going to do our walk animations. Duplicate any animation and rename it “walkdown”. With the current step at 0, set the frame to 0 and add a key. It should automatically go to 1 next, so press the key button again. Duplicate and adjust the frames for for “walkup”, “walkright”, and “walkleft”. You can press the play button to make sure you are inserting the correct frames.
Finally, we are going to do the same thing with the push animations, starting at frame 8. Hopefully you understand the concept by now.