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 [2017/09/30 18:10]
4ian [Display and increase a score using variables]
gdevelop5:tutorials:platform-game:5-add-coins-and-number-of-collected-coins [2018/09/13 23:39]
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"​ (in 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).+
  
-Add an action after the action that deletes ​the coinChoose ​action `Play a sound`, ​in `Audio` category. There are a bunch of parameters available. ​Enter the name of the sound file for the first parameter: `coin.wav`. ​Let 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 before: we 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 coinsClick '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 soundThe 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 48: Line 60:
 ## Increase a score using variables ## Increase a score using variables
  
-We're going to use a variable to update and remember the score of the player. Variable are useful to remember all kind of information. There are scene variables (the most used ones), global variables (variables that are shared between all scenes of the game) and objects variables (which are specific to each instance of an object. There are also very useful and we'll use one for creating an enemy later).+We're going to use a variable to update and remember the score of the player.
  
-The variable ​we're going to use will be called "​Score"​.+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:
  
-Add an action in the latest event we've made. Choose action `Variables > Value of a variable`. This action will be used to add 100 to the Score variable, so fill the parameter as shown here:+  * __**Object variables**__ are private variables, specific to each instance of an object. This means that each instance can store its very own values, without 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 a 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"​. 
 + 
 +Let's add an action in the latest event we've made. Choose action `Variables > Value of a variable`. This action will be used to add 100 to the Score variable, so fill the parameter as shown here:
  
 {{ :​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 |}}
  
-As you can see, we can use any variable without declaring it by just naming it in an action or a condition. GDevelop will create it in memory ​with default value of `0`+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 text) after executing the action on the variable to save us from any trouble
  
-To better ​organise ​your game, it's a good idea to declare ​your variablesit's easier to see what variables you are using and you can change their default value. If you want to do thisjust click on the button "​`...`"​ on the right of the variable name to show the list of declared ​variables:+But, to have a better ​organization of your game, it's a good practice ​to declare variables ​before using them. This way, it'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, 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 73: Line 92:
 ## Display a score using a text object ## Display a score using a text object
  
-For now, the variable Score can't be seen so we can't verify that the score is increased.+### Add text object
  
-We're going to display ​the score using a Text object. On the scene editor, ​add an object, and choose `Text` when asked for which kind of object to create:+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 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 |}}
  
-You can then put the object on the scene:+You can then place the object on the scene: 
 +{{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.20.23.png?​nolink |}} 
 + 
 +### 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 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:  
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.34.33.png?​nolink |}} 
 + 
 +The list of layers is shown, with only the base layer for now: 
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.35.00.png?​nolink |}} 
 + 
 +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 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 |}} 
 + 
 +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: 
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.42.46.png?​nolink |}} 
 + 
 +### Display the score value 
 + 
 +Now that we have a text on our screen, it is time to make it display the value of the Score variable. 
 +Add a new event. This event won't have any condition, meaning 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`. 
 + 
 +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). 
 +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. 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 are a more advanced topic so we won't go deep into it for now. 
 + 
 +What you need to know for now is that in order to get the value of a scene variable, we need to use the expression `Variable(variableName)`. And as it is a number variable but we need the value as a 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 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))` (note the double quotes surrounding the text). 
 + 
 +{{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.58.12.png?​nolink |}} 
 + 
 +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 |}} 
 + 
 +Here is the final event:  
 +{{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-30_at_18.59.31.png?​nolink |}} 
 + 
 +You can preview the game, see 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 |}} 
 + 
 +## 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. 
 + 
 +➡️ Read **[[gdevelop5:​tutorials:​platform-game:​6-add-enemies]]**!