Make Your First Car Game | Josia Roncancio

This tutorial was created by Josia Roncancio as part of the GameMaker Coaching program. You can view a recording of the live webinar here.

In this tutorial, you'll make a car parking game from scratch, using visual programming in GameMaker. Don't worry, it's a lot easier than learning to parallel park in real life.

This is what the final product will look like:

We'll be using some premade assets to make this game, which you can download here. You can also download the final project.

Create Your Project

Let’s create a new project.

Start GameMaker, click on “New”, and select the “New Blank” template.

Enter a name for your game (e.g. “ParkingPanic”) and click “Let’s Go!”.

After creating the project, the main GameMaker IDE will open up, which consists of two main parts: the Workspace on the left side, and the Asset Browser on the right.

In the Asset Browser, you'll find a list of all the assets that make up your game. The Workspace is where different editors will open, allowing you to edit your assets and program your game. 

Loading the Car Image

Sprites will usually be the first thing you add to your project since they're the visual components of your game. Any image or animation is saved as a Sprite in GameMaker.

Let’s start by creating a new Sprite. Right-click on the “Sprites” folder in the Asset browser, and select “Create ->  Sprite” in the pop-up menu.

This will create a new Sprite Asset and open up an editor for it in the Workspace.

To import our own images into this Sprite, click the "Import" button and navigate to the “Sprites” folder of the assets that you downloaded.

Now select the two images called “spr_car_right0.png” and “spr_car_right1.png”, and press "Open".

Opening multiple image files will turn them into an animation, which you can preview by pressing the little play button below the sprite. To adjust the animation speed, change the number next to “Fps” on the top left to a speed that looks good (e.g. 3).

Last but not least, let’s give the Sprite a proper name. This is important because as you add more and more Assets to your game, you'll need to be able to identify which Sprite contains which image. A typical naming convention for GameMaker is to start with a prefix (“spr_” for Sprites), so let’s name this one “spr_car_right”.

GameMaker also has a built in Image Editor that you can use to draw your own Sprites or modify existing ones. You can open it by clicking “Edit Image” if you wish to create your own art or modify the images you get from this tutorial.

Program Your Car

The next asset we'll need is an Object. Objects are the components of our game that have any kind of behaviour. Anything that moves around on screen, or can be interacted with in some way, is an Object.

Before our parking game is finished, we'll have three Objects:

• The player car that drives around

• The parked cars that the player has to avoid

• The parking spot that the player tries to reach

An object consists of a Sprite, a list of properties, and a list of Events and Actions that define its behaviour. We'll get into what exactly that means in a little bit.

For now, let’s create an Object by right-clicking the Objects folder in the Asset browser and selecting “Create -> Object” and naming it “obj_car”.

Assign the car Sprite to the object by dragging it from the Asset browser into the “Sprite” field of the Object. This will tell our Object what it should look like in the game.

Adding Objects to a Room

The last thing we need to do for our car to show up in our game is place an instance of it in a Room.

Rooms are the different screens that your game is presented on. In our case, these will be the different levels of the game, but rooms can be used in all sorts of ways, like game menus or inventory screens.

Let’s open “Room1” in the Rooms folder of our Asset Browser by double-clicking it. This will open up the Room Editor.

Add an instance of your car Object to the room by dragging it from the Asset Browser.

Some editors like the Room and Sprite editor will open in a new tab next to the main Workspace. You can switch between them by clicking on the different tabs at the top.

Congratulations - you just added your first Object to your game!

You can now play the game by clicking the little Play button above the Workspace (or F5 on your keyboard), and after a couple of seconds, you should see your animated car show up in an empty room.

How to program Objects

Now let’s go back into our car Object and figure out how to actually make it move. As mentioned earlier, an Object’s behaviour is defined by a combination of Events and Actions. Actions tell our Object what to do, while Events tell it when to do it.

For example, if we want our car to start driving when the player presses the spacebar, we would need an Event (Press Spacebar) and a corresponding Action (Start Moving).

To implement this, open up your car Object by double-clicking on it. Now click the “Add Event” button in the Events window. Navigate to “  Key Pressed -> Space”.

This will create the “Key Press - Space” Event and open up a new window for this Event.

You may be asked to choose between GML Code and GML Visual. Select the Visual option, which this tutorial covers.

Enable “Don’t ask again for this project” and hit “OK”:

Now that we've told our Object when we want it to do something, we need to tell it what we want it to do.

We do this by using the GML Visual Actions from the Toolbox on the right part of the window. You can see a description of what each of the Actions does by hovering over it with your mouse.

For now, let’s find an Action called “  Set Speed” in the Movement section of the Toolbox. We can add an action to our event by dragging it into the empty space on the left with our mouse.

The little Action Icon will turn into a bigger box with some customizable options. Here, change the “Speed” parameter to five. This will tell our object to start moving across the screen by five pixels each frame.

To see if it worked, start your game again by pressing the Play button. The car will start out standing still again, but once you press the spacebar, it should move across the screen to the right.

Driving the car

Good job on getting your car to move! You're one step closer to crashing it into a row of parked cars.

Let's see if we can spare you a fender-bender and talk about how to change the direction of the car.

To do this, add another Event to your object. This time, pick “ Key Pressed -> Left” for the left arrow key.

Then, find the “ Set Direction Fixed” Action in the “Movement” Section and add it to the Event.

You can use the Search bar on top of the Toolbox to quickly find Actions instead of scrolling through the whole list!

This action allows us to change the direction the car is moving. Select the left-facing arrow to indicate that we want the object to move left.

Repeat the same process for the other arrow keys as well. Select a different direction to move in, depending on the Event you are in.

You can open an event by double-clicking on it in the Events list.

When you've assigned your directions, you can start the game again. After pressing Space to start the car, you should now be able to change its direction with the arrow keys.

If you've ever seen a car before, though, you'll probably notice something's amiss: the Sprite is always facing right, no matter which direction it's driving in. Let's fix that.

4-Directional Animation

We need to create a “4-directional” animation for the car, so its Sprite changes to face down, left, right and up.

Create three more Sprites for the other directions that our car can face in (down, left, up). Import the images from your disk using “Import”, adjust the Animation Speed in the “Fps” field, and name the Sprites accordingly:

Once this is done, go back to your car Object. We can now go back into the Arrow Key Events that we added before and add more Actions to them.

Open the “  Key Press - Left” event.

To change the Sprite that's assigned to an Object, use the “  Set Sprite” action, which you can find in the “Instances” section of the Toolbox.

Add this action to the event. We’ll tell this action which Sprite we want to use by dragging the correct Sprite (“spr_car_left”) into the “Sprite” field of the action.

Repeat this in the other three Events with the other three Sprites. If you run the game now, you’ll see that the car Sprite faces the direction it’s driving in:

And just like that, our basic car movement is all done! You can now drive better than three-quarters of British motorists.

Parked Cars and Collisions

The second object we need for our game is a parked car that the player has to avoid crashing into. Let’s get started by importing the two Sprites called “spr_car_parked” and “spr_car_crashed”.

To quickly import single-frame Sprites, you can also drag them from your file browser into GameMaker’s Asset Browser:

Now create an Object called “obj_car_parked”, and assign the Sprite “spr_car_parked” to it.

Then open “Room1” and drag a few parked cars into the room. Don’t worry about designing a proper level with them yet, we will get to that later.

For now, our player car will just drive through these parked cars. We'll have to expand the car Object’s behaviour for it to crash into them instead.

To do this, we can use a Collision Event, which runs whenever two objects touch each other on-screen.

So let’s add a new Event to our obj_car. In the Event selection menu, navigate to “  Collision -> Objects -> obj_car_parked”:

This will create a Collision event between our player car (obj_car) and the parked car (obj_car_parked).

In this Event, we want our player car to stop moving, which we can achieve with the same Action we used to move it: “  Set Speed”.

Add this Action to your Event, but this time, let’s leave the “Speed” field at 0 so that the car stops moving.

Let’s also add another Action called “ Set Animation Speed” (found in the “Instances” section) with a Speed of 0 to stop the Object’s animation from playing after we crash.

The last thing we want to happen when we crash into a parked car is to change its Sprite into a crashed car.

Since this is something that doesn’t affect the player car, we’ll go to our obj_car_parked, and add a Collision Event with obj_car to it.

Add a “  Set Sprite” Action in this event to change the Sprite to “spr_car_crashed”:

Play the game again, and you'll see that you can crash into the parked cars!

Parking Spots

The last Object we need before we can begin designing our levels is the parking spot that the player has to reach to complete a level.

We’ll import the parking spot Sprite (as “spr_parking_spot”), and assign it to a new Object (called “obj_parking_spot”).

Then, go back to your obj_car and add a new Collision Event, this time with obj_parking_spot.

In this Event, find and add the Action “  Go To Next Room” (under “Rooms” in the Toolbox).

When the car touches a parking spot, the game will move to the next room.

The fatal flaw in our plan, of course, is that we need actual levels for the player to progress through, which means it's time set up some parking lots!

The Room Editor

Let’s open up Room1 and take a closer look at the  Room Editor

On the left side, you'll find two panels: Properties at the bottom, and Layers at the top.

In Properties, you can modify options regarding the room, most notably its width and height. We don’t need to change anything here though.

In the Layers view, you'll find a list of all the layers in the room. These work similarly to layers in a drawing program and determine which elements appear above others. A room will always be created with an “ Instances” and a “ Background” Layer.

Switch to the Background layer by clicking on it, and you'll see that a bunch of new options appear below the layer list. This layer is used to add a background to the game. You can either use a solid colour, or a Sprite.

In the Asset Browser, import “spr_background” as a new Sprite. Then, just drag it into the Sprite field of the Background layer, and you'll see the background appear in the game:

You can only edit the Layer that is currently selected. If you ever end up not being able to move around your instances, make sure you have the Instances Layer selected!

Now, let’s switch to the Instances Layer. This is where you'll place the Instances of your Objects and design the layout of your levels.

Here are some useful shortcuts/tools for building your level:

• Hold Shift and use the left mouse button to select multiple Instances at once.

• Press Delete to remove selected Instances.

• Press Ctrl+C and Ctrl+V to copy and paste selected Instances.

• Use the “ Toggle Grid” button on the upper right side of the editor to turn off the room grid. This will allow you to place your objects more freely.

• After selecting an Object in the Asset browser, hold down Alt and use the left mouse button to “paint” with the selected Object. This allows you to quickly place a lot of neatly aligned cars next to each other!

Once you are done designing your first level (don’t forget to place a parking spot!), you can create a second level by right-clicking on our room and selecting “Duplicate”. This will create an exact copy of your first room, which you can rearrange to create your second level.

Creating the Win Screen

Once you're happy with your level(s), let’s add one more Room to the game. This will be your victory screen.

Right-click in the Asset Browser and select “Create -> Room”, and import the last Sprite called “spr_winscreen” into the game.

Asset Layers

So far, we've been showing Sprites on the screen by creating Objects for them. However, for our victory screen, we’ll use a simpler solution.

Since we don’t need the victory screen to have any sort of behaviour, we’ll add the Sprite directly into our new room.

To do this, we need to add an Asset Layer to our Room. Click the “Create New Asset Layer” button below the Layers list. This layer allows you to add Sprites directly into the room.

You can now drag the spr_winscreen Sprite into this layer. If you want to, you can also decorate it with some other Sprites and add a background.

Each layer can only contain a certain type of asset. You can’t put Sprites on an Instance layer, nor Instances on an Asset layer.

Once you're happy, go ahead and run the game to see if you can make it all the way to the victory screen!

Music and Sound Effects

Our main game loop is finished, but it'll feel a lot more complete once we add some sounds and music to it!

Import all of the sounds you downloaded into your project by dragging them into the Sounds group. Sound Editors will open up in your Workspace, where you can preview your audio files, and change various options for each of the sounds.

Let's start with some background music. It’s supposed to be played once at the beginning of the game, and should then keep looping.

Background Music 

To do this, let’s open obj_car and add a new Event to it: “ Other -> Game Start”. Add the Action “ Play Audio” to the Event and drag “sd_music” into the Sound field.

Enable the “Loop” checkbox so the music keeps repeating and never stops.

The background music will now be playing throughout the game!

Sound Effects

You should be able to implement the other sounds yourself in a similar way by adding a  Play Audio Action to the appropriate Event.

Add the following sound effects in the obj_car object:

• Play sd_honk in the “ Key-Press Space” Event, which is when the car starts moving.

• Play sd_win in the Collision: obj_parking_spot Event, which is when the car touches a parking spot.

• Play sd_crash in the Collision: obj_car_parked Event, which is when the car crashes into a parked car.

Don’t check the “Loop” option this time, since we want these sound effects to only be played once!

If you play the game now, you'll notice that all of the sounds are being played at the right times, except for one little problem: whenever you crash into a car, the crash sound keeps playing indefinitely, creating a horrible sounding effect.

Fixing the Crashing Sound

This is because of how collisions work in GameMaker: a Collision Event is triggered every frame that two Instances are touching. Since our cars don’t move away from each other after crashing, they'll continue to collide with each other for eternity, and for each frame they do, the crash sound is played.

To fix this, we’ll change the parked car into a different Object after we collide with it, which will only trigger one Collision Event!

Create a new Object called “obj_car_crashed” and give it the “spr_car_crashed” Sprite.

Now go to “obj_car_parked” and open its Collision Event with obj_car.

Instead of changing only the Sprite, we now want to change the whole Object to be a different one, so let’s remove the " Set Sprite" Action and instead add the “ Change Object Instance” Event.

Then, drag “obj_car_crashed” object from the Asset Browser into the Object field.

Changing an Instance’s Object will change certain attributes of the Instance, like its Sprite, but keep others, like its current position in the room, scale, and movement.

You can now run the game again to see that the crash sound only plays once as intended.

Particle Effects

One easy way to make your game feel more polished is by using particle effects. Let's add a couple into our game:

• A dust explosion that plays on crashing into a parked car

• A dust trail that our car leaves behind while driving around

To add the dust explosion, go to obj_car_parked, and open the Collision Event with obj_car.

Add the Action “ Do Effect” (found under “Particles”).

You can change a couple of attributes of the Effect in the Action. For this one, let’s set the “Type” to “Explosion”, “Where” to “Above Objects” and “Size” to “Large”.

The “X” and “Y” fields determine the position at which the effect will be displayed. Here, enable the “Relative” boxes next to both. This will make the effect appear at the position of our object instead of at the absolute position (0,0), which would be the upper left corner of the room.

However, we also need to add an offset to the effect, so it appears at the centre of the car and not in the upper left corner. To do this, set the “X” value to 53 and “Y” to 33 (half of the width and height of our Sprite).

Lastly, change the Colour to a light grey.

For the dust trail, let’s open obj_car and add a “ Step -> Step” Event to it. The Step Event runs for every single frame of the game while our object exists, and it’s perfect for the effect we're trying to achieve.

Add another “ Do Effect” Action here, and enter the following values:

• “Type”: “Smoke”

• “Where”: “Below Objects”

• “Size”: “Medium”

• “X”: “53” (Relative enabled)

• “Y”: “39” (Relative enabled)

Set the colour to a dark grey tone.

Our game is almost complete now, with music, sounds and particle effects.

There’s just one last tiny thing we’ll have to fix…

Bugfixing

You may or may not have noticed it already while playing, but there's actually a pretty game-breaking bug we've left unaddressed.

After you crash into a car, you can still use the arrow keys to turn around, and even press Space to start driving again!

This is because we’ve told our car that whenever we press the spacebar, it’s supposed to start driving. What we need to tell it is to only drive if it isn’t currently colliding with any other cars.

To fix this, we can use something called a condition.

Go into the “ Key Press - Space” Event of obj_car and add an Action called “ If Any Object At Place”.

This action works a little differently from the ones we have been using so far because instead of telling our Object to perform a specific action, it allows us to control when other actions run.

If we drag the already existing " Set Speed" action to the right side of our new block, we'll see that the two become connected by a green line:

This means that the “Set Speed” action is now dependent on the “If Any Object At Place” condition. When the condition is fulfilled, the dependent action will be performed, otherwise it'll never run.

There are many different kinds of conditions. “If Any Object At Place” checks for a collision with objects at a certain place in the room.

We want to check for a collision at the instance’s own position, so we'll check the “Relative” boxes next to “X” and “Y”.

We only want to start driving if a collision is NOT found, so also check the “Not” box. (Otherwise, we would only be able to start driving if we are already colliding with something.)

We can also make the “  Play Audio” action dependent on our condition by dragging it directly to the right side of it.

Now, all we need to do is add the exact same condition to our four " Key-Press" events, so the arrow keys won’t turn the car once it's crashed. And voilà, our game is now bug-free!

Congratulations: you just made your first game in GameMaker!

Continue adding more levels and gameplay features, and upload it to GX.games to show off your creation to your friends and family.

If you're ready to move on to a platformer, arcade classic, or adventure game, check out our other tutorials.

Happy GameMaking!