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 [2018/09/02 01:46]
pserwylo [How to make a platform game: player animations]
gdevelop5:tutorials:platform-game:2-player-animations [2018/09/12 01:19]
4ian
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.+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. [[gdevelop5:​tutorials:​platform-game:​start|Click here to read the previous tutorial]] if you have not done it already.
Line 31: Line 31:
 {{ :​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`. ​It is because we want to loop this animation ​to be played constantly. Otherwise it would be played only once every time it called and in case of walking it is not what we want. The timer is displaying the time in seconds between each image, in other words the speed of the animation. Enter 0.05 instead of 1 so that the animation is played 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, click Apply in the bottom right corner.+Our object is now ready, click "Apply" ​in the bottom right corner.
  
 ## Use events to change animations ## Use events to change animations
Line 41: Line 41:
 ### The first event: animate when jumping ### The first event: animate when jumping
  
-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 clicking on the tab called `New Scene (events)`. Open the events editor of the scene by clicking on the tab called `New Scene (events)`.
Line 52: Line 52:
 {{ :​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 executed ​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 accordingly. ​+In this first event, we're going to check if the player is jumpingand change its animation accordingly. ​
 First Click on `Add condition`. First Click on `Add condition`.
  
-In the window ​opened, you can see all 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`.+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 "Player" ​object 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 |}}
Line 72: Line 72:
 Let's now add the action to change the Player animation when the character is jumping. 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 displaying 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 98: Line 98:
 ## Idle and running animation ## Idle and running animation
  
-Let add a new blank event. Click on 'Add condition'​ and this time select the condition 'Is on floor' inside the Platformer ​behaviour ​category. Note that you can use the search box on the top to quickly find a condition when you know its name!+Let add a new blank event. Click on 'Add condition'​ and this time select the condition 'Is on floor' inside 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!
  
 Fill the first parameter by choosing the Player object: Fill the first parameter by choosing the Player object:
Line 110: Line 110:
 In fact, it's a good opportunity to make our character displaying not only the idle and jumping but also the running animation too: 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 do two events with two conditions and an action in each+We could add two eventswith 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* not running, the Idle animation must be shown.
      * When the player is on the ground *and* running, the Running animation must be shown.      * When the player is on the ground *and* running, the Running animation must be shown.
  
- ​but ​we can use *sub-events* to only have the condition checking if the player on the ground one time+Instead, ​we can use *sub-events*to only have the condition checking if the player on the ground one time.
- +
-So, let do that. 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.+
  
 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 127: Line 125:
 {{ :​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 which is considered the parent event now. There is some added margin on the left and a line between them to visually confirm 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 139: Line 137:
 {{ :​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 |}}
  
-Our events ​should look something like this 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 ​it by adding the required ​action ​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 as we did before ​with jumping, don't forget the quotes " " when you enter the animation ​name.+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 148: Line 149:
 ## Time to preview (and save) ## Time to preview (and save)
  
-Let preview ​the 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!
  
-little bug you might notice if you try to jump off a platform is that the player is playing the walking ​animation ​even when falling. This is may not be something we want and prefer ​to play a falling animation instead ​when the player is falling. To fix it, we can set the animation ​to Jumping also when the player ​is falling just like we did before with the other animations. It should be not problem by now. Just add a blank event, add the condition 'Is falling'​ and add the action to change the animation by name to '​Jumping'​.+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 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 ## Next step: have the camera follow the player
  
-For now it'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 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!
  
 ➡️ Read **[[gdevelop5:​tutorials:​platform-game:​3-have-camera-follow-player|the next part of the tutorial here]]**! ​ ➡️ Read **[[gdevelop5:​tutorials:​platform-game:​3-have-camera-follow-player|the next part of the tutorial here]]**! ​