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:tank-shooter [2019/05/24 13:56]
nilarjun Fixed several images not loading properly
gdevelop5:tutorials:tank-shooter [2019/06/14 07:57]
sahibkaur [Tank shooter - Beginner tutorial]
Line 1: Line 1:
 # Tank shooter - Beginner tutorial # Tank shooter - Beginner tutorial
  
-This tutorial will help you to get familiar with the way that GDevelop works.+This tutorial will help you to get familiar with the way GDevelop works.
 You will create a very simple game. In this game, the enemies will move toward the player. The player will be able to shoot the enemies. The enemies will explode when they are hit with the player'​s bullets. You will create a very simple game. In this game, the enemies will move toward the player. The player will be able to shoot the enemies. The enemies will explode when they are hit with the player'​s bullets.
 {{ :​gdevelop5:​tutorials:​beginner-tutorial-screenshot.png?​nolink |}} {{ :​gdevelop5:​tutorials:​beginner-tutorial-screenshot.png?​nolink |}}
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 90: Line 90:
 {{ :​gdevelop5:​tutorials:​add-action.png?​nolink |}}  {{ :​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 145: Line 145:
 {{ :​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 |}} {{ :​gdevelop5:​tutorials:​add-force-angle-parameter-permanent.png?​nolink |}}
Line 171: Line 171:
 {{ :​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 |}}
  
Line 204: Line 204:
 //​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 314: 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 328: 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 383: 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 391: 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.