Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
gdevelop5:tutorials:platform-game:2-player-animations [2017/09/26 22:27]
4ian [Let's take a look at the result]
gdevelop5:tutorials:platform-game:2-player-animations [2021/11/22 23:06] (current)
Line 1: Line 1:
-# How to make a platform game : player animations+# How to make a platform game: player animations
  
-This tutorial will explain you how to add different animations and how to use events to change the animations when the state of the player is changing.+<note important>This version of the tutorial is deprecated. Please refer to the [[gdevelop5:tutorials:platformer:start|]] for the completely revised version of the tutorial. The equivalent information to the current tutorial can be found in [[gdevelop5:tutorials:platformer:part-4|]].</note>
  
-[[gdevelop5:tutorials:platform-game:start|Click here to read the previous part]] if you have not done it already.+This tutorial will explain to you how to add different animations and how to use events to change the animations when the state of the player is changing. 
 + 
 +[[gdevelop5:tutorials:platform-game:start|Click here to read the previous tutorial]] if you have not done it already.
  
 ## Add animations ## Add animations
  
-For now, the player is always displaying the same image: using the events, we're going to change its animation according to what he is doing.+At the moment, the player is always displaying the same standing animation but we're going to change that using events.
  
-Before doing this, we must add the appropriate animations to the Player object. +But first, we need to add the appropriate animations to the Player object. 
  
 ### Jumping animation ### Jumping animation
  
 Open the editor of the Player object, make sure you're on the `Properties` tab, then click on the + button on the bottom of the window to add an animation. Open the editor of the Player object, make sure you're on the `Properties` tab, then click on the + button on the bottom of the window to add an animation.
-Finally, click on the `+` button of the new animation and choose `p1_jump` as the image to add:+Finally, click on the thumbnail with the `+` sign of the new animation and choose `p1_jump` as the image to add:
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_00.56.03.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_00.56.03.png?nolink |}}
  
-Animations can be given name, it's an easy way to differentiate between them and use them in the events. It's as simple as clicking on "Optional animation name" and typing the name you want.+Animations can be given names. It's an easy way to differentiate between them and use them in the events. It's as simple as clicking on "Optional animation name" and typing the name you want.
  
 Enter "Idle" and "Jumping" as names for our two animations: Enter "Idle" and "Jumping" as names for our two animations:
Line 26: Line 28:
 ### Running animation ### Running animation
  
-We need another animation which the one displayed when the character is running on a platform. +We also need to add the walking animation to display when the character is walking on a platform. 
-Add another animation like we did, and, when adding images, select the 5 images `p1walk03.png`, `p1walk04.png`, … and `p1_walk07.png`. Also set the name of the animation to `Running`:+Add another animation like we did before, and, when adding images, select the 5 images `p1walk03.png`, `p1walk04.png`, … and `p1_walk07.png`. You can select all the images at once or one by one as you prefer. Finally set the name of the animation to `Running`:
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_00.59.15.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_00.59.15.png?nolink |}}
  
-These images will be displayed so as to create the animation. We need to tweak a bit some options: first click on `Don't loop` to switch this option to `Loop`. The timer is displaying the time in seconds between each image. Enter 0.05 instead of 1 so that the animation is faster:+These images will be displayed so as to create the animation. We need to tweak a bit some options. First, click on `Don't loop` to switch this option to `Loop`. This will make the animation restart when the end is reached. The timer is displaying the time in seconds between each image: this is the speed of the animation. Enter 0.05 instead of 1 so that the animation is played faster:
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_01.02.03.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_01.02.03.png?nolink |}}
  
-Our object is now ready!+Our object is now ready, click "Apply" in the bottom right corner.
  
 ## Use events to change animations ## Use events to change animations
  
 ### The first event: animate when jumping ### The first event: animate when jumping
 +<note tip>Please note that this tutorial shows screenshots using the Full List editor mode rather than the Object-specific (new) editor mode. [[gdevelop5:tutorials:change-event-editor-mode|Click here to see examples of each editor mode and how to switch.]]</note>
  
-Now, we need to change the animation displayed by the object according to what the player do. We're going to use the events, which are used to describe the rules of the game and how objects are animated, moved and respond to player inputs. It's a kind of visual programming that can be learn very quickly and is accessible to all.+Now, we need to change the animation displayed by the object according to what the player is doing. We're going to use the events, which are used to describe the rules of the game and how objects are animated, moved and respond to player inputs. It's a kind of visual programming that can be learned very quickly and is accessible to all.
  
-Open the events editor of the scene by cliking on the tab called `New Scene (events)`.+Open the events editor of the scene by clicking on the tab called `New Scene (events)`.
  
 For now, the events editor is empty: For now, the events editor is empty:
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_01.05.29.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_01.05.29.png?nolink |}}
  
-Add first event by clicking on the first button to add an event in the toolbar:+Add the first event by clicking on the add event button in the top toolbar.
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.40.43.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.40.43.png?nolink |}}
  
-An event is composed of a list of conditions (that can be used to check if a collision is happening, if a key is pressed, if the player life is low etc...) and a list of actions that are run when conditions are met.+An event is composed of a list of conditions (e.g. to check if a collision is happening, if a key is pressed, if the player life is low etc...) and a list of actions that happen when the conditions are met.
  
 For now the event is empty: For now the event is empty:
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.41.32.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.41.32.png?nolink |}}
  
-In this first event, we're going to check if the player is jumping and change its animation. Click on `Add condition`.+In this first event, we're going to check if the player is jumpingand change its animation accordingly 
 +First Click on `Add condition`.
  
-In the window opened, you can see all conditions available in GDevelop for your game in the list on the left. We want to check if the Player object, which has the PlatformerObject behavior, is jumping. Open the category called `Platform behavior` and then choose `Is jumping`.+In the new window, you can see all the conditions available to make your game. We want to check if the Player object, which has the Platformer character behavior, is jumping. Open the category called `Platform behavior` and then choose `Is jumping`.
  
-The right part of the window displays the parameter that are needed to configure the condition. Here, we want to check if the Player object is jumping, so choose Player for the first parameter (the second is automatically filled):+The right part of the window displays the parameters that are needed to configure the condition. Here, we want to check if the "Playerobject is jumping, so choose Player for the first parameter (the second is automatically filled):
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.45.29.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.45.29.png?nolink |}}
  
-The condition is ready! Click on Ok to close the window and see the condition added in the event: +The condition is ready! Click on Ok in the bottom right corner to close the window and see the condition added in the event: 
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.47.17.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.47.17.png?nolink |}}
  
-Let's now add the condition to change the Player animation. Click on `Add action`.+Let's now add the action to change the Player animation when the character is jumping. Click on `Add action`.
  
-The window opened is similar, but now display all actions available:+The window opened is similar, but now displaying all the actions available:
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.51.10.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.51.10.png?nolink |}}
Line 83: Line 87:
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.54.51.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.54.51.png?nolink |}}
  
-When it's done, click on Ok. The first event is ready!+When it's done, click on Ok in the bottom right corner. The first event is ready!
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.56.10.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.56.10.png?nolink |}}
Line 89: Line 93:
 ### Let's take a look at the result ### Let's take a look at the result
  
-Click on the Play button in the toolbar to launch a preview. When you jump, the player animation changes!+Click on the Play button in the toolbar to launch a preview. When you jump, see the player animation changes!
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.58.31.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_20.58.31.png?nolink |}}
  
-But when the Player is back on the floor, you can see that the animation is not set back to the Idle animation. This is simply because we never told GDevelop to do so! Let's add another event to do this.+But when the Player is back on the floor, you can see that the animation is not set back to the Idle animation. This is simply because we never told GDevelop to do so! Let's add another event to fix this.
  
 ## Idle and running animation ## Idle and running animation
  
-In fact, it's a good opportunity to add the running animation too: +Let add a new blank event. Click on 'Add condition' and this time select the condition 'Is on floorinside the Platformer behavior category. Note that you can use the search box on the top to quickly find a condition when you know its name!
- +
-  * When the player is on the ground *and* not running, the Idle animation must be shown. +
-  * When the player is on the ground *and* running, the Running animation must be shown. +
- +
-We could do two events with two conditions and an action in each, but we can use *sub-events* to only have the condition checking if the player on the ground one time. +
- +
-Add a blank new event, and click on `Add condition`. Choose the condition `Is on floor`, inside `Platform Behavior` category. Note that you can use the search box on the top to quickly use a condition when you know its name!+
  
 Fill the first parameter by choosing the Player object: Fill the first parameter by choosing the Player object:
Line 114: Line 111:
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_21.54.47.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_21.54.47.png?nolink |}}
  
-We can now add two other events, which will be sub-events of this event. This mean that they only will be launched when their *parent(the event we just created) has its conditions met.+In fact, it's a good opportunity to make our character displaying not only the idle and jumping but also the running animation too: 
 + 
 +We could add two events, with two conditions and an action in each event
 + 
 +     * When the player is on the ground *and* not running, the Idle animation must be shown. 
 +     When the player is on the ground *and* running, the Running animation must be shown. 
 + 
 +Instead, we can use *sub-events*, to only have the condition checking if the player on the ground one time.
  
 Select the event we created by clicking on an empty area near `Add condition` or `Add action`: Select the event we created by clicking on an empty area near `Add condition` or `Add action`:
Line 124: Line 128:
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.05.49.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.05.49.png?nolink |}}
  
-Two "child" events are added under the event. There is some added margin on the left and a line between them to visually see that they are connected:+Two "child" events are added under the event which is considered the parent event now. There is some added margin on the left of the events and a line between them to visually confirm that they are connected:
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.07.02.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.07.02.png?nolink |}}
Line 132: Line 136:
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.08.06.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.08.06.png?nolink |}}
  
-For the second one, add the same conditions, but check the `Invert condition` toggle. This will make sure that the actions of the event will be launched when the Player object is **not** moving:+For the second one, add the same condition, but check the `Invert condition` toggle. This way, the actions of the event will be launched when the Player object is **NOT** moving:
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.09.30.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.09.30.png?nolink |}}
  
 Here are our events so far: Here are our events so far:
 +
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.10.03.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.10.03.png?nolink |}}
  
-We're almost done, let's finish by adding one action to each event. The first event will set the animation to `"Running"` and the other to `"Idle"(don't forget the **quotes**!).+We're almost done, let's finish by adding the required actions to each event. Use the first event to set the animation of the character to `"Running"` and the second event to set the animation of the character `to "Idle"`.  
 + 
 +You can add these actions the same way we did before for the jumping animation. Don't forget the quotes (`" "`when you enter the animation names.
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.15.20.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.15.20.png?nolink |}}
Line 147: Line 154:
 You can launch a preview of your game and see that the player animation is changing while running and jumping! You can launch a preview of your game and see that the player animation is changing while running and jumping!
  
-A small improvement we can do is to set the animation to Jumping when the player is falling too (otherwise the Running animation keeps playing when the player reach the end of a platform).+A small improvement we can do is to set the animation to Jumping when the player is falling too (otherwise the Running animation keeps playing when the player ​reaches the end of a platform).
  
 {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.23.10.png?nolink |}} {{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.23.10.png?nolink |}}
 +## Next step: have the camera follow the player
  
-## Follow the player with the camera +For nowit's hard to build a large level to explore because the player can quickly walk outside of the screen! The next part of the tutorial will show how to make the camera follow the player. It's really simple, a single event will be enough!
- +
-For now it's hard to build a large level to explore because the player can quickly go outside of the screen! +
- +
-Let's add another event to make the camera follow the player. There are multiple way to achieve this. The simplest is to add an event with no conditions and the action called `Center the camera on an object`: +
- +
-{{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.25.53.png?nolink |}} +
- +
-The new event looks like this: +
-{{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.26.20.png?nolink |}}+
  
-You can launch a preview to see that the camera is now centered on the player+➡️ Read **[[gdevelop5:tutorials:platform-game:3-have-camera-follow-player|the next part of the tutorial here]]**! 
  
-{{ :gdevelop5:tutorials:platform-game:screen_shot_2017-09-26_at_22.27.31.png?nolink |}}