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:5-add-coins-and-number-of-collected-coins [2018/04/04 12:01]
4ian
gdevelop5:tutorials:platform-game:5-add-coins-and-number-of-collected-coins [2018/09/13 23:39] (current)
4ian [Bonus: fixing the score bug]
Line 3: Line 3:
 <​note>​This tutorial is part of the [[gdevelop5:​tutorials:​platform-game:​start|]] tutorial, but you can also re-use it for any other game where you can collect items!</​note>​ <​note>​This tutorial is part of the [[gdevelop5:​tutorials:​platform-game:​start|]] tutorial, but you can also re-use it for any other game where you can collect items!</​note>​
  
-In the platformer ​game we've created so far, the player has nothing much to do: let's add coins for the player to collect.+In the platformer we've created so far, the player has nothing much to do: let's add coins for the player to collect.
  
 ## Add coins ## Add coins
Line 12: Line 12:
  
 You can name this object "​Coin"​. You can name this object "​Coin"​.
 +
 You can then put several coins in the level. As you'll need several coins, it's a good idea to use the "drag and clone" feature of the scene editor: select a coin, keep pressing Ctrl (or Cmd on macOS), and drag the coin. This will duplicate it. You can then put several coins in the level. As you'll need several coins, it's a good idea to use the "drag and clone" feature of the scene editor: select a coin, keep pressing Ctrl (or Cmd on macOS), and drag the coin. This will duplicate it.
  
Line 20: Line 21:
 ## Delete coins when collected ## Delete coins when collected
  
-Now, let's destroy the coin object when the player ​touch them. Add a new event and add a condition. Choose the condition to test for a collision between two objects. The first object should be Player and the second object should be Coin:+Now, let's destroy the coin object when the player ​touches ​them. Add a new event and add a condition. Choose the condition to test for a collision between two objects. The first object should be "Player" ​and the second object should be "Coin":
  
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-28_at_23.36.12.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-28_at_23.36.12.png?​nolink |}}
Line 26: Line 27:
 You can then add an action that will delete the coin. Only Coin objects that are picked by the first condition will be used by the action, so only the coin that was colliding with the player will be deleted. You can then add an action that will delete the coin. Only Coin objects that are picked by the first condition will be used by the action, so only the coin that was colliding with the player will be deleted.
  
-Add an action "​Delete an object"​ (from category `Common actions for all objects > Objects`) and enter Coin as the object to be deleted:+Add the action "​Delete an object"​ (from category `Common actions for all objects > Objects`) and enter Coin as the object to be deleted:
  
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-28_at_23.41.46.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-28_at_23.41.46.png?​nolink |}}
Line 33: Line 34:
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-28_at_23.42.34.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-28_at_23.42.34.png?​nolink |}}
  
-You can now launch a preview and see that coin are deleted when the player run on them!+You can now launch a preview and see that coin is deleted when the player run on them!
  
 ## Play a sound when collecting a coin ## Play a sound when collecting a coin
  
-To make the game feel more dynamic and rewarding, let's play a sound when a coin is collected.  +To make the game feel more dynamic and rewarding, let's play a sound when a coin is collected.
-It's easy: we already have a sound file called `sound.wav` in our game folder (if that's not the case, you can [[http://​www.compilgames.net/​dl/​PlatformerTutorialResources.zip|download resources here]] and extract them in your game folder).+
  
-It is something we haven'​t done beforewe can add multiple actions to execute to a single event. To play a sound, let's add another action to the event that we used to delete the coins. ​Just click 'add an action'​ right below the 'Delete object Coin' ​action and add the action called `Play a sound`, from the `Audio` category ​so we are not only deleting ​the coin but also playing the sound. There are a bunch of parameters available for playing a sound. ​Enter the name of the sound file for the first parameter: `coin.wav`. Leave the other parameters as they are (i.e: don't repeat the sound, volume at `100`, and the default speed for the sound).+It's easy: we already have a sound file called `coin.wav` in our game folder (if that's not the case, you can [[http://​www.compilgames.net/​dl/​PlatformerTutorialResources.zip|download the resources here]] and extract them in your game folder). 
 + 
 +It is something we haven'​t done beforewe can add multiple actions to execute to a single event. To play a sound, let's add another action to the event that we used to delete the coins. ​Click 'add an action'​ right below the "Delete object Coin" ​action and add the action called `Play a sound`, from the `Audio` category. This way, we won'​t ​only delete ​the coin but also be playing the sound. 
 + 
 +There are a bunch of parameters available for playing a sound. ​The first and most important is the sound file to be played. Click on the field and then on "​Choose a new audio file"​. 
 + 
 +{{ :gdevelop5:​tutorials:​platform-game:​choose-new-audio-file_2x.png?​nolink |}} 
 + 
 +Choose the file `coin.wav` ​that you downloaded with the rest of the assets and that you put in the game folder: 
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​choose-coin-wav_2x.png?nolink |}} 
 + 
 +Leave the other parameters as they are (i.e: don't repeat the sound, volume at `100`, and the default speed for the sound).
  
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.50.22.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.50.22.png?​nolink |}}
Line 49: Line 61:
  
 We're going to use a variable to update and remember the score of the player. We're going to use a variable to update and remember the score of the player.
-Variable are containers that we can use to store and remember certain information such as numbers and strings. In GDevelop there are different type of variables: 
  
-  ​* __**Object variables**__ are private to each instance of an object ​meaning ​each instance can store it very own values without being shared ​among other instances. It is useful ​for example ​when we want to effect ​the life of each enemy for example.  +Variables are containers that we can use to store and remember certain information such as numbers and strings (text). In GDevelop there are different types of variables:​ 
-  * __**Scene variables**__ (the most used ones) are private ​to each scene. This means that their value is not shared ​among other scenes in our game. It is useful to store information only relevant to the currently played scene. For example, the life of the player or a score. + 
-  * __**Global variables**__,​ as the name suggests, are global in the whole game. Values are shared ​among all scenes in the entire game. It is useful if we would like to store information that we want to share between all scenes such as the the amount of bullet or amount of money the player has.+  ​* __**Object variables**__ are private ​variables, specific ​to each instance of an object. This means that each instance can store its very own valueswithout ​them being shared ​with the other instances. It can, for example, be useful if we want to change ​the life of each enemy.  
 +  * __**Scene variables**__ (the most used ones) are variables attached ​to scene. This means that their values are not shared ​with other scenes in our game. It is useful to store information only relevant to the currently played scene. For example, the life of the player or a score. 
 +  * __**Global variables**__,​ as the name suggests, are global in the whole game. Values are shared ​with all scenes in the entire game. It is useful if we would like to store information that we want to share between all scenes such as the amount of bullet or amount of money the player has.
  
 The variable we're going to use is a Scene variable and will be called "​Score"​. The variable we're going to use is a Scene variable and will be called "​Score"​.
Line 61: Line 74:
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.52.43.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.52.43.png?​nolink |}}
  
-In GDevelop we don't need to declare variables before using them, we can use any variable without declaring it by just naming it in an action or a condition. In case we are using an action on a variable that is not declared, GDevelop will create it automatically for us with the default value of '​0'​ or an empty string ""​ and after execute ​the action on the variable to save us from any trouble. ​+In GDevelop we don't need to declare variables before using them, we can use any variable without declaring it by just naming it in an action or a condition. In case we are using an action on a variable that is not declared, GDevelop will create it automatically for uswith the default value of '​0' ​(or an empty text) after executing ​the action on the variable to save us from any trouble. ​
  
-But, to better ​organise our game, it'​s ​always ​a good practice to declare variables before using them. This way it's easier to remember ​what variables ​we are using and we can also change their default value if we want it to be something other than 0.  +But, to have a better ​organization of your game, it's a good practice to declare variables before using them. This wayit's easier to find what variables ​you are using in your game. You can also change their default value if you want it to be something other than 0.  
-To declare a variable, ​just click on the button "​`...`"​ on the right of the variable name to show the list of variables:+To declare a variable, click on the button "​`...`"​ on the right of the variable name. This displays ​the list of variables:
  
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.54.46.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.54.46.png?​nolink |}}
  
-The list is shown and is empty as no variable was declared yet: +The list is shown and is emptyas no variable was declared yet: 
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.55.27.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.55.27.png?​nolink |}}
  
Line 81: Line 94:
 ### Add text object ### Add text object
  
-For now, the variable Score can't be seen so we can't verify that the score is increased.+For now, the variable Score can't be seen so we can't verify that the score is increased ​(we could, using the [[gdevelop5:​interface:​debugger|Debugger]],​ but the player can't see it).
  
-We need to use a Text object to display the value of the Score variable. Let's add a new object. This time choose `Text` when asked for which type of object to create:+We need to use a Text object to display the value of the Score variable. Let's add a new object. This time choose `Text` when asked about which type of object to create:
  
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.58.27.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_17.58.27.png?​nolink |}}
  
-Change then the object properties so that the text is black and bigger than the default ​font size:+Change then the object properties so that the text is black and bigger than the default size:
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.09.28.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.09.28.png?​nolink |}}
  
Line 93: Line 106:
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.20.23.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.20.23.png?​nolink |}}
  
-### Changing text layer+### Changing ​the text layer
  
-If you launch the game, you can see that the Score text is displayed with the rest of the objects and it position is not fixed on the screen. ​ +If you launch the game, you can see that the Score text is displayed with the rest of the objects and its position is not fixed on the screen.
 We can easily solve this problem by using a layer on top of the base layer. Open the layer editor using this button: ​ We can easily solve this problem by using a layer on top of the base layer. Open the layer editor using this button: ​
  
Line 106: Line 119:
 Click on the `+` button to add a layer. Enter "​UI"​ for its name (UI stand for User Interface). Click on the `+` button to add a layer. Enter "​UI"​ for its name (UI stand for User Interface).
  
-Finally, move the text object to this new layer by selecting the text object ​and in the properties on the left, select the UI layer:+Finally, move the text object to this new layer by selecting the text instance on the scene and in the properties on the left, select the UI layer:
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.40.44.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.40.44.png?​nolink |}}
  
-Make sure that the object is displayed somewhere visible on the screen, for example put it on the top-left. The black rectangle on the scene editor represents the size of the window:+Make sure that the object is displayed somewhere visible on the screen, for exampleput it on the top-left. The black rectangle on the scene editor represents the size of the window:
  
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.42.46.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.42.46.png?​nolink |}}
Line 115: Line 128:
 ### Display the score value ### Display the score value
  
-Now that we have a text on our screen, it time to make it display the value of the Score variable. +Now that we have a text on our screen, it is time to make it display the value of the Score variable. 
-Let add a new event. This event won't have any condition meaning the action is going to be executed every single frameabout 60 times a second.+Add a new event. This event won't have any conditionmeaning the action is going to be executed every single ​time a frame of the game is rendered on screen (about 60 times a second).
  
 Add an action and choose the one in `Text Object` category called `Modify the text`. Add an action and choose the one in `Text Object` category called `Modify the text`.
Line 122: Line 135:
 For the first parameter, choose the `Score` object, as it is this object that we want to update. For the first parameter, choose the `Score` object, as it is this object that we want to update.
 For the second parameter, choose `= (set to)` operator (we want to set the text to a new value). For the second parameter, choose `= (set to)` operator (we want to set the text to a new value).
-Finally, the last parameter represents the new content of the text. It's a string expression that will be evalutated ​during the game by GDevelop when the action is run.+Finally, the last parameter represents the new content of the text. It's a string expression that will be evaluated ​during the game by GDevelop when the action is run.
  
-We can specify a text by writing it between quotes (like this: `"​Hello World"​`). But we can also use something called expressions ​which is a function that is return ​a certain value which we can use in some way or form. In this case, we need the value of the Score variable and we want to use that value to update the text object. +We can specify a text by writing it between quotes (like this: `"​Hello World"​`). But we can also use something called expressions. An expression ​is a function that is returning ​a certain value. In this case, we need the value of the Score variable and we want to use that value to update the content of the Text object. 
-Expressions ​is somewhat ​advanced topic so I don'​t ​think it would be the right time to get deep in to it.+Expressions ​are a more advanced topic so we won'​t ​go deep into it for now.
  
-What you need to know for now is thatin order to get the value of a scene variable we need to use the expression Variable(variable_name). And because ​it is a number variable but we need the value as text, we need to convert the value returned from this expression to a string ​and we can do that by using an other expressions ​called ToString(value_to_convert+What you need to know for now is that in order to get the value of a scene variablewe need to use the expression ​`Variable(variableName)`. And as it is a number variable but we need the value as text, we need to convert the value returned from this expression to a string. We can do that by using another expression ​called ​`ToString(valueToConvert)`. 
-So the actual expression ​need to look like this ToString(Variable(Score))+So the actual expression ​needs to look like this `ToString(Variable(Score))`.
  
-Finally, we can add this expression after a static text using the `+` operator: `"​Score : " + ToString(Variable(Score))`.+Finally, we can add this expression after a static text using the `+` operator: `"​Score : " + ToString(Variable(Score))` ​(note the double quotes surrounding the text).
  
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.58.12.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.58.12.png?​nolink |}}
  
-Lots of other functionsexpressions are available in GDevelop. When combined, you create powerful actions that do advanced work. You can find more expressions in the expression editor by clicking on the blue icon next to the value fields:+Lots of other functions ​and expressions are available in GDevelop. When combined, you create powerful actions that do advanced work. You can find more expressions in the expression editor by clicking on the blue icon next to the value fields:
  
 {{ :​gdevelop5:​tutorials:​platform-game:​expression-icon.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​expression-icon.png?​nolink |}}
Line 141: Line 154:
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.59.31.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.59.31.png?​nolink |}}
  
-You can preview the game and see that the score is shown and updated when you collect a coin!+You can preview the gamesee that the score is shown and updated when you collect a coin!
  
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_19.00.24.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_19.00.24.png?​nolink |}}
  
-## Next step : add enemies+## Bonus: making sure that collecting two coins at the same time works 
 + 
 +You might have noticed that if you collect two coins at the exact same time (for example, if two coins overlap), the score is only increased once. For example, if each coin is worth 100 points and you collect 2 coins, the score will only go up to 100 instead of 200. The fix for this is easy and is something we haven'​t looked at yet: we're going to use an event called For Each Object. What we will do is tell the engine that for every single coin that was collected, add 100 to the score. 
 + 
 +To start, click the + button in the toolbar of the Events Editor: 
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​gdevelop_5_2018-05-30_11-30-39.png?​200 |}} 
 + 
 +Select "for each object":​ 
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​2018-05-30_11-33-09.png?​400 |}} 
 + 
 +This will add an event at the bottom of the event page. Drag it up and make it a sub-event of the player collision with the coin:  
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​click-to-choose-4.png?​600 |}} 
 + 
 +Click to choose an object, and choose the Coin object. 
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​click-to-choose2.png?​600 |}} 
 + 
 +Now that you've added the object to the sub-event, let's move the actions down to the sub-event (so that the actions will be repeated for each coin that is picked by conditions).  
 + 
 +Hover over the first action, right-click and cut it, then hover over the action in the sub-event, right-click,​ and paste. Do this for the other two actions. You can also drag'​n'​drop actions, which is faster than cut-pasting them. 
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​move-to-sub1.png?​600 |}} 
 + 
 +This is what the final event should look like:  
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​move-to-sub2.png?​600 |}} 
 + 
 +Now run the game, and you will see that if you gather two coins at the same time, the score will be updated properly if you run on two coins at the exact same time. 
 + 
 +## Next step: add enemies
  
 Every platform game comes with enemies that you have to avoid or kill by jumping on them! Let's add some and see how we can make them move. Every platform game comes with enemies that you have to avoid or kill by jumping on them! Let's add some and see how we can make them move.