Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
7. June 2015


In the previous tutorial we covered Sprite Animation, although to be honest it was more about creating animation ready sprites.  The actual way we performed animation wasn’t ideal.  Fortunately we are about to cover a way that is very much ideal… and capable of a great deal more than just animating sprites!


As always, there is an HD video of the this tutorial available right here or embedded below.  It’s important to have followed the previous tutorial, as we will be building directly on top of it.


Keyframes Explained


Before we get to far into this tutorial I think it’s pretty critical to cover a key concept in animation, keyframing.  Essentially you animate by setting a number of “key” frames in the animations timeline, then let the computer take care of the rest.  You can set a keyframe on just about any property available in Godot as we will soon see.  For example you can create a key on the position value of a sprite.  Then advance the timeline, set another key at a different position.  The computer will then interpolate the position over time between those two keys.  This interpolation between key frames is often referred to as a “tweening” as in “inbetween”.  Don’t worry, it will make a lot more sense when we jump in shortly.




In the previous tutorial, we created a simple animation using code to increment the current frame at a fixed play rate.  Now we are going to accomplish the same thing using the built in animation system in Godot. 

Start by opening up the previous project and remove the code from our AnimatedSprite.  Now add a AnimationPlayer node under the root of your scene, like so:



With the AnimationPlayer selected, you will notice a new editor across the bottom of the 2D window:



This is your animation timeline control.  Let’s create a new animation named “walkcycle”

Click the New Animation icon



Name your animation and click Ok



Click the Edit icon



This will extend the animation options even more.



First let’s set the duration of our animation to 2 seconds:



You can then adjust the resolution of the animation timeline using the Zoom slider:



Here we’ve zoomed in slightly to show just over 2 seconds:



Now that we are in edit mode with our AnimationPlayer selected, in the 2D view, you will notice there are new options available across the top



This is a quick way to set keys for a nodes positioning information.  You can toggle on or off whether the key will store location, rotation and/or scale data.  You set a key by pressing the Key icon.  The first time you press the key icon you will be prompted if you want to create a new track of animation.

Select your sprite, make sure the timeline is at 0 and create a key. Advance the timeline to 2secconds, then move the sprite to the right slighly, then hit the key icon again to create another key frame.



Press the play icon in the AnimationPlayer to see the animation you just created:



Well that’s certainly movement, but pretty crap as far as animations go eh?  How about we add some frame animation to our mix.  Here is where you start to see the power of animation in Godot.


With the AnimationPlayer selected, rewind the timeline back to zero, make sure you select your AnimatedSprite, then in the Details panel you will notice that all of the properties have a little key beside them:



This is because you can keyframe just about any value in Godot.  We are now going to do it with the Frame value.  This is the value we programmatically increased to create our animation before.  Now we will instead do it using keyframes.  With the timeline at 0, set Frame to 0 then click the Key icon to it’s right.  Click Create when it prompts you if you wish to create a new track.  Then move the timeline to the end, increase Frame to the final frame (21 in my case), then click the Key again.  This will create a new track of animation:



You can see the different track names across the left.  The blue dots represent each key frame in the animation.  There is one final change we have to make.  Drop down the icon to the right of the animation track and change the type to Continuous, like so:



Now when you press play, you should see:



Playing Your Animation


While your animation appears properly if you press Play in the AnimationPlayer interface, if you press Play on your game, nothing happens.  Why is this?


Well simply put, you need to start your animation.  There are two approaches to starting an animation.


Play Animation Automatically

You can set the animation to play automatically.  This means when the animation player is created it will automatically start the selected animation.  You can toggle if an animation will play automatically using this icon in the Animation Player controls.



Play an Animation Using Code

Of course, AnimationPlayer also has a programmatic interface.  The following code can be used from the scene root to play an animation:

extends Node

func _ready():


Scripting the AnimationPlayer


Say you want to add a bit of logic to your keyframed animation…  with AnimationPlayer you have a couple options we can explore.


First there are the events that are built into the AnimationPlayer itself:


For simple actions like running a script when an animation changes or ends, using AnimationPlayer connections should be more than enough.


What about if you wanted to execute some code as part of your animation sequence?  Well that is possible too.  In your Animation editor window, click the Tracks button to add a new animation track:



Select Add Call Func Track:



Another track will appear in your animation.  Click the green + to add a new keyframe.



Now left click and drag the new key to about the halfway (1 second) mark.  Switch to edit mode by clicking the pen over a dot icon, then click your keyframe to edit it.  In the name field enter halfway.  This is the name of the method we are going to call:



Add a method to your root scene named halfway:

extends Node

func _ready():

func halfway():
   print("Halfway there")


When the keyframe is hit, the halfway method will be called.  Adding more function calls is as simple as adding more keys, or complete Call Func tracks.  As you may have noticed in the video above, you have the ability to pass parameters to the called function:



Finally, you can also access animations, tracks and even keys directly using code.  The following example changes the destination of our pos track.  This script was attached to the AnimationPlayer object:

extends AnimationPlayer

func _ready():
   var animation = self.get_animation("walkcycle")


Now when you run the code you should see:



The Video


3. June 2015


In this tutorial we are going to look at Sprite Animation in Godot Engine, specifically on using the AnimatedSprite class.  We are going to import and create a node that has multiple frames of animation, then look at some code to flip between frames.  In the immediately following tutorial, we will then cover a much better animation method using AnimationPlayer.


As always, there is an HD Video version of this tutorial available right here or embedded below.


Alright, let’s just right in with AnimatedSprite.


Sprite Animation

AnimatedSprite is a handy Node2D derived class that enables you to have a node with multiple SpriteFrames.  In plain English, this class enables us to have a sprite with multiple frames of animation. 


Speaking of frames of animation, this is the sequence of png images I am going to use for this example:



You can download the zip file containing these images here, or of course you can use whatever images you want.


Now we simply want to import them to our using the standard Import->2D Texture method.  Be aware, you can multi select in the Importer, so you can import the entire sequence in one go.  Assuming you’ve done it right, your FileSystem should look somewhat like:



Now add an AnimatedSprite node to your scene like so:



Now we add the frames to our AnimatedSprite by selecting Frame->New SpriteFrames



Now drop it down again and select Edit:



The 2D editor will now be replaced with the SpriteFrames editor.  Click the open icon:



Shift select all of the sprite frames and select OK



All of your sprites should now appear in the editor:



Now let’s add some code to flip through the frames of our AnimatedSprite.  Attach a script to the AnimatedSprite node, then use the following code:

extends AnimatedSprite

var tempElapsed = 0

func _ready():
func _process(delta):
   tempElapsed = tempElapsed + delta
   if(tempElapsed > 0.1):
      if(get_frame() == self.get_sprite_frames().get_frame_count()-1):
         self.set_frame(get_frame() + 1)
      tempElapsed = 0
   print(str(get_frame() + 1))

The logic is pretty simple.  In our process tick we increment a variable tempElapsed, until 1/10th of a second has elapsed, at which point we move on to the next frame.  If we are at the last frame of our available animation, we then go back to the very first frame.


When you run it, you should see:



Pretty cool!  However, instead of advancing the frame using code there is a much better approach to animation, that we will see in the next tutorial.  Stay tuned.


The Video


29. May 2015


Up until this point we’ve covered a ton of the items that go into making a game, but nothing resembling a game… the pieces simply didn’t fit together.  In this tutorial we are going to change that and start bringing everything we learned together.  We are going to be covering a lot today, so if I lose you let me know.  This might be one of those tutorials where the video version comes in very handy.


Once again, I am simply going to assume you’ve gone through all the prior tutorials, so instead of telling you how to make a flipbook, I simply say “Make a flipbook”.  So if you haven’t already, you may want to go back and read or watch the earlier tutorials.  Ok, let’s jump right in.


There is an HD video version of this tutorial available here, or available embedded below.



Actors, Pawns, Characters and Controllers


In the world of Unreal Engine, things that exist in the game world are Actors.  Quite simply an Actor is an object that can be placed into a level.  It contains details like position, rotation and scale.  Most importantly, Actors are containers for Components, or even a hierarchy of components.  Components can be thought of as attributes or properties of an actor…  these are the things the actor is and does, and the Actor->Component relationship is a big part of Unreal’s modular design.


There are a few very important classes derived from Actor that are very important.  The first of which is the Pawn.  Basically a Pawn is an Actor that can be controlled by either the player or the games AI. Each Pawn has a Controller and each Controller has a pawn.


The Controller can control a pawn.  This takes two forms, AI controllers and character controllers.  The AI controller is responsible for the artificial intelligence that controls a pawns movements.  The Player Controller on the other hand is responsible for handling input from the player(s) and applying the results to the character’s pawn.


Finally you have Characters. A Character brings a number of objects together to represent that character.  In the 3D world, the Character class extends Pawn to include a skeletal mesh, a mesh for collision detection and of course whatever components you add.  In the Paper2D world there instead is PaperCharacter, which instead of a mesh instead has a Flipbook.


These key classes all work together to provide the building blocks of your game.  Don’t worry, we are about to see it all in action in a few minutes.


Getting Ready


We are now going to create the skeleton of a game, but this is going to require you to do a few things.  First of course create a new project, I am using these settings:



After loading I want a completely clean slate so I select an delete everything the project included:



Next, we need to import some sprites, both as a background and to create a flipbook for our main character.


I am using a simple three frame animation using this frame, this frame and this frame.   For my world background I am using this image.  Any likeness or similarity to an existing game is purely coincidental…   Obviously you don’t have to use these images, but if you want to follow along exactly you can.


Load all four images in as textures, then make a sprite from each.  Create a new Sprite Flipbook out of our 3 frames of animation and set the frame rate at 2fps. Then drag the fourth sprite in as our scenes background.  Be sure to set the backgrounds Y value to a negative so our game sprite will draw in front of it! 


Ultimately you should have something like this:



With a Flipbook like this:



Creating a Main Character


Now that we have a world and an animation, it’s time to add a character to the game.


To do so, select Add New, then Blueprint Class:



It is going to present a dialog with a number of the options we talked about earlier.  The one we are going to use in this example isn’t actually on the list so select All Classes:



In the filter type “Pap”, then locate PaperCharacter, click it and press Select.



This will create a new Blueprint for you, I immediately renamed mine MyPlayer.



I suppose I should point out, you don’t have to use PaperCharacter, any Pawn derived class is fine, although the process will be slightly different.


In the Content Browser, double click MyPlayer to bring up the Blueprint editor, it should look something like this:



Now we need to set the Flipbook for our Player.  You will notice on the left hand side, several components are already defined:



Select Sprite.


Now with sprite selected, it’s details should appear on the right hand side.  No locate Sprite and select the Flipbook you created earlier:



In the Viewport tab, your Player should now look like:



Now we want to shrink the capsule down to match our sprite.  The capsule container is used for doing collision tests and should be as near an approximation as possible.  Simply select the capsule in the viewport, then in details locate Shape and set the two values until it just fits around your sprite.  I used:



And the end results looks like:




Adding a Camera


Let’s look at the process of adding a component to an actor, in this case a Camera.  This will create a camera centered on the Actor.  To do so, in the Components panel select Add Component, then Camera:



In the viewport you will now see your new Camera component:



Right click select it, hit E to rotate and rotate it 90 degrees.  Then hit W to move it, and move it back along the X axis.  Something like this:



The angle and distance between the camera and the sprite are important, but once you’ve got things configured correctly ( in a few minutes ), you will be able to hit the Play icon and preview the effect of the camera on your player.  If we needed more fine tune control of the relationship between the camera and the sprite, we could add a Swing Arm component and attach the camera to it.  We don’t need this in this particular example though.


Configuring your game


Now that we have our player class, we need to let the game know that it is our player.  This is done by creating a GameMode blueprint.  To do so drop down the Blueprints icon, select GameMode->Create->GameMode, like so:



In the resulting dialog, name it then select OK.  I’m going with the default NewGameMode.



This will create a new Blueprint but the part you are most interested in are the properties.  It is here that you configure a number of important top level classes for your game.  Locate “Default Pawn Class” in the Classes section and select your Player class.



Now when the game starts, and instance of your Player class will automatically be created.


Now we just need to tell the game WHERE the player should be created, and this is done using a Player Start object.  In the Modes dialog, locate or search for Player Start and drag one onto the scene where you want the player pawn to be created.



And position it like so:



Now press play and we see…



Hmmm… that’s not good.


The problem is, our game world has gravity enabled by default and we don’t want this.  The easiest fix is to turn gravity off.


To turn off gravity, in the World Outliner, double click your map to bring World Settings dialog up.  Now locate the Physics section, check Override World Gravity and make sure gravity is set to 0.



Now when we press play we should see:



Much better, we are now one step closer.  We have a world (sorta…  I’ll admit, we are faking that part pretty heavily here), we have a main character… now we just need to add some controls.


Simple Keyboard Controls


Now we are going to jump into some Blueprint programming to add some keyboard controls to our player.  Double click your MyPlayer blueprint to bring it up in the editor, then select the Event Graph task.  Personally I am deleting all of the premades that they provide to keep things a bit cleaner.


Now we are going to add an input handler for when the user presses the Right arrow key.  Simply right click the canvas, type Right and select Key Events –> Right like so:



We create this simple blueprint.



Now when the user releases the right arrow, we move the Character Movement component of our player by 20 along the X axis.


Now through the power of Cut and Paste, we quickly create the following simple control scheme:



All that changes is for each key pressed we move in a different direction, either +/- x for left and right, or +/- z for up and down.


In case you didn’t know, you can rectangle select a region of blueprint and replicate it use the traditional cut/copy/paste hot keys.  Now we we run our game, we have primitive control over our player:



This is a very very very trivial example, and as you can see, it’s missing some logic for left and right as “definitely not PacMan” doesn’t turn to face the direction we are facing.  If you watch the video version of this tutorial I will show a simple way to handle that situation, we are already running pretty long here.


More on Input


The above example was super simple, we simply respond directly to a certain key being pressed.  In your game you probably wont end up using this logic.  Let’s take a quick look at some more advanced control options before moving on.


First, there was additional options for the key handling events that I never showed.  With a Key event selected in the Details panel you will see additional options:



In addition to changing the key handled you can enabled/disable modifier keys like Ctrl and Shift.  You can also control if the keyboard event is handled or will be propagated to the rest of the application by setting Consume Input.


More commonly however, you are going to want to handle Input more generically.  Responding to a single key event is all well and good, but what happens when you want the same code to work on a device without a keyboard?  Or you want a joystick to do the same thing?  Or you want the user to be able to remap their own keys?  Well, good news, there is an answer for that.


First, select Edit->Project Settings:



On the left, under Engine select Input then locate the Bindings section:



This area allows us to create input bindings between controls and either an action, or the axis of a controller ( virtual or otherwise ).  Let’s look at an example of mapping a “Left” axis.


Start by clicking the + next to Axis Mapping, expand the new value and rename it left, then add a key like so:



Now I am going to repeat the task, but also mapping for the left D-pad on a controller and the A key.  The end result looks like:



Now instead of handling each controller/key separately they will all emit the same “LEFT” event.  When you are creating your input handling blueprint, you can now respond to an Input->Axis Events->LEFT event:



You will notice the Event for an axis has one additional parameter:



Axis value is the “amount” along the axis it is.  All of our examples are on/off inputs, but if you had an analog stick, the Axis Value would indicate how far to the left the stick was pressed.  Coincidentally, that is the use of the “Scale” property in the Axis mapping process.  If for example you wanted the Left arrow key to be equivalent of pushing the Left analog stick 50%, you would set the scale value to 0.5.





22. April 2015


The following is a companion post containing the hotkeys used in the following video.  It is an hour in duration and attempts to teach the basics of 3D modeling in Blender.  It is a companion to this video which is also an hour in duration and introduces the viewer to Blender.  Of course if you prefer text based tutorials, we’ve got you covered there too!


The Video


The HotKeys


Blender Hotkeys



Switch mode ( object, edit ) Tab
Switch Edit Mode (Vertex, Edge, Face) Ctrl + Tab
Switch to Edit Vertex Mode Ctrl + Tab + 1
Switch to Edit Edge Mode Ctrl + Tab + 2
Switch to Edit Face Mode Ctrl + Tab + 3
Rotate R
Scale S
Translate/Move/Grab G
Select Object RMB
Select Multiple Shift + RMB
Select All/Clear Selected A
Select Edge Loop Alt + RMB
Box select B
Circle Select C
Lasso Select Ctrl + RMB
X Ray Display Mode Z
Specials Menu (Common operations) W
Vertex Menu Ctrl + V
Edge Menu Ctrl + E
Face Menu Ctrl + F
Extrude E
Bevel Ctrl + B
Knife Tool K
Connect Vertex J
Fill/Create Face F
Insert Edge Loop Ctrl + R


8. April 2015


The first tutorial in the Unreal Engine vs Unity tutorial series is now live.  In this tutorial we look at using Unreal Engine.  It’s an introduction to Unreal Engine, a guided tour around the editor, then we create a simple Hello World application using Blueprints.


I will be creating a companion text tutorial to go along with this video shortly.


You can see the video in full 1080p here.


The Video



AppGameKit Studio

See More Tutorials on!

Month List