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:rpts [2019/05/26 13:23]
piyushpalawat99
gdevelop5:tutorials:rpts [2019/06/06 18:09]
piyushpalawat99 removed
Line 1: Line 1:
-#Rub Past the Shrub - Infinite car game tutorial +#Road Rider - Infinite car game tutorial 
-This tutorial will help you get more familiar with GDevelop. Our primary focus in this tutorial will be to make an infinite car game without actually moving the background. We shall dodge the trees on the road and simultaneously,​ increase the score as we get past the trees.+This tutorial will help you get more familiar with GDevelop. Our primary focus in this tutorial will be to make an infinite car game without actually moving the background. We shall dodge the car on the road and simultaneously,​ increase the score as we get past the cars.
  
-{{ :​gdevelop5:​tutorials:​2019-05-24_17-41.gif?nolink |}}+{{ :​gdevelop5:​tutorials:​peek_2019-05-30_19-46.gif?nolink |}}
  
 ==== Download GDevelop ==== ==== Download GDevelop ====
Line 11: Line 11:
 ====Create a new project==== ====Create a new project====
  
-Click on ''​CREATE A NEW PROJECT''​ on the ''​START PAGE''​. A dialog box appears.+Click on ''​CREATE A NEW PROJECT''​ on the Start Page. A dialog box appears.
  
 {{ :​gdevelop5:​linux-start-page.png?​nolink |}} {{ :​gdevelop5:​linux-start-page.png?​nolink |}}
Line 21: Line 21:
 ====Create a new scene==== ====Create a new scene====
  
-''​Scene''​ is the area where we'll work for most of our time while creating the game. 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. ​+''​Scene''​ is the area where we'll work for most of our time while creating the game. 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 new 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 **+** 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''​.
  
 {{ :​gdevelop5:​tutorials:​add-scene-button.png?​nolink |}} {{ :​gdevelop5:​tutorials:​add-scene-button.png?​nolink |}}
Line 53: Line 53:
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_00-58-55.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_00-58-55.png?​nolink |}}
  
-Our next step will be to add Sprite ​object ​//Tree1// which would have the image 'tree.png' for the animation. ​This will be the object ​that we need to dodge.+Our next step will be to add the 4 cars as different ​Sprite ​objects namely ​//Blue//, //Gray//, //Green//, //Pink// which would have the image 'blue-car.png',​ '​gray-car.png',​ '​green-car.png'​ and '​pink-car.png' for their respective ​animation. ​From now on, we will address these cars as '​Traffic cars'. These will be the objects ​that we need to dodge.
  
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_00-56-33.png?nolink |}}+{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_20-41-27.png?nolink |}}
  
-Create a new Sprite object //Tree2// which also has '​tree.png'​ for its animation. This will be the object we will mainly use to simulate a moving background.+{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_20-42-03.png?​nolink |}} 
 + 
 +{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_20-42-30.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. This will be the object we will mainly use to simulate a moving background.
  
 {{ :​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 65: Line 71:
 {{ :​gdevelop5:​screenshot_from_2019-05-20_14-14-45.png?​nolink |}} {{ :​gdevelop5:​screenshot_from_2019-05-20_14-14-45.png?​nolink |}}
  
-Your scene by the end of this step should contain ​objects.+Your scene by the end of this step should contain ​objects.
  
-{{ :​gdevelop5:​screenshot_from_2019-05-20_14-18-49.png?nolink |}}+{{ :gdevelop5:tutorials:​screenshot_from_2019-05-30_21-22-38.png?nolink |}}
  
 ====Adding top-down movement to the car==== ====Adding top-down movement to the car====
Line 84: Line 90:
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_19-42-06.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_19-42-06.png?​nolink |}}
  
-You can see the default values for the properties of the behavior. Set the deceleration to 400 and **untick the boxes having the options ''​Default controls''​ and ''​Rotate object''​** and click ''​APPLY''​. Rest of the default values are fine for our game.+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.
  
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_19-37-09.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_19-37-09.png?​nolink |}}
  
-====Adding top-down movement to the trees==== +====Adding top-down movement to the traffic cars==== 
-Remember that in this tutorial, we shall not move the //Highway// but rather move trees in the backward direction. To achieve this, we need to add Top-down movement behavior to //Tree1//.+Remember that in this tutorial, we shall not move the //Highway// but rather move the traffic cars and the trees in the backward direction. To achieve this, we need to add Top-down movement behavior to all the traffic cars and the trees.  
 + 
 +Our trees should move in the direction opposite to that of the //Car// so that we can simulate a moving background. For this, we will add top-down behavior to the //Tree// object. 
 + 
 +During the gameplay, the player should not be able to control the movement of the trees and the trees should move in a straight line without rotating. To implement these settings, we will untick the boxes with the options ''​Allow diagonals'',​ ''​Default controls''​ and ''​Rotate objects''​. 
 + 
 +Also, set the acceleration to 1000 (will be explained later) and set the maximum speed to 300 so that it will simulate a fast car. 
 + 
 +{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_22-45-28.png?​nolink |}} 
 + 
 +If you observe closely, you will see that the cars //Blue// and //Gray// face in the same direction while the cars //Green// and //Pink// face in the opposite direction to that of //Car//.  
 + 
 +We can use this to our advantage and reserve the left 2 lanes of the highway for the forward moving cars (//Blue// and //Gray//) and use the right side of the highway for cars moving in the opposite side (//Green// and //​Pink//​). 
 + 
 +From the above statement, we can assume that cars moving in the forward direction should have a maximum speed less than that of //Tree// and the cars moving in the backward direction should have a speed higher than //Tree//. 
 + 
 +For //Blue// and //Gray//, we will set the maximum speed to 100 and the acceleration to 1000. Because we want their movement similar to that of //Tree//, we will untick all three boxes. 
 + 
 +{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_23-29-19.png?​nolink |}} 
 + 
 +{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_23-32-34.png?​nolink |}} 
 + 
 +Similar to //Blue// and //Gray//, we will set the acceleration of //Green// and //Pink// to 1000 and untick all the boxes but we will set their maximum speed to 500 because they are moving in the opposite direction with respect to the car. 
 + 
 +{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_23-42-24.png?nolink |}}
  
-For //Tree1//, we will untick all three boxes while the rest of the default values are fine for this tutorial.+{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_23-43-37.png?nolink |}}
  
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-26_10-51-33.png?​nolink |}} 
  
-Similar to //Tree1//, //Tree2// needs to move in the backward direction. We add Top-down movement to //Tree2// with similar parameters as that of //Tree1//. 
  
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-26_11-00-46.png?​nolink |}} 
  
 ====Creating a new event==== ====Creating a new event====
Line 135: Line 162:
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_01-55-46.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_01-55-46.png?​nolink |}}
  
-At this point, if you wish, you can preview your project by clicking on ''​Launch a preview of the scene''​ icon above the scene.+A user can use the preview feature provided by GDevelop. Using this feature, you can see how the game behaves in the real world. You can preview your project by clicking on ''​Launch a preview of the scene''​ icon above the scene.
  
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_01-58-08.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_01-58-08.png?​nolink |}}
Line 141: Line 168:
 You should see something similar to the image shown below. You should see something similar to the image shown below.
  
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_02-04-34.png?nolink |}}+{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-31_17-24-28.png?nolink&​400 ​|}}
  
 We see a few problems: We see a few problems:
Line 151: Line 178:
 To make the car visible, we need to know the reason for it being hidden under the //​Highway//​. The answer is, ''​Z Order''​. ​ To make the car visible, we need to know the reason for it being hidden under the //​Highway//​. The answer is, ''​Z Order''​. ​
  
-Z Order of an object is the property, which decides whether the object should be displayed on the front or the back. An object with a certain Z Order assigned to it will always be shown in front of the objects with lower Z Order value and behind the objects with higher Z Order value.+<​note>​Z Order of an object is the property, which decides whether the object should be displayed on the front or the back. An object with a certain Z Order assigned to it will always be shown in front of the objects with lower Z Order value and behind the objects with higher Z Order value. 
 +</​note>​
  
 In our case, we can assign a Z Order of 1 to the //Highway// and 2 to the //Car//. In our case, we can assign a Z Order of 1 to the //Highway// and 2 to the //Car//.
Line 164: Line 192:
 To do this, you can click and drag the white box at the corner of the //​Highway//​. To do this, you can click and drag the white box at the corner of the //​Highway//​.
  
-{{ :​gdevelop5:​tutorials:​peek_2019-05-26_12-33.gif?​nolink |}}+{{ :​gdevelop5:​tutorials:​peek_2019-05-26_12-33.gif?​nolink&​400 ​|}}
  
 Another way to do this is to tick the box beside ''​Custom size''​ option in the Properties panel and enter the height and width of your choice. Another way to do this is to tick the box beside ''​Custom size''​ option in the Properties panel and enter the height and width of your choice.
Line 177: Line 205:
 <​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.</​note>​
  
-For the X position, the camera has to be at the center of the window/​highway. The width of the //Highway// is 440 pixels. So the center of the //Highway// will lie at 220 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 trees 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 trees approaching. In this tutorial, we will set it at 350 pixels. You can use the values of your choice.
Line 195: Line 223:
 For example, to change the position of the camera, you can go to Layers and Cameras, followed by ''​Camera center X position''​. The right part of the window will now display configurable parameters. For example, to change the position of the camera, you can go to Layers and Cameras, followed by ''​Camera center X position''​. The right part of the window will now display configurable parameters.
  
-Because we want to set the X position equal - neither less nor more - to 220, choose the **= (set to)** option in ''​Modification'​s sign''​. In the ''​Value''​ field, you can enter the desired X coordinate of the camera.+Because we want to set the X position equal - neither less nor more - to 267.5, choose the **= (set to)** option in ''​Modification'​s sign''​. In the ''​Value''​ field, you can enter the desired X coordinate of the camera.
  
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_12-22-36.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_12-22-36.png?​nolink |}}
Line 207: Line 235:
 You can now see the added action in the Events Editor. You can now see the added action in the Events Editor.
  
-To set the Y position of the camera center, click on ''​Add action''​ in the same window.+To set the Y position of the camera center, click on ''​Add action''​ in the same event.
  
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_12-29-55.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_12-29-55.png?​nolink |}}
Line 217: Line 245:
 Your preview should now look something similar to this: Your preview should now look something similar to this:
  
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_14-57-29.png?nolink |}}+{{ :​gdevelop5:​tutorials:​peek_2019-05-31_18-31.gif?nolink&​400 ​|}}
  
 To make sure that all your progress has been saved, click on ''​Save''​ in the ''​File''​ menu, or press, Ctrl + S. To make sure that all your progress has been saved, click on ''​Save''​ in the ''​File''​ menu, or press, Ctrl + S.
Line 290: Line 318:
 {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_18-27-13.png?​nolink |}} {{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_18-27-13.png?​nolink |}}
  
-====Next Step: Create trees and simulate a moving background==== +====Next Step: Create ​moving ​trees and cars and simulate a moving background==== 
-Although we have given motion to the //Car//, it still doesn'​t look like moving in any other direction other than the two sides. To simulate a moving background, we will make use of the objects //​Tree1// ​and //Tree2//.+Although we have given motion to the //Car//, it still doesn'​t look like moving in any other direction other than the two sides. To simulate a moving background, we will make use of the traffic cars and //Tree//.
  
-To read the next part of the tutorial, ​[[gdevelop5:​tutorials:​rpts2|click here.]]+Read [[gdevelop5:​tutorials:​rpts2|the next part of the tutorial ​here.]]