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:roadrider [2019/06/13 21:50]
piyushpalawat99 [Creating the bottom part of the Highway]
gdevelop5:tutorials:roadrider [2019/07/06 10:42] (current)
piyushpalawat99
Line 1: Line 1:
 #Road Rider - Endless car game tutorial #Road Rider - Endless car game tutorial
-This tutorial will help you get more familiar with GDevelop. Our primary focus in this tutorial will be to make an endless car game. We shall dodge the cars on the road and also make the game such that it automatically ​updates the score as we go past the cars.+This tutorial will help you get more familiar with GDevelop. Our primary focus in this tutorial will be to make an endless car game. The player should ​dodge the cars on the road. The game will also have a score such that it is automatically ​updated ​as we get past the cars.
  
 {{ :​gdevelop5:​tutorials:​peek_2019-05-30_19-46.gif?​nolink |}} {{ :​gdevelop5:​tutorials:​peek_2019-05-30_19-46.gif?​nolink |}}
Line 18: Line 18:
 Click on ''​Empty game''​ (you might have to scroll down to find this option) in the dialog box that appears and choose the location where you want to save your project. Click on ''​Empty game''​ (you might have to scroll down to find this option) in the dialog box that appears and choose the location where you want to save your project.
  
-{{ :gdevelop5:new-game-page.png?nolink |}}+{{ :gdevelop5:tutorials:​annotation_2019-07-04_220443.png?nolink |}}
  
 ## Create a new scene ## Create a new scene
Line 26: Line 26:
 As soon as we click on Empty game we see a panel on the left side of our screen. This is the ''​Project Manager''​. Click on the ''​Scenes''​ option in the Project Manager. ​ As soon as we click on Empty game we see a panel on the left side of our screen. This is the ''​Project Manager''​. Click on the ''​Scenes''​ option in the Project Manager. ​
  
-Create a new scene using **+** button beside ​the ''​Click to add a scene''​ option from the drop-down that appears. Our new scene has been created. ​ Go to your new scene by clicking on ''​NewScene''​.+Create a new scene using the ''​Click to add a scene''​ option from the drop-down that appears. Our new scene has been created. ​ Go to your new scene by clicking on ''​NewScene''​.
  
-{{:​gdevelop5:​tutorials:​add-scene-button.png?nolink|}}+{{ :​gdevelop5:​tutorials:​add-scene-button2.png? |}}
  
 ## Create a new object ## Create a new object
  
-Choose the **+** button beside ​''​Click to add a new object''​ from the ''​Objects''​ panel on the right side.+Choose the ''​Click to add an object'' ​option ​from the ''​Objects''​ panel on the right side.
  
 {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-24_at_23.32.40.png?​nolink |}} {{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-24_at_23.32.40.png?​nolink |}}
Line 38: Line 38:
 Choose ''​Sprite''​ from the ''​Add a new object''​ pop-up. This will be followed by the appearance of a dialog box. Choose ''​Sprite''​ from the ''​Add a new object''​ pop-up. This will be followed by the appearance of a dialog box.
  
-{{ :​gdevelop5:​tutorials:​object-types.png?nolink |}}+{{ :​gdevelop5:​tutorials:​annotation_2019-07-05_171958.png?nolink |}}
  
 The object is called NewObject by default - you can see the name at the top of the dialog. It's a good idea to give a descriptive name to each object so that you can understand what they are when dealing with them in events. In our case, use the field to set the name to //Car//. The object is called NewObject by default - you can see the name at the top of the dialog. It's a good idea to give a descriptive name to each object so that you can understand what they are when dealing with them in events. In our case, use the field to set the name to //Car//.
Line 66: Line 66:
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_20-42-54.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_20-42-54.png?​nolink |}}
  
-Create a new Sprite object //Tree// which has '​tree.png'​ for its animation. ​These objects ​will be used for the trees that will be on the side of the road as we're progressing in the game.+Create a new Sprite object //Tree// which has '​tree.png'​ for its animation. ​This object ​will be used for the trees that will be created ​on either ​side of the road as we're progressing in the game.
  
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_00-57-11.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_00-57-11.png?​nolink |}}
Line 81: Line 81:
 Adding a top-down movement behavior to the car will allow us to set its maximum speed as well as the acceleration and deceleration of the car. This will allow the car to slowly gain the speed rather than starting with the maximum speed. For this, we will have to open the ''​Object Editor''​. ​ Adding a top-down movement behavior to the car will allow us to set its maximum speed as well as the acceleration and deceleration of the car. This will allow the car to slowly gain the speed rather than starting with the maximum speed. For this, we will have to open the ''​Object Editor''​. ​
  
-To do this, you can either double-click on the //Car// object from the object side panel or click on the three-dot-menu ​besides ​the object and click on edit object.+To do this, you can either double-click on the //Car// object from the object side panel or click on the three-dot-menu ​beside ​the object and click on edit object.
  
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-20_14-26-26.png?nolink |}}+{{ :​gdevelop5:​tutorials:​annotation_2019-07-06_124410.png?nolink |}}
  
 Click on the ''​BEHAVIORS''​ tab at the top of the panel and click on the **+** button beside ''​Click to add a behavior to the object''​. Click on the ''​BEHAVIORS''​ tab at the top of the panel and click on the **+** button beside ''​Click to add a behavior to the object''​.
Line 93: Line 93:
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_19-42-06.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_19-42-06.png?​nolink |}}
  
-This opens a wide variety of options to alter. You can see the default values for the properties of the behavior. Set the deceleration to 400 and untick the boxes having the options ''​Rotate object''​ and ''​Default controls''​ and click ''​APPLY''​. Rest of the default values are fine for our game.+This opens a wide variety of options to alter. You can see the default values for the related to the behavior. Set the deceleration to 400 and untick the boxes having the options ''​Rotate object''​ and ''​Default controls''​ and click ''​APPLY''​. Rest of the default values are fine for our game.
  
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_19-37-09.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_19-37-09.png?​nolink |}}
Line 113: Line 113:
  
 {{ :​gdevelop5:​screenshot_from_2019-05-20_14-49-49.png?​nolink |}} {{ :​gdevelop5:​screenshot_from_2019-05-20_14-49-49.png?​nolink |}}
- 
-## Setting the background color 
-If you wish, you can change the background color of the scene. 
- 
-To do so, you can right-click anywhere on the scene and select ''​Scene properties''​. 
- 
-Click on the box below ''​Scene background color''​ that says ''​Click to choose''​. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_18-04-16.png?​nolink |}} 
- 
-You can choose the color of your choice and click ''​OK''​ in the ''​Scene properties''​. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_18-27-13.png?​nolink |}} 
  
 ## Create instances of Car and Highway ## Create instances of Car and Highway
-To create an instance of the //Car// object we can drag it from the Objects panel to the scene and give it the coordinates of our choice+To create an instance of the //Car// object we can drag and drop the object ​from the Objects panel to the scene and give it the coordinates of our choice.
- +
-You need to click on the object //Car// in the Objects panel and drag it to the scene while holding the click. After getting it to the desired position, you can leave the click.+
  
 {{ :​gdevelop5:​tutorials:​peek_2019-05-26_11-58.gif?​nolink |}} {{ :​gdevelop5:​tutorials:​peek_2019-05-26_11-58.gif?​nolink |}}
  
-If you need to alter the coordinates of the object after getting it on the scene, you can do so by the click-and-drag method, but by dragging the object on the scene rather than the one on the Objects panel.+If you need to alter the coordinates of the object after getting it on the scene, you can do so by the drag and drop method, but by dragging the object on the scene.
  
 Another method to move the object is by changing the X and Y-coordinates in the Object properties panel on the left side. Another method to move the object is by changing the X and Y-coordinates in the Object properties panel on the left side.
Line 142: Line 127:
 You can choose the values of your choice but if you want results similar to that of the tutorial, you are expected to have the same values. You can choose the values of your choice but if you want results similar to that of the tutorial, you are expected to have the same values.
  
-Similarly, to create an instance of //Highway// you can click-and-drag the object to the scene and alter its X and Y-coordinates.+Similarly, to create an instance of //Highway// you can drag and drop the object to the scene and set its X and Y-coordinates.
  
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_01-55-46.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_01-55-46.png?​nolink |}}
Line 187: Line 172:
 But before that, we need to determine the X position and Y position of the camera. But before that, we need to determine the X position and Y position of the camera.
  
-<​note>​The coordinates of an object depict the location of the top-left corner of our object rather than the center of the object.</​note>​+<​note>​The coordinates of an object depict the location of the top-left corner of our object rather than the center of the object ​and coordinates of the center of the camera is the center of the displayed window.</​note>​
  
 For the X position, the camera has to be at the center of the window/​highway. The width of the //Highway// is 535 pixels. So the center of the //Highway// will lie at 267.5 pixels. For the X position, the camera has to be at the center of the window/​highway. The width of the //Highway// is 535 pixels. So the center of the //Highway// will lie at 267.5 pixels.
  
-Similarly, to set the Y position of the camera, we can keep it a little above the //Car// so that the player can get a better view of the cars approaching. ​In this tutorial, we will set it at 350 pixels. You can use the values of your choice.+Similarly, to set the Y position of the camera, we can keep it a little above the //Car// so that the player can get a better view of the cars approaching. ​ set it at 350 pixels.
  
 First, [[http://​wiki.compilgames.net/​doku.php/​gdevelop5/​tutorials/​rpts?#​creating_a_new_event|create a new empty event using the explanation above.]] First, [[http://​wiki.compilgames.net/​doku.php/​gdevelop5/​tutorials/​rpts?#​creating_a_new_event|create a new empty event using the explanation above.]]
Line 458: Line 443:
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-23_17-40-12.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-23_17-40-12.png?​nolink |}}
  
-If the condition is satisfied, a force greater than or equal to 200 pixels/​second should be applied on the //Car// along the X-axis.+If the condition is satisfied, a force greater than or equal to the maximum speed of the car should be applied in the opposite direction. Therefore, a force greater than or equal to 200 pixels/​second should be applied on the //Car// along the X-axis.
  
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-23_17-40-33.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-23_17-40-33.png?​nolink |}}
Line 508: Line 493:
  
 You can watch the preview now. Our game is ALMOST complete. We cannot say that the game is complete until we can see the score made by an individual. You can watch the preview now. Our game is ALMOST complete. We cannot say that the game is complete until we can see the score made by an individual.
 +
 +## Setting the background color
 +The gray background does not really suit the game. As there will be trees on both sides of the road, the green color might be the best. To do so, you can right-click anywhere on the scene and select ''​Scene properties''​. Click on the box below ''​Scene background color''​ that says ''​Click to choose''​.
 +
 +{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_18-04-16.png?​nolink |}}
 +
 +You can choose the color of your choice and click ''​OK''​ in the ''​Scene properties''​.
 +
 +{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_18-27-13.png?​nolink |}}
  
 ## Displaying score in the scene ## Displaying score in the scene
Line 526: Line 520:
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-23_19-14-05.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-23_19-14-05.png?​nolink |}}
  
-You cannot directly add a number to a number stored in ''​Text''​.+The score in our game will be shown as a number. ​You cannot directly add a number to a number stored in ''​Text''​.
  
 But you can do it using a variable. To update the score, we need to add a number to the variable defined every time a tree crosses a predefined position and then send that value to the text object. But you can do it using a variable. To update the score, we need to add a number to the variable defined every time a tree crosses a predefined position and then send that value to the text object.
Line 593: Line 587:
  
 You have now created an infinite car game in which the score gets updated as we pass by the trees. You have now created an infinite car game in which the score gets updated as we pass by the trees.
- 
-You can now pose new challenges in front of yourself like allowing the car to go off the highway or allowing the movement of the car in front and back too. 
  
 Enjoy the game. Enjoy the game.
  
-Read more [[gdevelop5:​tutorials|tutorials and guides ​here.]]+## Add new features 
 + 
 +You can now pose new challenges in front of yourself like allowing the car to go off the highway or allowing the movement of the car in front and back too. 
 + 
 +GDevelop offers many tutorials for users to get more familiar with it. You can [[gdevelop5:​tutorials|see them here.]]