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:tank-shooter [2018/12/11 09:38]
4ian [Shoot bullets with the turret]
gdevelop5:tutorials:tank-shooter [2019/06/13 20:36]
piyushpalawat99 [Create the player turret]
Line 46: Line 46:
 ==== Create the player turret ==== ==== Create the player turret ====
  
-The player will be controlling a turret to shoot  the enemies.+The player will be controlling a turret to shoot the enemies.
 In the Scene "​Objects"​ editor choose "Add a new object"​. ​ In the Scene "​Objects"​ editor choose "Add a new object"​. ​
 {{ :​gdevelop5:​tutorials:​add_new_object.png?​nolink |}} {{ :​gdevelop5:​tutorials:​add_new_object.png?​nolink |}}
Line 61: Line 61:
 {{ :​gdevelop5:​objects:​animation-properties.png?​nolink |}} {{ :​gdevelop5:​objects:​animation-properties.png?​nolink |}}
  
-You need to add the turret image as an animation. ​ Click the big plus symbol {{:​gdevelop5:​tutorials:​plusaddobject.png?​24|}}. Browse to the project folder. Find the image aaguntopdown.png.+You need to add the turret image as an animation. ​ Click the big plus symbol {{:​gdevelop5:​tutorials:​plusaddobject.png?​|}}. Browse to the project folder. Find the image aaguntopdown.png.
 The image will be displayed in the window. The image will be displayed in the window.
 {{ :​gdevelop5:​tutorials:​turret-animation-window.png?​nolink |}} {{ :​gdevelop5:​tutorials:​turret-animation-window.png?​nolink |}}
Line 88: Line 88:
  
 The new "​Event"​ is created, with an empty condition and an empty action. The "​condition"​ is located on the left side of the screen. ​ The "​action"​ is located on the right side of the screen. Put your cursor over the "​action"​ on the right. Select/​click "add action":​ The new "​Event"​ is created, with an empty condition and an empty action. The "​condition"​ is located on the left side of the screen. ​ The "​action"​ is located on the right side of the screen. Put your cursor over the "​action"​ on the right. Select/​click "add action":​
-{{ :​gdevelop5:​tutorials:​add-action.png?​nolink&​400 ​|}} +{{ :​gdevelop5:​tutorials:​add-action.png?​nolink |}} 
  
-Now, you are going to write your first action. This action will turn the "​turret"​ toward the mouse. After click/​selecting the "Add Action",​ a new list panel will appear. Choose the action "​Common action for all objects"​. A drop down list of more options will appear. Select/​click "​Angle"​. Another drop down list will be shown. Select/​click "​Rotate toward the position"​.+Now, you are going to write your first action. This action will turn the "​turret"​ toward the mouse. After click/​selecting the "Add Action",​ a new list panel will appear. Choose the action "​Common action for all objects"​. A drop-down list of more options will appear. Select/​click "​Angle"​. Another drop-down list will be shown. Select/​click "​Rotate toward the position"​.
 {{ :​gdevelop5:​tutorials:​rotate-toward-position-action.png?​nolink |}} {{ :​gdevelop5:​tutorials:​rotate-toward-position-action.png?​nolink |}}
-When "​Rotate toward the position"​ is selected, another list of choices will open on the  right side of the selector panel. It displays the name of the action as well as the parameters for the action. Fill in the first parameter by select/clicking on "​Object"​. "​turret"​ will popup from a list of the available objects. Select "​turret"​ from the list.+When "​Rotate toward the position"​ is selected, another list of choices will open on the right side of the selector panel. It displays the name of the action as well as the parameters for the action. Fill in the first parameter by selecting/clicking on "​Object"​. "​turret"​ will pop up from a list of the available objects. Select "​turret"​ from the list.
 {{ :​gdevelop5:​tutorials:​select-turret-object-parameter.png?​nolink |}} {{ :​gdevelop5:​tutorials:​select-turret-object-parameter.png?​nolink |}}
 For the next parameters, enter `MouseX()` and `MouseY()` so that the object turns toward the mouse position. For the next parameters, enter `MouseX()` and `MouseY()` so that the object turns toward the mouse position.
Line 106: Line 106:
 {{ :​gdevelop5:​tutorials:​platform-game:​expression-icon.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​expression-icon.png?​nolink |}}
  
-When you click the "​expression"​ editor icon, you can search for all of the available expressions. The expressions are  sorted into categories.+When you click the "​expression"​ editor icon, you can search for all of the available expressions. The expressions are sorted into categories.
  
 {{ :​gdevelop5:​tutorials:​platform-game:​expression-editor.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​expression-editor.png?​nolink |}}
  
-To save the changes that you have made to the "​expression"​ editor , select/​click the "​OK"​ button that is located on the bottom right corner of the panel.+To save the changes that you have made to the "​expression"​ editor, select/​click the "​OK"​ button that is located on the bottom right corner of the panel.
  
 Now you can run a preview by pressing the "​preview"​ button on the toolbar located above the Scene. Now you can run a preview by pressing the "​preview"​ button on the toolbar located above the Scene.
Line 122: Line 122:
 you will need a new  "​bullet"​ object. ​ In the Scene "​Objects"​ list located on the right side of the GD interface, mouse click on the "​turret"​ object. Choose ​ "add a new object"​ or, alternatively,​ mouse click the "add new object"​ button. ​ you will need a new  "​bullet"​ object. ​ In the Scene "​Objects"​ list located on the right side of the GD interface, mouse click on the "​turret"​ object. Choose ​ "add a new object"​ or, alternatively,​ mouse click the "add new object"​ button. ​
 {{ :​gdevelop5:​tutorials:​turret-add-new-object.png?​nolink |}} {{ :​gdevelop5:​tutorials:​turret-add-new-object.png?​nolink |}}
-Choose "​Sprite"​ from the popup list panel. Now, add an animation by selecting the add button. Choose the "​Bullet.png"​ image. Rename the new object "​bullet"​. If you need additional help adding a new object, refer to the "​turret"​ object explanation above.+Choose "​Sprite"​ from the popup list panel. Now, add animation by selecting the add button. Choose the "​Bullet.png"​ image. Rename the new object "​bullet"​. If you need additional help adding a new object, refer to the "​turret"​ object explanation above.
  
 The next event needed will check to see if the left mouse button is clicked/​pressed. If it is pressed/​clicked,​ the action will create the bullets that will be fired. The next event needed will check to see if the left mouse button is clicked/​pressed. If it is pressed/​clicked,​ the action will create the bullets that will be fired.
 To create the bullets, go to the "​NEWSCENE (EVENTS)"​ tab. Add a new event. Again, if you need additional help, refer to the "​turret"​ event above. To create the bullets, go to the "​NEWSCENE (EVENTS)"​ tab. Add a new event. Again, if you need additional help, refer to the "​turret"​ event above.
-"​Create a new object"​ will be the first action in event. This action is available in+"​Create a new object"​ will be the first action in the event. This action is available in
 the "​Common actions for all objects"​ "​Objects"​ panel. the "​Common actions for all objects"​ "​Objects"​ panel.
 {{ :​gdevelop5:​tutorials:​create-object-action.png?​nolink |}} {{ :​gdevelop5:​tutorials:​create-object-action.png?​nolink |}}
  
-When “Create a new object” is selected, another list of choices will open on the right side of the selector panel. It displays the name of the action as well as the parameters for the action. Fill in the first parameter by select/clicking on “Object”.“bullet” will popup from a list of the available objects. Select “bullet” from the list.+When “Create a new object” is selected, another list of choices will open on the right side of the selector panel. It displays the name of the action as well as the parameters for the action. Fill in the first parameter by selecting/clicking on “Object”.“bullet” will pop up from a list of the available objects. Select “bullet” from the list.
  
 {{ :​gdevelop5:​tutorials:​create-object-action-parameters.png?​nolink |}} {{ :​gdevelop5:​tutorials:​create-object-action-parameters.png?​nolink |}}
Line 138: Line 138:
  
 Then add another action after this first action. Do //not// create another event. Click "Add action"​ below the first action! ​ Then add another action after this first action. Do //not// create another event. Click "Add action"​ below the first action! ​
 +
 {{ :​gdevelop5:​tutorials:​add-second-action.png?​nolink |}} {{ :​gdevelop5:​tutorials:​add-second-action.png?​nolink |}}
-This time, choose the action called "​Common action for all objects"​ "​Movement" ​"Add a force ( Angle )".+ 
 +This time, choose the action called "​Common action for all objects"​ "​Movement"​"Add a force ( Angle )". 
 {{ :​gdevelop5:​tutorials:​add-force-angle-action.png?​nolink |}} {{ :​gdevelop5:​tutorials:​add-force-angle-action.png?​nolink |}}
-GDevelop provides a built-in forces system. This system ​ allows you to easily move the game objects. In our case, when the bullet is fired, the  action will be used to move the bullet toward the mouse. ​+ 
 +GDevelop provides a built-in forces system. This system allows you to easily move the game objects. In our case, when the bullet is fired, the action will be used to move the bullet toward the mouse. ​
 As the first parameter(Object),​ enter "​bullet"​ so that GDevelop will move the bullet just created in the previous action. ​ As the first parameter(Object),​ enter "​bullet"​ so that GDevelop will move the bullet just created in the previous action. ​
  
-For the "Angle of movement",​ we'll put the same angle as the turrent. Enter "​turret.Angle()"​ in the 2nd parameter. For the 3rd parameter, enter "​400"​. The bullet will move with a speed of 400 pixels per seconds. Finally, click on the "​Permanent"​ option. This last parameter tells to the force to be constantly applied to the bullet. After the movement is started, this parameter keeps the bullet moving.+For the "Angle of movement",​ we'll put the same angle as the turret. Enter "​turret.Angle()"​ in the 2nd parameter. For the 3rd parameter, enter "​400"​. The bullet will move with a speed of 400 pixels per seconds. Finally, click on the "​Permanent"​ option. This last parameter tells to the force to be constantly applied to the bullet. After the movement is started, this parameter keeps the bullet moving.
  
-{{ :​gdevelop5:​tutorials:​add-force-angle-parameter-permanent.png?​nolink&​600 ​|}}+{{ :​gdevelop5:​tutorials:​add-force-angle-parameter-permanent.png?​nolink |}}
  
 Our two actions are launched when the player is firing. i.e: Pressing the left button of the mouse. Our two actions are launched when the player is firing. i.e: Pressing the left button of the mouse.
Line 163: Line 167:
   * The bullets appear at the object'​s origin. This makes the bullets seem unrealistic.   * The bullets appear at the object'​s origin. This makes the bullets seem unrealistic.
  
-To address the first issue of the bullets firing too fast, we are going to use a timer. ​ Add a second condition to the last event we've created. Choose the condition"​Common conditions for all objects"​ "​Timers" ​"Value of a timer"​. ​+To address the first issue of the bullets firing too fast, we are going to use a timer. ​ Add a second condition to the last event we've created. Choose the condition "Value of a scene timer" inside category "​Timers and Time"​. ​ 
 {{ :​gdevelop5:​tutorials:​timer-value-condition.png?​nolink |}} {{ :​gdevelop5:​tutorials:​timer-value-condition.png?​nolink |}}
-The panel appears on the right. The first parameter, "​Object",​ indicates the name of the object. Leave it blank. The second parameter,"​Timer'​s name", is the name of the timer. Enter “firerate .  //Do not forget the quotes around the timer'​s name!// Enter 0.25 in the third parameter, "Time in seconds"​. ​+ 
 +The panel appears on the right. The first parameter, "​Object",​ indicates the name of the object. Leave it blank. The second parameter, "​Timer'​s name", is the name of the timer. Enter “firerate.  //Do not forget the quotes around the timer'​s name!// Enter 0.25 in the third parameter, "Time in seconds"​. ​
 {{ :​gdevelop5:​tutorials:​timer-value-condition-parameters.png?​nolink |}} {{ :​gdevelop5:​tutorials:​timer-value-condition-parameters.png?​nolink |}}
  
-We aren't done yet! We want to shoot bullets every 0.25 seconds. To do that, we need to reset the timer to start from 0 after 0.25 seconds. So let's add an action: "​Timers and time" ​ "Reset a timer"​. This action will be placed just below our "​movement"​ action in the same event. ​+We aren't done yet! We want to shoot bullets every 0.25 seconds. To do that, we need to reset the timer to start from 0 after 0.25 seconds. So let's add an action: "​Timers and time" ​ "Start (or reset) ​scene timer"​. This action will be placed just below our "​movement"​ action in the same event. ​
 {{ :​gdevelop5:​tutorials:​reset-timer-action.png?​nolink |}} {{ :​gdevelop5:​tutorials:​reset-timer-action.png?​nolink |}}
 Enter “firerate” as the parameter which is the name of our timer ( again, be aware of the quotes! ). Enter “firerate” as the parameter which is the name of our timer ( again, be aware of the quotes! ).
Line 191: Line 197:
  
 Now, when we preview the game, we will see our custom point located at the end of our canon Now, when we preview the game, we will see our custom point located at the end of our canon
-{{ :​gdevelop5:​tutorials:​custom-point-preview.png?​nolink&​200 ​|}}+{{ :​gdevelop5:​tutorials:​custom-point-preview.png?​nolink |}}
 Close the window and apply the changes. Close the window and apply the changes.
  
-The only thing is left to do is to tell GDevelop to fire the bullets from the "​Canon"​ point of the "​turret"​ object. So in our "​create bullet"​ action, we need to change turret.X() and turret.Y() expressions,​ to turret.PointX(Canon) and turret.PointY(Canon). We can change them by clicking the expressions inside the editor. +The only thing is left to do is to tell GDevelop to fire the bullets from the "​Canon"​ point of the "​turret"​ object. So in our "​create bullet"​ action, we need to change turret.X() and turret.Y() expressions,​ to `turret.PointX("Canon")and `turret.PointY("Canon")`. We can change them by clicking the expressions inside the editor. 
-{{ :​gdevelop5:​tutorials:​replace-expression-in-editor.png?​nolink&​500 ​|}}+{{ :​gdevelop5:​tutorials:​replace-expression-in-editor.png?​nolink |}}
 //​Don'​t forget the capital C in Canon as the name of the points are case sensitive.//​ //​Don'​t forget the capital C in Canon as the name of the points are case sensitive.//​
  
-If we run the preview now, our bullets should be fired from the '​Canon"​ of the "​turret"​ but you may notice,at times, the bullet is a bit offset. This happens because the origin point of the bullet is at the top left corner. The same way we did with the Canon point for the turret, change the position of the Origin point of the bullet to be in the middle.+If we run the preview now, our bullets should be fired from the '​Canon"​ of the "​turret"​ but you may notice, at times, the bullet is a bit offset. This happens because the origin point of the bullet is at the top left corner. The same way we did with the Canon point for the turret, change the position of the Origin point of the bullet to be in the middle.
 {{ :​gdevelop5:​tutorials:​bullet_origin_point.png?​nolink |}} {{ :​gdevelop5:​tutorials:​bullet_origin_point.png?​nolink |}}
 ==== Creating enemies attacking the turret ==== ==== Creating enemies attacking the turret ====
Line 204: Line 210:
  
 Edit the object (right click in the list and select Edit object from the list) next add an animation to the object and two images: tank2fr1.png and tank2fr2.png. ​ Edit the object (right click in the list and select Edit object from the list) next add an animation to the object and two images: tank2fr1.png and tank2fr2.png. ​
 +
 {{ :​gdevelop5:​tutorials:​enemy-animation.png?​nolink |}} {{ :​gdevelop5:​tutorials:​enemy-animation.png?​nolink |}}
 +
 Then, change the time between the images to 0.05 and change the animation to Loop to make the animation repeat. Then, change the time between the images to 0.05 and change the animation to Loop to make the animation repeat.
 +
 {{ :​gdevelop5:​tutorials:​enemy-animation-speed.png?​nolink |}} {{ :​gdevelop5:​tutorials:​enemy-animation-speed.png?​nolink |}}
  
Line 216: Line 225:
  
 ==== Enemy AI ==== ==== Enemy AI ====
-Let's go back to the game. We want the enemies ​moving ​toward the turret. ​ Go to the "​Event"​ editorAdd a new event. ​Now, we want to create an enemy every second. Add a condition "​Timers and time";  ​"Value of a scene timer"​. Enter 1 in the "Time in seconds"​ and EnemyCreation” for the "​Timer'​s name"​. ​+Let's go back to the game. We want the enemies ​to move toward the turret. ​ 
 +Go to the "​Event"​ editor ​and Add a new event. ​We want to create an enemy every second. Add a condition, that can be found in category ​"​Timers and time", called ​"Value of a scene timer"​. Enter 1 as the "Time in seconds"​ and "EnemyCreation" ​for the "​Timer'​s name"​. ​
 //​Don'​t forget the quotes when you enter the name of the timer.// //​Don'​t forget the quotes when you enter the name of the timer.//
  
-The next step is to add an action to create an enemy object. ​This is done using the "Add an action"​"​Common action for all objects","​Objects"​"​Create an object"​. Select "​enemy"​ in the first "​Object to  create"​ parameter. For the second "X position"​ parameter, enter the expression Random(800). This entry will return a random number between 0 and 800. When each enemy is created, it will have a different screen position. For the Y position, enter -50. This value will create the enemies outside of the screen area. Creating the enemies off screen keeps the game's player from feeling that an enemy tank appeared from nowhere.+The next step is to add an action to create an enemy object. ​Click on "Add an action"​. Search for "​Common action for all objects",​ "​Objects" ​and choose ​"​Create an object"​. Select "​enemy"​ in the first "​Object to create"​ parameter. 
 + 
 +For the second "X position"​ parameter, enter the expression ​`Random(800)`. This expression ​will return a random number between 0 and 800.  When each enemy is created, it will have a different screen position. ​ 
 + 
 +For the Y position, enter -50. This value will create the enemies outside of the screen area. Creating the enemies off screen keeps the game's player from feeling that an enemy tank appeared from nowhere.
    
-Finally, let's add an action to reset the timer ( "​Timers and time",  ​Reset a timer". “EnemyCreation” ​should be entered in the parameter. Again, don't forget the quotes when you enter the name of the timer.+Finally, let's add an action to reset the timer ( "​Timers and time",  ​"Start (or reset) ​scene timer"​). Enter “EnemyCreation” ​as the name of the timer. Again, don't forget the quotes when you enter the name of the timer. 
 At this point, our event will look like this: At this point, our event will look like this:
 {{ :​gdevelop5:​tutorials:​create-enemy-event.png?​nolink |}} {{ :​gdevelop5:​tutorials:​create-enemy-event.png?​nolink |}}
  
 If we run a preview now, we won't notice anything. Since the enemies are created off the screen, they can't be seen. If we run a preview now, we won't notice anything. Since the enemies are created off the screen, they can't be seen.
-In order to see the enemy, we need to move the enemies toward the player. To create ​this action add another event. This event has no condition. Choose "Add action"​. ​Then from the popup panel, select ​"​Common action for all objects",​ "​Movement"​"Add a force to move toward an object"​.+In order to see the enemy, we need to move the enemies toward the player. ​ 
 + 
 +To do this, add another event. This event has no condition. Choose "Add action"​. ​Select ​"​Common action for all objects",​ "​Movement" ​and choose ​"Add a force to move toward an object"​.
 {{ :​gdevelop5:​tutorials:​move-object-toward-other-event.png?​nolink |}} {{ :​gdevelop5:​tutorials:​move-object-toward-other-event.png?​nolink |}}
-On the right side panel of the "Add a force to move toward an object",​ select "​enemy"​ for the  first parameter. Select "​turret"​ for the second parameter. Enter 150 pixels per second for speed. Since the force will be continuous damping is 0+ 
-{{ :​gdevelop5:​tutorials:​move-object-toward-another-parameters.png?nolink |}} +On the right side panel of the "Add a force to move toward an object",​ select "​enemy"​ for the  first parameter. Select "​turret"​ for the second parameter. Enter 150 pixels per second for speed. Since the force will be applied at every single frame of the game (as there are no conditions),​ choose "​Instant"​ for this force. 
 + 
 +{{ :​gdevelop5:​tutorials:​enemy-turret-move-object-toward-another-instant.png?nolink |}}
  
 Now, if we run a preview, we will see that our enemies moving toward the turret. However, you might notice that the enemies don't actually rotate toward the turret. Let's do something about that. Now, if we run a preview, we will see that our enemies moving toward the turret. However, you might notice that the enemies don't actually rotate toward the turret. Let's do something about that.
-Let's add a second action after the movement: "​Common action for all objects",​ "​Angle",​ "​Rotate toward position"​. For the first parameter on the right of the panel, select "​enemy"​. We want to rotate the enemy. For the X and Y position, we are going to use an expression to get the Centre point of the turret and make the enemies rotate toward that point with an angular speed of 0. An angular speed of 0  causes immediate object rotation.+ 
 +Add a second action after the movement: "​Common action for all objects",​ "​Angle",​ "​Rotate toward position"​. For the first parameter on the right of the panel, select "​enemy"​. We want to rotate the enemy. For the X and Y position, we are going to use an expression to get the Centre point of the turret and make the enemies rotate toward that point with an angular speed of 0. An angular speed of 0  causes immediate object rotation. 
 {{ :​gdevelop5:​tutorials:​rotate-object-toward-position.png?​nolink |}} {{ :​gdevelop5:​tutorials:​rotate-object-toward-position.png?​nolink |}}
 +
 At this point, our enemy event will look like this: At this point, our enemy event will look like this:
 +
 {{ :​gdevelop5:​tutorials:​create-rotate-move-enemies-event.png?​nolink |}} {{ :​gdevelop5:​tutorials:​create-rotate-move-enemies-event.png?​nolink |}}
  
 If we run the preview now, our enemies will move and rotate toward the turret. If we run the preview now, our enemies will move and rotate toward the turret.
 +
 {{ :​gdevelop5:​tutorials:​turret-screenshot-enemies-moving.png?​nolink |}} {{ :​gdevelop5:​tutorials:​turret-screenshot-enemies-moving.png?​nolink |}}
 +
 ==== Adding explosions ==== ==== Adding explosions ====
 +
 It time to destroy the tanks! First, when a bullet collides with a tank, we need an explosion at the position of the tank.  It time to destroy the tanks! First, when a bullet collides with a tank, we need an explosion at the position of the tank. 
 Add a new sprite object, name it "​explosion",​ and add all the images to the animation beginning with Explosion_ Add a new sprite object, name it "​explosion",​ and add all the images to the animation beginning with Explosion_
Line 282: Line 308:
 {{ :​gdevelop5:​tutorials:​change-origin-point-position.png?​nolink |}} {{ :​gdevelop5:​tutorials:​change-origin-point-position.png?​nolink |}}
  
-Finally, instead of creating the "​explosion"​ object at the "​Origin"​ point of the "​enemy",​ it is necessary to create the object at the Centre Point. Change the expression in the create explosion action from enemy.X() to enemy.PointX(Centre) and form enemy.Y() to enemy.PointY(Centre)+Finally, instead of creating the "​explosion"​ object at the "​Origin"​ point of the "​enemy",​ it is necessary to create the object at the Centre Point. Change the expression in the create explosion action from `enemy.X()to `enemy.PointX("Centre")and from `enemy.Y()to `enemy.PointY("Centre")`
 {{ :​gdevelop5:​tutorials:​create-explosion-new-expression.png?​nolink |}} {{ :​gdevelop5:​tutorials:​create-explosion-new-expression.png?​nolink |}}
  
Line 288: Line 314:
 {{ :​gdevelop5:​tutorials:​turret-screenshot-enemies-are-exploding.png?​nolink |}} {{ :​gdevelop5:​tutorials:​turret-screenshot-enemies-are-exploding.png?​nolink |}}
 ==== Adding more explosions and a Game Over ==== ==== Adding more explosions and a Game Over ====
-Until now, the player could not die. When an enemy tank is hitting the player'​s turret, we want the turret to be destroyed .+Until now, the player could not die. When an enemy tank is hitting the player'​s turret, we want the turret to be destroyed.
 Add a new event. Follow the same procedure that you followed to create an event to destroy the enemies. ​ Add a new event. Follow the same procedure that you followed to create an event to destroy the enemies. ​
   * Add a condition to test for a collision between a tank and the turret. ​   * Add a condition to test for a collision between a tank and the turret. ​
Line 302: Line 328:
 Now, change the text to "Game Over", ​ the text color to red, and the text size to 40.  Now, change the text to "Game Over", ​ the text color to red, and the text size to 40. 
 {{ :​gdevelop5:​tutorials:​edit-text-object.png?​nolink |}} {{ :​gdevelop5:​tutorials:​edit-text-object.png?​nolink |}}
-We can also set a custom font by simply entering the path of the font. In this case our font is located in the project folder. We only need to enter the name of the font file:+We can also set a custom font by simply entering the path of the font. In this caseour font is located in the project folder. We only need to enter the name of the font file:
 {{ :​gdevelop5:​tutorials:​custom-text-font.png?​nolink |}} {{ :​gdevelop5:​tutorials:​custom-text-font.png?​nolink |}}
  
 Finally, add the "Game Over" text object to the scene. Finally, add the "Game Over" text object to the scene.
  
-The next step is to hide the text object. Then,if there is no turret in the scene, (meaning the turret is destroyed) we will display it.+The next step is to hide the text object. Then, if there is no turret in the scene, (meaning the turret is destroyed) we will display it.
 Add a new blank event and add the condition "​Scene",​ "At the beginning of the scene"​. Add a new blank event and add the condition "​Scene",​ "At the beginning of the scene"​.
 {{ :​gdevelop5:​tutorials:​at-the-beginning-of-the-scene-condition.png?​nolink |}} {{ :​gdevelop5:​tutorials:​at-the-beginning-of-the-scene-condition.png?​nolink |}}
Line 357: Line 383:
 If you run the preview now, probably you won't notice any difference as the game is very simple and you most likely using a device with at least 2GB of RAM and a dual-core CPU. So there is plenty of resources for our simple game but in case we would create hundreds and thousands of bullets that you are free to try you may notice a little slow down after a while without destroying them. If you run the preview now, probably you won't notice any difference as the game is very simple and you most likely using a device with at least 2GB of RAM and a dual-core CPU. So there is plenty of resources for our simple game but in case we would create hundreds and thousands of bullets that you are free to try you may notice a little slow down after a while without destroying them.
 ==== Add a background ==== ==== Add a background ====
- One last thing is to add a background. ​ This will give the game a more finished look .+ One last thing is to add a background. ​ This will give the game a more finished look.
  
-Add a new Sprite object. Name it background. Add the "​background.jpg"​ image to the object. Next, you can add the object to the scene as usual. Make sure it fills the entire scene. To make it easier, you can enable the grid using the button on the top and it should help with positioning the object.+Add a new Sprite object. Name it "background". Add the "​background.jpg"​ image to the object. Next, you can add the object to the scene as usual. Make sure it fills the entire scene. To make it easier, you can enable the grid using the button on the top and it should help with positioning the object.
 {{ :​gdevelop5:​toggle-grid-button.png?​nolink |}} {{ :​gdevelop5:​toggle-grid-button.png?​nolink |}}
 Notice that the background object covers all of the other objects. To solve this problem, we need to change the Z-order of the object. While the background object is selected, on the left of the Scene Editor screen, you will see a "​Properties"​ list. If you don't see the "​Properties"​ list, you can open it using the "​Properties"​ button on the toolbar that is located at the top of the GD interface. Notice that the background object covers all of the other objects. To solve this problem, we need to change the Z-order of the object. While the background object is selected, on the left of the Scene Editor screen, you will see a "​Properties"​ list. If you don't see the "​Properties"​ list, you can open it using the "​Properties"​ button on the toolbar that is located at the top of the GD interface.
Line 365: Line 391:
 We can change all kinds of properties using the Property Editor. ​ The position, angle, and size of the object can be changed. In this case, we want to change the Z-order. ​ We can change all kinds of properties using the Property Editor. ​ The position, angle, and size of the object can be changed. In this case, we want to change the Z-order. ​
 {{ :​gdevelop5:​objects:​object-zorder-properties.png?​nolink |}} {{ :​gdevelop5:​objects:​object-zorder-properties.png?​nolink |}}
-Change the value of the Z-order to a low number. For the background we will use a negative number ​ - 1.+Change the value of the Z-order to a low number. For the backgroundwe will use a negative number ​ - 1.
 The reason for the negative value is that when we are creating the bullets, enemies, and explosions we are creating them at Z-order 0 by default. We need to position the background below 0 otherwise we won't see anything but the turret in our game. Another way to fix it is to tell GDevelop to position the tanks and explosions and bullets on a higher Z-order. We can position the background at 0 but it is something that you the developer need to decide for your self. Every problem can have a number of different solutions. The reason for the negative value is that when we are creating the bullets, enemies, and explosions we are creating them at Z-order 0 by default. We need to position the background below 0 otherwise we won't see anything but the turret in our game. Another way to fix it is to tell GDevelop to position the tanks and explosions and bullets on a higher Z-order. We can position the background at 0 but it is something that you the developer need to decide for your self. Every problem can have a number of different solutions.