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/30 20:50]
piyushpalawat99
— (current)
Line 1: Line 1:
-#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 car on the road and simultaneously,​ increase the score as we get past the cars. 
  
-{{ :​gdevelop5:​tutorials:​peek_2019-05-30_19-46.gif?​nolink |}} 
- 
-==== Download GDevelop ==== 
-If you do not have GDevelop yet, you can do so from [[https://​gdevelop-app.com/​download/​|GDevelop'​s official website.]] It is available for Windows, macOS as well as Linux. 
- 
-After downloading GDevelop, you can proceed with the installation/​extraction followed by the launching of GDevelop. 
- 
-====Create a new project==== 
- 
-Click on ''​CREATE A NEW PROJECT''​ on the Start Page. A dialog box appears. 
- 
-{{ :​gdevelop5:​linux-start-page.png?​nolink |}} 
- 
-Click on ''​Empty game''​ (you might have to scroll down to find this option) and choose the location, where you want to save your project. 
- 
-{{ :​gdevelop5:​new-game-page.png?​nolink |}} 
- 
-====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. ​ 
- 
-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 |}} 
- 
-You will need a few files, to create objects for this game. You can download them {{ :​gdevelop5:​tutorials:​rpts-resources.zip |here.}} Download and extract the .zip file to the directory, that you have chosen as the location of our game. 
- 
-====Create a new object=== 
- 
-Choose the **+** button beside ''​Click to add a new object''​ from the ''​Objects''​ panel on the right side. 
- 
-{{ :​gdevelop5:​tutorials:​platform-game:​screen_shot_2017-09-24_at_23.32.40.png?​nolink |}} 
- 
-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 |}} 
- 
-You can name the object as per your wish, but in this tutorial, we're going to name it //Car//. Let's add an animation to the object. Animations are containing images that are displayed on screen for Sprite objects. ​ 
- 
-To add an animation to the object, click on the **+** symbol beside ''​Click to add an animation''​. 
- 
-{{ :​gdevelop5:​tutorials:​add-animation.png?​nolink |}} 
- 
-Add the image named '​car.png'​ as animation and click on the ''​APPLY''​ option. 
- 
-{{ :​gdevelop5:​screenshot_from_2019-05-20_13-54-57.png?​nolink |}} 
- 
-Similarly, add a new Sprite object //Highway// which consists of the image, '​highway.png'​ as the animation. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_00-58-55.png?​nolink |}} 
- 
-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-30_20-41-27.png?​nolink |}} 
- 
-{{ :​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 |}} 
- 
-Create a new Sprite object //​Explosion//​ and select all the images from '​Explosion1.png'​ to '​Explosion8.png'​. ​ 
- 
-{{ :​gdevelop5:​screenshot_from_2019-05-20_14-14-45.png?​nolink |}} 
- 
-Your scene by the end of this step should contain 8 objects. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_21-22-38.png?​nolink |}} 
- 
-====Adding top-down movement to the car==== 
-Since the //Car// is to be controlled by the player, we add a behavior to it. First, we need 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. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-20_14-26-26.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''​. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_19-44-47.png?​nolink |}} 
- 
-Choose ''​Top-down movement''​ in the ''​Add a new behavior to the object''​ pop-up. This would open a wide variety of options to alter. 
- 
-{{ :​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 box having the option ''​Rotate object''​ 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 |}} 
- 
-====Adding top-down movement to the traffic cars==== 
-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 |}} 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-30_23-43-37.png?​nolink |}} 
- 
- 
- 
- 
-====Creating a new event==== 
-An event is a pair of conditions and actions. When a given set of conditions is true, the corresponding action or set of actions is performed. ​ 
- 
-While making this game, we will encounter a few events with no conditions and one or more actions assigned to them. In such a case, the action is performed on every frame created. ​ 
- 
-To add a new event, open the ''​NEWSCENE (EVENTS)''​ tab from the top 
- 
-{{ :​gdevelop5:​tutorials:​scene-events-tab.png?​nolink |}} 
- 
-From the events editor toolbar, choose the option that says ''​Add a new empty event''​. 
- 
-{{ :​gdevelop5:​add-event-button.png?​nolink |}} 
- 
-This will create a new event, with an empty condition and an empty action. 
- 
-{{ :​gdevelop5:​screenshot_from_2019-05-20_14-49-49.png?​nolink |}} 
- 
-====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. 
- 
-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 |}} 
- 
-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. 
- 
-Another method to move the object is by changing the X and Y-coordinates in the Object properties panel on the left side. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_01-25-21-1.png?​nolink |}} 
- 
-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. 
- 
-{{ :​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. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_01-58-08.png?​nolink |}} 
- 
-You should see something similar to the image shown below and you should also be able to control the car using the arrow keys. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_02-04-34.png?​nolink |}} 
- 
-We see a few problems: 
-  * The //Car// is not fully visible. 
-  * The part of the screen below the //Highway// is empty. 
-  * The //Highway// is too far away from the center of the screen. 
- 
-===Making the car visible=== 
-To make the car visible, we need to know the reason for it being hidden under the //​Highway//​. The answer is, ''​Z Order''​. ​ 
- 
-<​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//. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_02-20-14.png?​nolink |}} 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_02-21-37.png?​nolink |}} 
- 
-===Creating the bottom part of the Highway=== 
-To create the bottom part of the //​Highway//,​ we can elongate the height of our object //​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 |}} 
- 
-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. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_02-41-35.png?​nolink |}} 
- 
-===Getting our game to the center of the window=== 
-To get our game to the center of the preview window, we will create our first event. 
- 
-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>​ 
- 
-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. 
- 
-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. 
- 
-First, create a new empty event using the explanation [[http://​wiki.compilgames.net/​doku.php/​gdevelop5/​tutorials/​rpts?#​creating_a_new_event|above.]] 
- 
-We need to make an event such that the game lies in the center of the screen. Therefore, setting the X and Y-coordinates will be our action. 
- 
-This action needs to be true for all frames, i.e. for all conditions. And so that the action is true for all conditions, we enter no condition. 
- 
-To add an action, click on the ''​Add action''​ option. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_12-01-43.png?​nolink |}} 
- 
-To choose an action, you can either choose it from the various drop-down menus available or you can use the search bar at the top. 
- 
-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. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_12-22-36.png?​nolink |}} 
- 
-Else, you can search for the action in the top ''​Search''​ bar. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_12-33-40.png?​nolink |}} 
- 
-Click ''​OK''​. 
- 
-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. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_12-29-55.png?​nolink |}} 
- 
-You can now follow a similar procedure for Y position as you did for X position but make sure that this time you choose the ''​Camera center Y position''​ option and enter the Y coordinate. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_14-54-19.png?​nolink |}} 
- 
-Your preview should now look something similar to this: 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_14-57-29.png?​nolink |}} 
- 
-To make sure that all your progress has been saved, click on ''​Save''​ in the ''​File''​ menu, or press, Ctrl + S. 
- 
-====Moving the car==== 
-To move the //Car//, we need to create an event such that the car translates as well as rotates to some degree when left or right key is pressed. 
- 
-As we can deduce from the above statement, the condition of the event is left key press and right key press. 
- 
-<note important>​Remember that each key press (left and right) should have different events because we need to have different motions for each of them.</​note>​ 
- 
-We will start with the event that has the condition of left key press. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_15-09-13.png?​nolink |}} 
- 
-For the action, when the left key is pressed, the //Car// should have a movement on the left side. This can be easily done using an action ''​Simulate left key press''​ that would simulate the left side movement for the object selected (//Car//). 
- 
-But, make sure to use the action with the same behavior as your object (top-down movement). So, we need to choose it from the ''​Top-down movement''​ drop-down. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_15-18-20.png?​nolink |}} 
- 
-Now, we need to give our //Car// the desired rotation for a better visual experience. If we just give rotation to the object, it will rotate up to 180 degrees. 
- 
-To avoid such a result, we need to set a final angle too. We will assume it to be 30 degrees on both sides, i.e. -30 degrees for the left key press and 30 degrees for the right key press. 
- 
-But, before we move ahead, we also need to assign the ''​Angular speed''​ for the rotation. We are using a value of 60 degrees/​second for the same. 
- 
-Remember that the angular speed will be the same for both the key presses. It cannot be negative, because, it is the "​Angular speed" and speed cannot be negative. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_16-18-34.png?​nolink |}} 
- 
-We can repeat a similar event for right key press. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_16-42-05.png?​nolink |}} 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_16-42-37.png?​nolink |}} 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_16-52-25.png?​nolink |}} 
- 
-If you preview your project, you should be able to control your //Car// using the left and right arrow keys. 
- 
-But we still encounter one problem, the car does not return to its original state when we leave the keys. Instead, it stays oriented at an angle. Let's solve this problem now. 
- 
-===Returning the car to its original orientation=== 
-We need to return the car to an angle of 0 degrees when none of the arrow keys are pressed. In other words, we need to return the car to an angle of 0 degrees when the conditions, right key press and left key press are inverted. 
- 
-To achieve this, we add a new event and try to add the above 2 conditions, i.e. right key press inverted and left key press inverted. We add a condition ''​Left key is pressed'',​ and turn on the switch below, that says ''​Invert conditions''​. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_17-14-21.png?​nolink |}} 
- 
-In the same event, we add a similar inverted condition for right key press. 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_17-19-07.png?​nolink |}} 
- 
-For the action, we will make an action for rotating it towards 0 degrees with an angular velocity of choice, similar to what we did for the non-inverted conditions of key press. 
- 
-<​note>​Make sure to include both the conditions in the SAME EVENT, because we want the vehicle to return to 0 degrees only when neither left nor right arrow key is pressed.</​note>​ 
- 
-{{ :​gdevelop5:​tutorials:​screenshot_from_2019-05-22_17-46-07.png?​nolink |}} 
- 
-Now, the car moves and rotates to an extent when an arrow key is pressed and rotates back to the original angle when the keys are released. 
- 
-====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 |}} 
- 
-====Next Step: Create trees 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//. 
- 
-To read the next part of the tutorial, [[gdevelop5:​tutorials:​rpts2|click here.]]