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/14 18:19]
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 to 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 28: Line 28:
 <WRAP round download 100%> <WRAP round download 100%>
 === Download the Resources === === Download the Resources ===
-For making the game, you will need game assets that you can use to make the characters, platforms and backgrounds. Find all the resources you need for this game right {{gdevelop5:​tutorials:​endless_runner_resources.rar|here}}.</​WRAP>​+You will be needing ​game assets that you can use to make the characters, platforms and backgrounds ​for the game. Find all the resources you need for this game right {{gdevelop5:​tutorials:​endless_runner_resources.rar|here}}.</​WRAP>​
 =====Step 1: Creating a New Project===== =====Step 1: Creating a New Project=====
  
Line 51: Line 51:
 {{ :​gdevelop5:​tutorials:​new_scene_creation_for_endless_runner.png?​nolink |}} {{ :​gdevelop5:​tutorials:​new_scene_creation_for_endless_runner.png?​nolink |}}
  
-Click on the area where it says "Click to add a Scene" ​to create your first empty scene.+Click on the area where it says ''​Click to add a Scene'' ​to create your first empty scene.
  
-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''​.
  
-<note>Every game needs assets or resources to be used in the game. For the game that we are going to make, the **Resources** are already ​provided to you in the archive that you've downloaded before.</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=====
  
-Click on the scene you made in the previous step to open the **Scene Editor**where we will be making the game elements.+Click on the scene that we had made in the previous step to open the **Scene Editor**. This is where we will be making the game elements.
  
 {{ :​gdevelop5:​tutorials:​new_scene_for_endless_runner.png?​nolink |}} {{ :​gdevelop5:​tutorials:​new_scene_for_endless_runner.png?​nolink |}}
Line 80: Line 80:
 {{ :​gdevelop5:​tutorials:​screenshot_20190523183140.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190523183140.png?​nolink |}}
  
-Click on "Click to add an Object" ​area on the Objects tab to create your first object. ​The dialog box which opens shows the various types of objects.+Click on the  ''​Click to add an Object'' ​area on the Objects tab to create your first object. ​dialog box opens which shows the various types of objects.
 For our character, we need a **Sprite** type of object, where we can add animations for the character being **Idle**, or **Jumping**,​ or **Running**. For our character, we need a **Sprite** type of object, where we can add animations for the character being **Idle**, or **Jumping**,​ or **Running**.
  
Line 86: Line 86:
  
 Upon clicking the "​Sprite"​ option, a dialog box to change the properties of the Sprite object appears. We are now going to add animations for our character. Upon clicking the "​Sprite"​ option, a dialog box to change the properties of the Sprite object appears. We are now going to add animations for our character.
-To add your first animation, simply click on the  "​Click to add an animation" ​area or on the **+** button.+To add your first animation, simply click on the ''​Click to add an animation'' ​area or on the **+** button.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190523184135.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190523184135.png?​nolink |}}
  
 A new empty Animation placeholder appears. We will now load our Sprite images to create our animation. A new empty Animation placeholder appears. We will now load our Sprite images to create our animation.
-As you can notice, our Animation has an identifier ''​0'',​ We can supply a name to our animation too. Now for our first animation, we want to create an Idle animation. +As you can notice, our Animation has an identifier ''​0'',​ We can supply a name to our animation too.
-Click on the big **+** button which will open a dialog box to load your image. Note that we can also add multiples images, but for this animation we only have one.+
  
-Choose the ''​p1_stand.png''​ image from the archive that you've downloaded and uncompressed ​provided. After you have chosen the file, the animation placeholder now looks like this.+For our first animation, we want to create an Idle animation. 
 +Click on the big **+** button which will open a dialog box to load an asset. Note that we can also add multiples images, but for this animation we only require one. 
 + 
 +Choose the ''​p1_stand.png''​ image from the archive that you've downloaded and uncompressed. After you have chosen the file, the animation placeholder now looks like this.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190523184730.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190523184730.png?​nolink |}}
  
 Note that, I have given our Sprite object a name called "​Player"​. Note that, I have given our Sprite object a name called "​Player"​.
-Similarly, I have also assigned a name to our animation as "​Idle"​. Naming is optional, but naming sprites within your project makes it organized and easy to come back to when needed.+Similarly, I have also assigned a name to our animation as "​Idle"​. Naming is optional, but naming sprites within your project makes it organized and easy to use.
  
 Our first animation is done. Now, let's add the **Jumping** and **Running** animations. Try doing it using the images provided in the archive that you've downloaded. Our first animation is done. Now, let's add the **Jumping** and **Running** animations. Try doing it using the images provided in the archive that you've downloaded.
Line 128: Line 130:
  
 After choosing the Tiled Sprite Object, we get a dialog box similar to the one for the Player Sprite we created. Click on the "​Select an image" area to choose the image for our platform/​obstacle. After choosing the Tiled Sprite Object, we get a dialog box similar to the one for the Player Sprite we created. Click on the "​Select an image" area to choose the image for our platform/​obstacle.
-Once you are done with loading the image, the dialog box will look something like this.+Once you are done loading the asset ''​Platform.png''​, the dialog box will look something like this.
  
-{{ :​gdevelop5:​tutorials:​screenshot_20190523192804.png?nolink |}}+{{ :​gdevelop5:​tutorials:​screenshot_20190615205900.png?nolink |}}
  
-Notice, I have loaded the ''​Platform.png''​ file. I have also changed the default object name to "Obstacle". Change your Default width to __193__ and Default height to __40__, for now. +Notice ​that I have also changed the default object name to "Platform". Change your Default width to __193__ and Default height to __40__, for now. 
-Now we need to add a **Behavior** for this object, in a way similar to when we added a behavior for our Player Sprite. Go to the Behaviors tab, click to add a behavior to the object and choose **Platform** type of behavior.+Nowwe need to add a **Behavior** for this object, in a way similar to when we added a behavior for our Player Sprite. Go to the Behaviors tab, click to add a behavior to the object and choose **Platform** type of behavior.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190524122730.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190524122730.png?​nolink |}}
  
-Click on **Apply**, once you are done. It's now time to place our created objects into the **Scene**.+Click on **Apply**, once you are done. It's now time to place our created objects into the **Scene ​space**.
  
 =====Step 6: Adding Objects to the Scene===== =====Step 6: Adding Objects to the Scene=====
  
-Drag and drop the **Obstacle** and **Player** sprite from the Objects tab and place them within your scene.+Drag and drop the **Platform** and **Player** sprite from the Objects tab and place them within your scene.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190523193203.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190523193203.png?​nolink |}}
Line 152: Line 154:
 {{ :​gdevelop5:​tutorials:​screenshot_20190523193924.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190523193924.png?​nolink |}}
  
-We need to create some more Obstacles towards the right of the scene space for smoother random generation of obstacles. Lastly, we add a **Skybox** or background for our game. It is a **Sprite** type object. Try adding this object on your own. The asset being used here is ''​background2.png''​. The scene now looks like this.  Notice the additional obstacles created.+We need to create some more Obstacles/​Platforms ​towards the right of the scene space for smoother random generation of obstacles. Lastly, we add a **Skybox** or background for our game. It is a **Sprite** type object. Try adding this object on your own. The asset being used here is ''​background2.png''​. The scene now looks like this.  Notice the additional obstacles created. To put the background image **behind** all the other assets, we want it's **Z-Order** to be minimum. Z-Order can be changed in the **Properties** tab on the left.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190523194718.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190523194718.png?​nolink |}}
Line 160: Line 162:
 =====Step 7: Creating Events/ Making the Game Functional===== =====Step 7: Creating Events/ Making the Game Functional=====
  
-Events are what we use to create the rules of any games in GDevelop. This is what makes GDevelop special compared to traditional game engines. Events in GDevelop allow you to visually program your game without any prior programming knowledge or experience, so anyone ​with any background will be able to create the actual ​gameplay ​and allow players to interact with the game.  ​+Events are what we use to create the rules of any games in GDevelop. This is what makes GDevelop special compared to traditional game engines. Events in GDevelop allow you to visually program your game without any programming knowledge or experience, so people ​with any background will be able to create the actual ​game-play ​and allow players to interact with the game.  ​
  
  
Line 168: Line 170:
 That being said, let's make our first event. Move on to **NewScene(Events)** tab by clicking on the mentioned tab. Then click on the icon shown on the left to create an empty **Event**. ​ That being said, let's make our first event. Move on to **NewScene(Events)** tab by clicking on the mentioned tab. Then click on the icon shown on the left to create an empty **Event**. ​
  
-For our first event, we want our Player Sprite to Jump when the **Up** key is pressed. To do that, we will add a condition to "detect Up key press". Click on **Add condition** and search for "​Keyboard" ​conditions. Choose **Key pressed** condition and make it check the Up key as shown below.+For our first event, we want our Player Sprite to Jump when the **Up** ​arrow key is pressed. To do that, we need to add a condition to detect ​whether the Up key is pressed or not. Click on **Add condition** and search for the "​Keyboard" ​category. Choose **Key pressed** condition and make it check the Up key as shown below.
  
 {{ :​gdevelop5:​tutorials:​screenshot_s20190523235134.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_s20190523235134.png?​nolink |}}
  
-Click on **OK** to confirm and we will have our first Event condition. ​Now to "Add an action"​ that will take place if the condition is met. We want our character to jump when the created ​condition is met.+Click on **OK** to confirm and we will have our first Event condition. ​Next up, we need to "Add an action"​ that will take place if the condition is met. We want our character to jump when the specified ​condition is met.
 To add this action, search and click on **Platform Behaviour**->​**Control**->​**Simulate jump key press**. ​ To add this action, search and click on **Platform Behaviour**->​**Control**->​**Simulate jump key press**. ​
  
Line 178: 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.+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 |}}
  
 {{:​gdevelop5:​tutorials:​screenshot_20190524001313.png?​nolink |}} {{:​gdevelop5:​tutorials:​screenshot_20190524001313.png?​nolink |}}
-The Events tab will look something like this now. Also a habit of adding ​**Comments** is very good. To add a comment, click on the icon shown on the left. Comments are used to describe what is being checked and performed in that particular event for debugging later.+The Events tab will look something like this now.  
 + 
 +<WRAP round info 100%>​Adding ​**Comments** is good way to keep the event editor organized. To add a comment, click on the icon shown on the left. Comments are used to describe what is being checked and performed in that particular event for debugging later.</​WRAP>​ 
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190524001533.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190524001533.png?​nolink |}}
  
 {{:​gdevelop5:​tutorials:​screenshot_20190524003448.png?​nolink |}} {{:​gdevelop5:​tutorials:​screenshot_20190524003448.png?​nolink |}}
-It's time to see the working of the event we just created. Click on the "Play" ​button to **Preview** the Project. A preview window opens up, where we can test the various functions in our game. The preview window shows us exactly how the game looks and performs while in action. ​+It'​s ​now time to see how the created ​event actually works. Click on the ''​Play'' ​button to **Preview** the Project. A preview window opens up, where we can test the various functions in our game. The preview window shows us exactly how the game looks and performs while in action. ​
  
 {{:​gdevelop5:​tutorials:​bandicam20190524002201609.gif?​nolink |}} {{:​gdevelop5:​tutorials:​bandicam20190524002201609.gif?​nolink |}}
-Right now, we want to test the event that we just created, i.e, making our character Jump and also playing the jump animation while jumping. ​Since we assigned the **Up** key to perform the jumping action, use the Up arrow key to test the action. ​+Right now, we want to test the event that we just created, i.e, making our character Jump and also playing the jump animation while jumping. ​Use the Up arrow key to test the jumping ​action. ​
  
-We can see our character jumping and also the animation has now changed to the Jump animation ​provided.  +We can see our character jumping and also the animation has now changed to the Jump animation ​specified.  
-Note that the character stays in the Jump animation state even after coming back to the ground. We will handle this when we create other events.+Note that the character stays in the Jump animation state even after coming back to the ground. We will handle this problem ​when we create ​the other events.
  
 ---- ----
-=== Making the Obstacles Move ===+===== Making the Obstacles Move ===== 
 For the second event, we will now make the obstacles/​platforms move towards the left of the screen. To do this, we need to specify a force due to which the  obstacles move with a certain speed. First of all, click to add a new event just like you did for our first event. For the second event, we will now make the obstacles/​platforms move towards the left of the screen. To do this, we need to specify a force due to which the  obstacles move with a certain speed. First of all, click to add a new event just like you did for our first event.
 No need to specify any condition for now. Let's focus on the actions. No need to specify any condition for now. Let's focus on the actions.
Line 205: Line 211:
 {{:​gdevelop5:​tutorials:​bandicam201905gg24124850768.gif?​nolink |}} {{:​gdevelop5:​tutorials:​bandicam201905gg24124850768.gif?​nolink |}}
 For our first action, click to "Add an action"​. Then find **Common actions for all objects**->​**Movement**->​**Add a Force(Angle)**. Then choose **Platform** as the object and assign it an angle **180**(specifying left direction) and a speed **250**. For our first action, click to "Add an action"​. Then find **Common actions for all objects**->​**Movement**->​**Add a Force(Angle)**. Then choose **Platform** as the object and assign it an angle **180**(specifying left direction) and a speed **250**.
-You can test the action we just created by using the Play button to see a preview. You can see the obstacles moving towards the left. Notice that when the Player Sprite comes in contact with the Platform/​Obstacle,​ it also moves(slides) towards the left. We don't want our character to move when he **is on the floor** of the platform. Our next event fixes that.+You can test the action we just created by using the Play button to see a preview. You can see the obstacles moving towards the left. Notice that when the Player Sprite comes in contact with the Platform/​Obstacle,​ it also moves(slides) towards the left. We don't want our character to move when he **is on the floor** of the platform. Our next event handles ​that.
  
  
 ---- ----
  
-Now, as mentioned above we need to fix the Player Sprite sliding issue. To do that, we will make use of a new event. Click to add a new event, and "Add a condition",​ **Platform Behavior**->​**Options**->​**Is on floor**. Choose the object to be **Player** because this is what we are trying to check, i.e, whether the character "is on floor"​.+As mentioned abovewe need to fix the Player Sprite sliding issue. To do that, we will make use of a new event. Click to add a new event, and "Add a condition",​ **Platform Behavior**->​**Options**->​**Is on floor**. Choose the object to be **Player** because this is what we are trying to check, i.e, whether the character "is on floor"​.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190524130158.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190524130158.png?​nolink |}}
Line 216: 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 **Player** as the object and assign it an angle **0**(specifying right direction) and a speed **250**.</​WRAP>​
-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**.+
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190604124748.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190604124748.png?​nolink |}}
  
 {{:​gdevelop5:​tutorials:​bandicam201fg90524131437905.gif?​nolink |}} {{:​gdevelop5:​tutorials:​bandicam201fg90524131437905.gif?​nolink |}}
-Now you can try the preview of the events we made. You can see that now the sliding problem has been fixed and the basic game mechanics have been successfully created, that is the character can jump to avoid the obstacles and the obstacles move constantly towards the character. Note that at this point of time, the obstacles are limited and the character soon runs out of platforms to jump on. We are going to work on this problem in our next event.+Now you can try the preview of the events we made. You can see that now the sliding problem has been fixed and the basic game mechanics have been successfully created, that isthe character can jump to avoid the obstacles and the obstacles move constantly towards the character. Note that at this point of time, the obstacles are limited and the character soon runs out of platforms to jump on. We are going to work on this problem in our next event.
  
 ---- ----
  
-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''​.+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 232: Line 237:
 ---- ----
  
-===Making the Game Endless===+===== Making the Game Endless ===== 
 Create a new event. In this event, we are going to make the platforms **endless**. Create a new event. In this event, we are going to make the platforms **endless**.
 Before moving on, go back the scene space and analyze the X position of the **last** tile of the Platform/​Obstacle. Before moving on, go back the scene space and analyze the X position of the **last** tile of the Platform/​Obstacle.
Line 239: Line 245:
  
 As you can see, the X position of the last tile is __1550__ for me. Don't worry if it's different for you. Whatever be the value, we will use that value to make the platforms endless. As you can see, the X position of the last tile is __1550__ for me. Don't worry if it's different for you. Whatever be the value, we will use that value to make the platforms endless.
-Now Add a condition for this new event. Find **Common conditions for all object**->​**Position**->​**Compare X position of an object**. Choose the object "​Platform"​ with Modification sign **≤ (less or equal to)** and value let's say **-200**.+Now, ''​Add a condition'' ​for this new event. Find **Common conditions for all object**->​**Position**->​**Compare X position of an object**. Choose the object "​Platform"​ with Modification sign **≤ (less or equal to)** and value let's say **-200**.
  
 We are checking and **comparing** the X position of the **first** tile of the platform here. The condition is if the X position of the Platform is  ≤-200, then the corresponding action will be executed. Now you may be wondering why the value __ -200__? We are checking and **comparing** the X position of the **first** tile of the platform here. The condition is if the X position of the Platform is  ≤-200, then the corresponding action will be executed. Now you may be wondering why the value __ -200__?
Line 252: Line 258:
  
 --- ---
-===Game States===+===== Game States ​=====
  
-We will now add **states** to our game. States describe the status of our game. It can be considered as a flag, to detect when the character is in action or when the character has fallen off the platform. This is needed in order to decide a "Game Over" state and thus, restarting the game. We can record the state by simply creating a **scene variable**.+We will now add **states** to our game. States describe the status of our game. It can be considered as a flag, to detect when the character is in action or when the character has fallen off the platform. This is needed in order to decide a "Game Over" state and therefore, restarting the game. We can record the state by simply creating a **scene variable**.
 There will be 3 states for our game.  There will be 3 states for our game. 
  
-  * First state is where 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 273: 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. 
 + 
 +To convert an event into a sub-event, you 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.
  
-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 caseif the game is in the **start** state(event)only then will the sub-events check their respective ​conditions ​and perform the corresponding actions.+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 thustheir corresponding actions won't be executed even if the sub-event conditions ​result to ''​true''​.
  
-In simple 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''​.+<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 leftYou 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. 
  
-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**.+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 one for detecting the key press. 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 ;-)
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190524233235.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190524233235.png?​nolink |}}
  
-<WRAP tip 95%>+<​WRAP ​round tip 100%>
 Hint: For the first condition, we need to check the value of the scene variable state. Click on **Add a condition**→**Variables**→**Value of a scene variable**. Set it to check if the value is equal to **0**. ​ Hint: For the first condition, we need to check the value of the scene variable state. Click on **Add a condition**→**Variables**→**Value of a scene variable**. Set it to check if the value is equal to **0**. ​
-For the second condition, **Add a condition**->​**Keyboard**->​**Key pressed**, then set it to check for the **Up** key pressed.+For the second condition, **Add a condition**->​**Keyboard**->​**Key pressed**, then set it to check for the **Up** key.
 </​WRAP>​ </​WRAP>​
  
-Then we add the action to change the game state. We want to change the value of the scene variable to 1. Click **Add an action**->​**Variables**->​**Value of a scene variable**. Then name your variable something, **state** for example and set it to **1**.+Now, we add the action to change the game state. We want to change the value of the scene variable to 1. Click **Add an action**->​**Variables**->​**Value of a scene variable**. Then name your variable something, **state** for example and set it to **1**.
 It will look something like this. It will look something like this.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190524234531.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190524234531.png?​nolink |}}
  
-You can test how the game works. You will notice that the game does not start as soon as you click the Play button. You need to press the Up key to start the game. Go through what we did above if you did not understand what happened :-P+You can now test how the game works. You will notice that the game does not start as soon as you click the Play button. You need to press the Up key to start the game. Go through what we did above once more if you did not understand what happened :-P
  
-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 position ​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 307: Line 321:
 Try to do it by yourself by seeing the image above. Try to do it by yourself by seeing the image above.
  
-<​WRAP ​ tip 100%>+<​WRAP ​round  tip 100%>
 Hint: Find **Common conditions for all object**->​**Position**->​**Compare X position of an object**. Choose the object "​Player"​ with Modification sign **≤ (less or equal to)** and value let's say **-69**. Similarly for the next sub-condition,​ find **Common conditions for all object**->​**Position**->​**Compare Y position of an object**. Choose the object "​Player"​ with Modification sign **≥ (greater or equal to)** and value let's say **-550**. Hint: Find **Common conditions for all object**->​**Position**->​**Compare X position of an object**. Choose the object "​Player"​ with Modification sign **≤ (less or equal to)** and value let's say **-69**. Similarly for the next sub-condition,​ find **Common conditions for all object**->​**Position**->​**Compare Y position of an object**. Choose the object "​Player"​ with Modification sign **≥ (greater or equal to)** and value let's say **-550**.
 </​WRAP>​ </​WRAP>​
Line 316: Line 330:
  
 {{:​gdevelop5:​tutorials:​bandicam20190525005610196.gif?​nolink |}} {{:​gdevelop5:​tutorials:​bandicam20190525005610196.gif?​nolink |}}
-You can test the game and notice that if you fall down or get pushed out, the movement of the obstacles stops. ​Therefore, we have successfully reached **Game Over** state.+You can now test the game. You will notice that if you fall down or get pushed out, the movement of the obstacles stops. ​This shows that the game has successfully reached ​the **Game Over** state.
 In our next event, we will work on **restarting** the game, when the user presses a key. In our next event, we will work on **restarting** the game, when the user presses a key.
  
 --- ---
  
-===Restarting the Game===+===== Restarting the Game =====
  
 {{:​gdevelop5:​tutorials:​screenshot_20190526175455.png?​nolink |}} {{:​gdevelop5:​tutorials:​screenshot_20190526175455.png?​nolink |}}
-We want the game to restart once the user presses a button after reaching the **Game Over** state. To do this, let's create a new event. +We want the game to restart once the user presses a button after reaching the **Game Over** state. To achieve ​this, let's create a new event. 
-We want to check whether the state of the game is **2**. If it is, then we want the user to press the **Enter/​Return** key to restart the game. For this, we add two conditions, one for checking the value of the state variable and one for checking whether the Enter key is pressed. Try to add the conditions yourself or see the hint if you are stuck.+We want to check whether the state of the game is **2**. If it is, then we want the user to press the **Enter/​Return** key to restart the game. For this, we add two conditions, one for checking the value of the state variable and another ​for checking whether the Enter key is pressed. Try to add the conditions yourself or see the hint if you are stuck.
  
-<​WRAP ​ tip 100%>+<​WRAP ​round tip 100%>
 Hint: For the first condition, we need to check the value of the scene variable state. Click **Add a condition**→**Variables**→**Value of a scene variable**. Set it to check if the value is equal to **2**. ​ Hint: For the first condition, we need to check the value of the scene variable state. Click **Add a condition**→**Variables**→**Value of a scene variable**. Set it to check if the value is equal to **2**. ​
 For the second condition, **Add a condition**->​**Keyboard**->​**Key pressed**, then set it to check for the **Return** key pressed. For the second condition, **Add a condition**->​**Keyboard**->​**Key pressed**, then set it to check for the **Return** key pressed.
 </​WRAP>​ </​WRAP>​
  
-Next, we need to add an action to restart the game or **scene**. To do this, **Add an action**->​ **Scene**->​ **Change the scene**. Then specify the name of our scene within quotes. Select the **Stop any other paused scenes** option.+Next, we need to add an action to restart the game or **scene**. To do this, **Add an action**->​ **Scene**->​ **Change the scene**. Then specify the name of our scene within quotes. Select the **Stop any other paused scenes** option. This option is not necessary for our game since it only contains one scene, but it may be beneficial for increasing the performance for games having a large number of scenes.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190526174010.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190526174010.png?​nolink |}}
Line 344: Line 358:
 ===== Adding Score System ===== ===== Adding Score System =====
  
-A Score system is a necessary element in every game. Adding this to our game is very easy as we don't need to add any new events. We are going to edit some of our events to accommodate this system.+A Score system is a necessary element in every game. Adding this to our game is very easy as we don't need to add any new events. We are going to edit some of the events ​that we have already created ​to accommodate this system.
 We want the score to start from 0 every time the game starts. The score keeps updating until the Game Over state is reached. First, let's make an **object variable** to store this score value. We want the score to start from 0 every time the game starts. The score keeps updating until the Game Over state is reached. First, let's make an **object variable** to store this score value.
  
-<​WRAP ​ tip 100%>+<​WRAP ​round  tip 100%>
 You can also use other types of Variables like **Scene variables** and **Global variables** instead of object variables which we are using here. The way these variables differ is that they have different //scopes// for the game. You can learn more about Variables [[gdevelop5:​all-features:​variables|here]] You can also use other types of Variables like **Scene variables** and **Global variables** instead of object variables which we are using here. The way these variables differ is that they have different //scopes// for the game. You can learn more about Variables [[gdevelop5:​all-features:​variables|here]]
 </​WRAP>​ </​WRAP>​
Line 358: 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 374: Line 388:
 {{ :​gdevelop5:​tutorials:​screenshot_20190526205123.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190526205123.png?​nolink |}}
  
-Now we go back to the event we were editing. We need to add another action to update this text.+Let'​s ​go back to the event we were editing. We need to add another action to update this text.
  
-Once we are back to that particular event, click **Add an Action**->​**Text Object**->​**Modify the text**. Now look very carefully at the image shown below. Now, the text object has a value of String type but our score variable stores number values. We need to use a pre-made ​function here to convert that Integer to String and then update the text of the Text object.+Once we are back to that particular event, click **Add an Action**->​**Text Object**->​**Modify the text**. Now look very carefully at the image shown below. Now, the text object has a value of String type but our score variable stores number values. We need to use a library ​function here to convert that Integer to String and then update the text of the Text object.
  
 {{ :​gdevelop5:​tutorials:​screenshot_20190526205906.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_20190526205906.png?​nolink |}}
  
 {{:​gdevelop5:​tutorials:​bandicam20190526210601391.gif?​nolink |}} {{:​gdevelop5:​tutorials:​bandicam20190526210601391.gif?​nolink |}}
-We use the function ​//VariableString(variable)// to to do our job. You can learn more about library functions in their respective tutorials. You can now test the game. You can see the score updating while the player is in action. As soon as Game Over state is reached, the score stops updating.+We use the function ​''​VariableString(variable)'' ​to to do our job. You can learn more about library functions in their respective tutorials. You can now test the game. You can see the score updating while the player is in action. As soon as Game Over state is reached, the score stops updating.
  
 The event we modified will look something like this now. The event we modified will look something like this now.
Line 406: 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 413: 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 |}}