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
Last revision Both sides next revision
gdevelop5:tutorials:endless-runner [2019/06/15 18:09]
nilarjun
gdevelop5:tutorials:endless-runner [2019/07/04 16:26]
nilarjun
Line 1: Line 1:
 ====== A Beginner'​s Tutorial to an Endless Runner Game ====== ====== A Beginner'​s Tutorial to an Endless Runner Game ======
  
-{{:​gdevelop5:​tutorials:​endlessrunnergame_intro.png?​nolink |}} +<WRAP box 100%> 
-This tutorial will help you get familiar with the way GDevelop works.+ {{:​gdevelop5:​tutorials:​endlessrunnergame_intro.png?​nolink |}} This tutorial will help you get familiar with the way GDevelop works.
 In this tutorial, we are going to create a very basic endless runner game where the **platforms are generated randomly** and the player has to move in order to prevent being pushed outside the screen. There is also a **score system** which updates the score when the player is in action. In this tutorial, we are going to create a very basic endless runner game where the **platforms are generated randomly** and the player has to move in order to prevent being pushed outside the screen. There is also a **score system** which updates the score when the player is in action.
  
 To know the basics of how the software works, you can refer [[gdevelop5:​getting_started|]] for more information. To know the basics of how the software works, you can refer [[gdevelop5:​getting_started|]] for more information.
 +</​WRAP>​
    
 +{{ :​gdevelop5:​tutorials:​gdevelopstartscreen.png?​nolink|}}
 =====Download GDevelop ===== =====Download GDevelop =====
  
Line 12: Line 14:
  
 It is advised to always check the above page for the latest versions of GDevelop and keep the software updated at all times. Once you have downloaded and installed the software, when you launch the program, you will be welcomed with a "​Start"​ screen. It is advised to always check the above page for the latest versions of GDevelop and keep the software updated at all times. Once you have downloaded and installed the software, when you launch the program, you will be welcomed with a "​Start"​ screen.
- 
-{{ :​gdevelop5:​tutorials:​gdevelopstartscreen.png?​nolink |}} 
  
 ===== Main Game Elements ===== ===== Main Game Elements =====
Line 55: Line 55:
 You can customize the name of your scene by clicking on the three dots next to the created scene and clicking on ''​Rename''​. You can customize the name of your scene by clicking on the three dots next to the created scene and clicking on ''​Rename''​.
  
-<WRAP round info 100%>​Make sure that you have already downloaded the archive mentioned before. You will be needing that for the game sprites.</​note>+<WRAP round info 100%>​Make sure that you have already downloaded the archive mentioned before. You will be needing that for the game sprites.</​WRAP>
  
 =====Step 3: Working on the New Scene===== =====Step 3: Working on the New Scene=====
Line 180: Line 180:
  
 Note that the Object should be set to Player as we want the Player to perform the action. Now we also want the jump animation to play while the Player Sprite jumps. Note that the Object should be set to Player as we want the Player to perform the action. Now we also want the jump animation to play while the Player Sprite jumps.
-To do this we add another action for the same event condition. Click on **Add an action**->​**Sprite**->​**Animation and images**->​**Change the animation** and set it as shown. Note that instead of using identifier numbers, you can also use the animation name. The name should be within quotes.+To do this we add another action for the same event condition. Click on **Add an action**->​**Sprite**->​**Animation and images**->​**Change the animation** and set it as shown. Note that instead of using identifier numbers, you can also use the animation name. To refer to animations using their name, you should use the **Change the animation (by name)** option instead. The name should be within quotes.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190524000821.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190524000821.png?​nolink |}}
Line 222: Line 222:
 Now, we need to add a corresponding action. Add an action to this event, similar to the one we added for the obstacle/​platform to make it move towards left. This time, we need to make our character move towards right whenever he is on the floor of the platform. We say "move towards the right" but our character doesn'​t really move. It just balances the negative movement of the platform or obstacle so that the character does not slide. Try to add this action yourself. Now, we need to add a corresponding action. Add an action to this event, similar to the one we added for the obstacle/​platform to make it move towards left. This time, we need to make our character move towards right whenever he is on the floor of the platform. We say "move towards the right" but our character doesn'​t really move. It just balances the negative movement of the platform or obstacle so that the character does not slide. Try to add this action yourself.
  
-<WRAP round tip 100%>​Hint:​ Click on Add an action. Find **Common actions for all objects**->​**Movement**->​**Add a Force(Angle)**. Then choose **Platform** as the object and assign it an angle **0**(specifying right direction) and a speed **250**.</​WRAP>​+<WRAP round tip 100%>​Hint:​ Click on Add an action. Find **Common actions for all objects**->​**Movement**->​**Add a Force(Angle)**. Then choose **Player** as the object and assign it an angle **0**(specifying right direction) and a speed **250**.</​WRAP>​
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190604124748.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190604124748.png?​nolink |}}
Line 231: Line 231:
 ---- ----
  
-We also need to make the character play the **Run** animation when he is on floor. Since we have already made an event to check "Is on floor" condition, we can simply add another action for this same event. Click **Add an action**->​**Sprites**->​**Animation and images**->​**Change the animation**. Then fill in the object and the correct animation identifier to play that particular animation. For this game, we saved our Run animation at identifier ''​2''​. You can also use the animation name as an identifier. If you use a name, don't forget to put the name within quotes (""​) as it is a string.+We also need to make the character play the **Run** animation when he is on floor. Since we have already made an event to check "Is on floor" condition, we can simply add another action for this same event. Click **Add an action**->​**Sprites**->​**Animation and images**->​**Change the animation**. Then fill in the object and the correct animation identifier to play that particular animation. For this game, we saved our Run animation at identifier ''​2''​. You can also use the animation name as an identifier. To refer to animations using their name, you should use the **Change the animation (by name)** option instead. If you use a name, don't forget to put the name within quotes (""​) as it is a string.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190524155500.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190524155500.png?​nolink |}}
Line 263: Line 263:
 There will be 3 states for our game.  There will be 3 states for our game. 
  
-  * First state or the initial state is when the game hasn't started yet and it requires the user to start the game.+  * First state or the initial state is when the game hasn't started yet and it requires the user to start the game. We are going to refer to this state using the value **0**.
  
-  * Second state is when the character or Player Sprite is in action. ​+  * Second state is when the character or Player Sprite is in action. We are going to refer to this state using the value **1**.
  
-  * The third state is the "Game Over" state when the character falls off the platform.+  * The third state is the "Game Over" state when the character falls off the platform. ​We are going to refer to this state using the value **2**. 
 + 
 +{{ :​gdevelop5:​tutorials:​0endlessrunner_flow.jpg?​nolink |}}
  
 First off, we need to set up a variable to store the current state of the game. Create a new event. **Add a condition**->​**Scene**->​**At the beginning of the scene**. First off, we need to set up a variable to store the current state of the game. Create a new event. **Add a condition**->​**Scene**->​**At the beginning of the scene**.
  
-Next, **Add an action**->​**Variables**->​**Value of a scene variable**. Then name your variable something, **state** for example and set it to **0**.+Next, **Add an action**->​**Variables**->​**Value of a scene variable**. Then name your variable something, **state** for example and set it to **0**. This sets the game to the initial pre-game state at the start of the scene.
  
-{{ :​gdevelop5:​tutorials:​screenshot_20190524221104.png?nolink |}}+{{ :​gdevelop5:​tutorials:​screenshot_20190621003505.png?nolink |}}
  
 We don't want our game to start immediately. We want it to start after the user presses a key.  We don't want our game to start immediately. We want it to start after the user presses a key. 
Line 279: Line 281:
 In other words, we want the game to **start** when the value of the scene variable state is **1**. Let's modify our events. In other words, we want the game to **start** when the value of the scene variable state is **1**. Let's modify our events.
  
-{{ :​gdevelop5:​tutorials:​screenshot_20190611112314.png |}}+<WRAP round tip 100%>​Hint:​ In the event where we specified a force for the Platform to move, we will now add a condition. Click **Add a condition**->​**Variables**->​**Value of a scene variable**. Set it to check if the value is equal to **1**.</​WRAP>​ 
 + 
 +{{ :​gdevelop5:​tutorials:​screenshot_20190621000230.png?​nolink ​|}}
  
 See the changes I made in our events: I added a new condition and made some **sub-events**. The condition of a sub-event is tested only if the parent event'​s condition results to ''​true''​. In our case, if the game is in the **initial** state(event),​ only then will the sub-events check the respective conditions and perform their corresponding actions. See the changes I made in our events: I added a new condition and made some **sub-events**. The condition of a sub-event is tested only if the parent event'​s condition results to ''​true''​. In our case, if the game is in the **initial** state(event),​ only then will the sub-events check the respective conditions and perform their corresponding actions.
  
-In other words, the sub-events **work** only if the event condition results to true. If the parent event'​s condition results to ''​false'',​ the sub-event conditions won't be checked and thus, their corresponding actions won't be executed even if the sub-event conditions result to ''​true''​.+To convert an event into a sub-eventyou need to drag that event to put them under a parent event to which it is associated. You will notice an indentation in the event-sub-event ladder which confirms that the indented events are "​sub-events"​ with respect to the parent event. 
 + 
 +Sub-events **work** only if the event condition results to true. If the parent event'​s condition results to ''​false'',​ the sub-event conditions won't be checked and thus, their corresponding actions won't be executed even if the sub-event conditions result to ''​true''​. 
 + 
 +<WRAP round box 100%>​{{:​gdevelop5:​tutorials:​screenshot_20190621002408.png?​nolink |}} 
 +To add a new sub-event altogether, click to choose the event for which we are creating the sub-events. Then click on the icon shown on the left. You can find that in the Navigation Menu of GDevelop.</​WRAP>​
  
-Now, as long as the value of the scene variable remain **0**, the game won't start, that is, the platforms won't move nor the player can jump. 
  
-<WRAP round tip 100%>​Hint:​ To add those extra conditionsdo as follows: **Add a condition**->​**Variables**->​**Value ​of scene variable**. Set it to check if the value is equal to **1**.</​WRAP>​+Nowunless the value of the scene variable is **1**, the game won't start, that is, the platforms won't move nor the player can jump.
  
 We need the user to start the game by pressing a key. To do that, add a new event. We need two conditions here. One for checking the value of the scene variable and another for detecting the if the key pressed or not. Both these conditions have already been added in some form in the other events. Try to do it yourself ;-) We need the user to start the game by pressing a key. To do that, add a new event. We need two conditions here. One for checking the value of the scene variable and another for detecting the if the key pressed or not. Both these conditions have already been added in some form in the other events. Try to do it yourself ;-)
Line 307: Line 315:
 Now, we need to work on the third state, i.e, when the game ends due to the character falling off the platform. We need to check the X and the Y positions of our character, i.e., we need to check if the character is inside the scene space. If he reaches outside, it is obvious he has fallen off the platform or has been pushed outside the screen. We check for these conditions and change the state of the game to **Game Over** state. Now, we need to work on the third state, i.e, when the game ends due to the character falling off the platform. We need to check the X and the Y positions of our character, i.e., we need to check if the character is inside the scene space. If he reaches outside, it is obvious he has fallen off the platform or has been pushed outside the screen. We check for these conditions and change the state of the game to **Game Over** state.
  
-{{ :​gdevelop5:​tutorials:​screenshot_20190614213834.png?​nolink&​400 ​|}}+{{ :​gdevelop5:​tutorials:​screenshot_20190614213834.png?​nolink |}}
  
 In this event, we use the concept of a condition and a sub-condition. Before we get more into the logic, let's first set up this condition-sub-condition ladder. In this event, we use the concept of a condition and a sub-condition. Before we get more into the logic, let's first set up this condition-sub-condition ladder.
Line 364: Line 372:
 Now as you can see, we set its default value to 0. Now we need to make an action to update the score. Find the event shown below that we had already created before. Now as you can see, we set its default value to 0. Now we need to make an action to update the score. Find the event shown below that we had already created before.
  
-{{ :​gdevelop5:​tutorials:​screenshot_20190526204337.png?nolink |}}+{{ :​gdevelop5:​tutorials:​screenshot_20190621000502.png?nolink |}}
  
-We will add this action here. Click **Add an action**. Find **Common ​conditions ​for all object**->​**Variables**->​**Modify a variable of an object**. Then do as shown below.+We will add this action here. Click **Add an action**. Find **Common ​actions ​for all object**->​**Variables**->​**Modify a variable of an object**. Then do as shown below.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190526204732.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190526204732.png?​nolink |}}
Line 412: Line 420:
 Now, we also want to hide the Start text, when the game has already started. For this, we add another action to the even already created above. Now, we also want to hide the Start text, when the game has already started. For this, we add another action to the even already created above.
  
-{{ :​gdevelop5:​tutorials:​screenshot_20190614213634.png?​nolink&​400 ​|}}+{{ :​gdevelop5:​tutorials:​screenshot_20190614213634.png?​nolink |}}
  
 Lastly, we add two events to **Show** the **Game Over** and **Restart** text when the game ends, that is when the Game Over state is reached. Lastly, we add two events to **Show** the **Game Over** and **Restart** text when the game ends, that is when the Game Over state is reached.
Line 419: Line 427:
 There we have it! You have successfully learned how to create an Endless Runner game. Making games with GDevelop is very easy once you grasp how to use the features. It took me about three days to write this tutorial in detail, while it only took me about an hour to create this game. Yes, that's how simple it is to make games in GDevelop💓 There we have it! You have successfully learned how to create an Endless Runner game. Making games with GDevelop is very easy once you grasp how to use the features. It took me about three days to write this tutorial in detail, while it only took me about an hour to create this game. Yes, that's how simple it is to make games in GDevelop💓
  
 +===== Bonus: Making the Game More Challenging =====
 +
 +Is the game way too easy to play? Do you want your game to be a little more challenging?​ Don't worry.
 +Let's work on it together. ​
 +
 +We are going to work on the speed of the moving platforms/​obstacles. We want them to move faster as the score increases. ​
 +
 +First of all, we want to add a new scene variable to store the initial speed with which the platforms moves. To add a scene variable, let's go to the event which has the ''​At the beginning of the scene''​ condition. Just like we did before, add a new variable. Click Add an action→Variables→Value of a scene variable. Then name your variable something, **speed** for example and set it to **250** which is the initial speed.
 +
 +Now, we want to change the event: where we specified the value of the force with which the platforms move. 
 +Instead of specifying a value, we will use the scene variable **speed**. To use the scene variable there, we need to follow this syntax: ''​Variable(speed)'',​ where speed is the scene variable specified.
 +
 +Do the same thing for the action where we specified a speed for the player sprite to avoid sliding. Now, we can work on changing the speed as the score increases.
 +
 +Now, we want to check the value of the object variable ''​score'',​ and change the value of the scene variable ''​speed''​ accordingly. Add new events and specify the conditions to increase the speed of the platforms. An example is shown below:
  
 +{{ :​gdevelop5:​tutorials:​screenshot_20190615230009.png?​nolink |}}