Tutorial on making a multiplayer racing game

This tutorial assumes that you know how to use game develop well and is not new to it. For beginner tutorials, go to http://www.wiki.compilgames.net/doku.php/gdevelop/tutorials to see more tutorials. The final product should look like this:

Preparation

First make sure you have already downloaded GDevelop. If not, please download the latest version from here http://compilgames.net.
Make sure that you always have the newest version because the older versions might have bugs.

Creating the project

Create a new project. For this tutorial, we will be using the native platform because it has the network extension and the web platform doesn't. Click on empty project and choose the path you want to save your project at.

Extensions

We will need 4 extensions:

  • Network Features (for the multiplayer)
  • Common Dialogs (for typing in the ip, ect)
  • Text Object (for the “Ready… Set… Go!” text)
  • Tiled Sprites (for the road and the background)

Graphics

We need images to make the game. The graphics I used are already bundled with GDevelop, so you should have them. You don't need to use them though if you draw your own graphics. The graphics I used are voiture2nd.png, voiture.png, police.png, LargeGrass.png, finishline.png, RouteHorizontale.png, RouteVerticale.png, and 2dSmallWoodBox.jpg. The images should all be in the examples folder that is inside the game develop folder.

Adding Tracks and Background

All done so quickly? Well, then move on the the next step. Create a new tiled sprite named Background. Use LargeGrass.png for the graphic. You don't really need to do anything with it, as we will add in the background last because we do not know how large the track will be. Now, create two other tiled sprites and name them RoadHorizontal and RoadVertical.Use RouteHorizontale.png and RouteVerticale.png accordingly for the sprites. We won't be making the track yet. Also, I'm sorry, but GDevelop did not provide curved roads, so you have to put horizontal and vertical roads beside each other to make a “curve”.

Cars and Steering

Make your keyboard into a steering wheel! Ok, maybe you have to program it first. Some of you might be wondering why I haven't included the 4 direction extension. That is because I want it so that you turn with the left and right keys. Ok, enough talk, lets get started. First, add two new sprites. Call them Car and Car2. Use voiture.png and voiture2nd.png for the car graphics. Now drag the 2 object into the scene. Open the sprite edition window and click edit collision mask. (by the way my screen might be different from yours because I have already edited the collision mask. I actually finished the project before I wrote this tutorial)
Alright, now lets edit the collision mask. Delete the old collision mask. There will pop out another one. Delete it too. Now click the button on the up left corner of the screen. A dialog will pop out. Enter 61 for the first and 26 for the second. Do the same for car2. We are making a new collision mask because pixel perfect collision doesn't work with sprite against tiled sprites, and the original collision mask is too big for the cars.

Now, lets start working on the events. Go to the event page and create a 4 new events:
If up key is pressed, add to car a force, angle: Car.Angle() degrees and length: 300 pixels
This moves the car forward when pressing up key and also enables steering.
If down key is pressed, add to car a force, angle: Car.Angle()+180 degrees and length: 100 pixels
This moves the car backward when pressing down key and is affected by the direction of the car.
If left key is pressed, do -200TimeDelta() to the angle of car
This allows you to steer to the left by pressing the left key. Time delta allows events to run always the same speed so even if your fps is like 10, your results would be around the same as a guy who has 60 fps. Read more about TimeDelta() here http://wiki.compilgames.net/doku.php/gdevelop/documentation/manual/pres_concepts.
If right key is pressed, do +200
TimeDelta() to the angle of car
The same concept as steering left, only opposite.
I am fully aware that I did not mention adding the events for car2. We will add that afterwards.

Polizia!

Police, drop your guns! Okay, I'm just joking. We are going to add police cars to the equation. Add 2 new sprites and both use police.png as graphic. Change their collision masks to 61, 26.

Make them be a little behind the racing cars. Their AI will be simple:
Always, add to police a force, angle: Police.Angle() degrees and length: 250 pixels, add to police2 a force, angle: Police2.Angle() degrees and length: 250 pixels, rotate police towards Car.PointX(Centre);Car.PointY(Centre) at speed 0deg/second, rotate police2 towards Car2.PointX(Centre);Car2.PointY(Centre) at speed 0deg/second
This moves police toward car and police2 toward car2

Winning and Losing

Create a new scene variable called win. Add these 3 event:
Car is in collision with Police ( Collision masks ), do =2 to variable win
Car2 is in collision with Police2 ( Collision masks ), do =1 to variable win.
Variable win != to 0, trigger once, display message ““And the winner is… Player ”+VariableString(win)+”!“”, go to scene yourscenenamehere
I know it has 2 double quotes on the outside, it always is like that. Only add one double quote though.
Now add a new sprite and name it goal. Use finishline.png for the image. Now do:
Car is in collision with goal ( Collision masks ), do =1 to variable win
Car2 is in collision with goal ( Collision masks ), do =2 to variable win.
Quick explanation: If win=1, car wins. If win=2 car2 wins. ====Multiplayer==== Add these events:
At the beginning of scene: * Display “Starting message” with title “title” * Open a text input dialog, and save the result in variable IP (for this just ask the player the IP of the player they are connecting to) * Open a Yes/No message box, and save result in variable Player (for this ask the player if they are player one or player two) * Initialize data reception * Add VariableString(IP) to recipients
This allows you to receive data from an IP through a port (default is 50001).
Now you need to add in the events that send and receives the information. But before that, you need to add the controls for car2. Add 2 new events:
The text of variable player is “yes” and variable win =0
The text of variable player is “no” and variable win =0
Now put the first car's control as sub events of the first new event. Duplicate the first car's controls and do the same for the second event, except rename the controls for car2. Now in the yes event, add these: * Receive data * Send value Car.X() with title “XPosition” to recipients This sends the car's X position to the other player * Send value Car.Y() with title “YPosition” to recipients This sends the car's Y position to the other player * Send value Car.Angle() with title “Angle” to recipients This sends the car's angle to the other player * Do =Network::GetReceivedDataValue(“XPosition2”);=Network::GetReceivedDataValue(“YPosition2”) to the position of car2 This receives the other car's X and Y position * Do =Network::GetReceivedDataValue(“Angle2”) to the angle of car2 This receives the other car's angle To read more about networking, go here http://wwww.wiki.compilgames.net/doku.php/gdevelop/documentation/manual/built_network
====The Track Science==== The game would be very pointless if there was no difficulty to the game. We are going to add the our cars so that if they are off the track, they would go slower (because there is grass :D) Add a condition to both going forward and going backward events (for both cars). Add the condition OR (in the advanced section). Now add 2 other conditions inside the OR condition. It should be car/car2 is in collision with RoadVertical ( Collision masks ) or car/car2 is in collision with RoadHorizontal ( Collision masks ) Now duplicate the going forward and going backward event (for both cars) and reverse the collision so that the event happens when the car is not touching a road but player is still pressing up or down keys. Change the speed for up key to be 100 pixels and speed for down key to be 25 pixels. That way if the player's car is not on the track they will be slower and the police will catch up to them. That makes the game more difficult and more skill based. ====Starting Message==== Create a new text object. Write the text “Ready” inside it. Name it start. Create a new layer and move it to the top. Name it HUD. Add 3 events (I used compare expressions condition for the first three conditions): * TimeFromStart()>=1, trigger once, Do =“Ready…” to the text of start * TimeFromStart()>=2, trigger once, Do =“Set…” to the text of start * TimeFromStart()>=3, trigger once, Do =“GO!!!” to the text of start * TimeFromStart()>=4, trigger once, Delete object start Now we have to add it so that the racing cars and police cars can't move until the text says “GO!!!” Simply create a new event with TimeFromStart()>=3 and put all of car and police movement to its sub event. ====The Tracks==== Now add the background, the cars, the police, the tracks, and the goal to the game! Nothing more needed to be mentioned. ====Camera==== We need the camera to follow the player in case the track is bigger than the screen. Add an action to both car and car2. They should be placed where the networking events are so that the camera will follow car/car2 all the time. Use a Center the camera on object within limits. Center the camera on car/car2. To know more about centering camera on objects within limits, read: http://www.forum.compilgames.net/viewtopic.php?f=20&t=5252 ====Boundary==== Almost done! We need to stop the car from going out of the playfield by creating a new sprite called obstacle with 2dSmallWoodBox.jpg. We add the event:
Car/car2 is in collision with obstacle (pixel perfect), move away car/car2 of obstacle (only car/car2 will move).
This moves the car away from the obstacle when the car touches the obstacle.
Now add the obstacles around the playfield so that the player cannot get out of the playfield. ====Bug Fix==== There is a little problem when playing the game. When you finish playing, you have to restart. When you try to close the game while the dialog is out, the game will freeze. A fix to it is add to the event when win!=0 is first delete go to scene and add :
Open a Yes/No message box and, and save the result in Continue
Now add 2 new event :
The text of variable Continue is =“yes”, go to scene “your
scene”
The text of variable Continue is =“no”, quit the game
The action quit the game is at scene actions.

Congratulations

Good job! You finished this extremely boring tutorial without quitting! Give yourself a pat on the back. Compile the game to wherever you want and have fun!

Extra

In order to play this game, you and your friend must both port forward to port 50001 and use each other's external IP to connect to each other. You can find your external ip by going to http://www.whatismyip.com. Have fun playing this game with your friends!
Also here is a link to my version of the game.
A picture of the game in my scene editor: