Adding Animations Players – GDevelop



In our previous lesson we add behaviors to objects. If remember, we found that our player character doesn’t animate when moving and jumping. In this lesson, we are going to fix that. We already have added one animation to our character. That is the “idle” animation. So let’s add other animations.

Step 1

Now we are going to add “run” animation. Go to Edit Object in “Bob” (you know how to if you followed the previous lesson). Click ADD AN ANIMATION +. This will add an empty animation to your character. Rename this animation to “run”. Click ADD + button. Now navigate to assets folder and go to player > run and select all the images, then click ok to add images to animation. 

Step 2

Click ADD AN ANIMATION + button again. Rename this animation to “jump”. Click ADD+ button and add image “1.png” from player > jump folder. Click ADD AN ANIMATION + button again. Rename this animation to “fall”. This time select “2.png” from player > jump folder. If you follow the instructions correctly, your character properties should look like this;



If everything is done, click APPLY to save the changes you’ve made. If you hit the Preview button and see, still nothing changed. Well, this is because we need to program which animation to play when we control the player. This is where we need Events. So it’s time to create our first event!

Step 3

Switch to “Level 1” scene’s event editor. You’ll see nothing at the moment. Since we haven’t created any event so far. This is where we add our game logic. You don’t need any coding knowledge to create events. It’s pretty simple visual editor anyone can learn within short period of time. But if you have a basic knowledge in programing concepts, that would be great. Anyways, it not compulsory to know coding.

Figure 1 - Add anew empty event

Figure 2 - Empty Event
Click Add a new empty event button (Figure 1) from the top tool bar. This will ad an empty event (figure 2). Event has two sides. One is to define our condition and the other side to define the action. Click Add condition. This will open a popup which displays all available conditions in GDevelop.



From the list of conditions in the left side, select Is jumping under Platform BehaviorI or just simply type “is jumping” in search bar to find and select the condition. On the right side, all settings related to the condition we selected will appear. For “Is jumping” we need to configure which object’s movement we need to track. Select “Bob” from the dropdown. If you did correctly, your condition will look something just like this;


If everything is fine, click OK to add the condition to our event. Now click Add action. This will open a popup similar to condition popup. This popup contains all the available actions in GDevelop.

Now find Sprite category and open Animations and images sub category. Select Change the animation (by name). Similar to condition settings, you’ll be able to see relevant settings for the action you’ve selected. Choose “Bob” from the dropdown as the Object. Under Animation name, enter the animation name we need to play. In this case it’s “jump”. Remember, you should define the animation name within quotes. We define strings within quotes. If you have a programing knowledge you must be familiar with the way we use string variables. If you configure the settings correctly, your action should look something just like this;


If everything is ok, hit the OK button to save the action we created. Hooray! We just created our first Event! Well there are few more conditions to add before we wind up this lesson. Now follow the same steps to add the second animation.

Our second event is as follows; Click Add condition. Find and select Is falling and select “Bob” as the object, then click OK. Now click Add action. Find and select Change the animation (by name) and select “Bob” as the object. Enter “fall” as the animation name and hit OK. Now we have successfully added our second event.

Figure 3 - Add anew sub event button
Well, now we have already created three simple events. Our next event is little bit different. In previous events, we had only one condition. But we are not going to add sub-events. Click Add a sub event button (figure 3). Make sure you have selected the main event that you want to add the sub event. You can also right click on the event you want to add sub event and select “Add sub event”. We need two sub events.

Click Add condition in main event. Find and select Is on floor and select “Bob” as the object, then click OK. Keep the actions empty for the main event.

Go to first sub event and click Add condition. Find and select Is moving and select “Bob” as the object, then click OK. Now click Add action. Find and select Change the animation (by name) and select “Bob” as the object. Enter “run” as the animation name and hit OK.

Go to second sub event and Add condition. Find and select Is moving and select “Bob” as the object. This time we are enabling Invert condition option in the settings. Click OK to save changes. Now click Add action. Find and select Change the animation (by name) and select “Bob” as the object. Enter “idle” as the animation name and hit OK.

If you follow the instructions correctly, your events should look something similar to this;


If everything is ok, save your project. Now click Preview button to preview the changes we made. Now try to move and jump Bob. Well now Bob is animated for running, jumping and falling. But, still there’s a problem. Moving forward works fine. But when you try to move the player backward, it doesn’t turn around. How to fix this? That we’ll discuss in the next lesson.

If you have any questions or doubts, please feel free to comment below.