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 i love this blog

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: