Construct 2 was the first game engine I fell in love with. I have made my first complete game with it, and overall it is a great tool for beginner devs, those who are not very familiar with coding, or for devs who just want to make a 2D game quicker. However, Scirra will be retiring Construct 2 soon and is now encouraging people to use its successor: Construct 3. They are, basically, the same engine, but C3 has additional features that make our lives even easier and allow us to achieve even more with this cool engine.
So, this is my first tutorial in a series meant to introduce the basics of Construct 3. And if you are still using C2, don’t worry! This tutorial will probably fit your needs too.
In this first tutorial, I’ll teach you how to code the basic features of a side-scrolling platformer in this engine, step by step. Both C2 and C3 are paid game engines, with monthly and yearly plans, but C3 has a free version that you can launch in your browser or download as an app, available here. Just create an account, and you’re good to go. It has some limitations for those who want to make a full and longer game, but it should be enough for this tutorial. So, let’s begin!
1 Once you open Construct 3, go to Menu → Project → New to create a new project.
For this tutorial, let’s set up our project like this and click on Create:
TIP: You can zoom in and out on your project by holding the Ctrl key and using the scroll in your mouse.
2 Now you can start working in your game. Remember that by clicking on the project’s folder at the top-right corner, you’ll open the Properties tab, where you can change the name of your project and other settings at any time.
Since you just created a new project, it has only one layout. Layouts are screens, each with their own Event Sheets (more on those later), that divide your game. For example, if you’re making a platformer with multiple levels, the most practical thing to do is to make each level in their own layout.
By clicking anywhere on the layout (whether it’s on the gray area or the white area), you’ll open the Properties tab of that specific layout, including name, size, etc.
TIP: When renaming your Layout, give the same name to its Event Sheet, to save you some time and confusion in the future.
Since there will be only one level in this tutorial, I won’t change the name of the layout. What I will change, though, is the Size property from 2560 x 1440 to 2560 x 720. So, it looks like what you saw in the previous image.
The dotted line marks the part of the layout that will be visible on the screen when the player is standing still. To change its size, you just need to go to the project’s properties again and change the Viewport Size property. But we won’t be doing that here.
3 That’s the part when we begin to put assets in our project. I’ve made a folder with some simple sprites I’ve made for this tutorial. You just need to download it by clicking the button below and extract the file.Download “SSP Assets”
SSP-assets.zip – Downloaded 776 times – 1.58 KBNow, let’s start by placing a floor in our game. Right-click anywhere on the layout and select Insert New Object.
A pop-up window appeared to let you select the type of your object. Select the Tiled Background type and name it “spriteFloor”, then clicking Insert.
Your cursor is now a cross. Click anywhere to open the editor. Click on the folder icon on the top-left corner to open a file and then select the “spriteFloor.png” file.
Close the editor window and you’ll see the object will be a small square on the screen. Place it on the bottom of the layout and stretch it to both its extremities, like this:
Since the object’s type is the Tiled Background type, you can stretch it however you want and the pattern will follow it without losing quality. That’s the same object type most used for making backgrounds, like the sky or walls.
4 When clicking on the spriteFloor object, you can see its properties on the left, as usual. Click on the Behaviors property and another window will open.
Then, click on “Add new behavior” and select the Solid attribute, clicking on Add.
Now, close the Behaviors window. This behavior should prevent the player’s character from falling through the ground.
5 Speaking of the player’s character, it’s time to include them here. Select once again Insert New Object, select the Sprite type and name it “spriteCharacter”. Then, click on Insert.
On the editor window, click on the folder icon again and select the “spritePlayer.png” file. After that, click on the “crop” button to bring the margins closer to the sprite.
Then, click on the “collision polygon” button and adjust the sprite’s collision to look like this:
Close the window and place the player object close to the corner and above the floor, like this:
Then, close both Behaviors windows. This behavior allows the object to move and receive movement input from the player, so it’s able to move to the left and to the right and to jump. You can change the behavior’s properties, like Gravity, Max speed, Acceleration, and others however you like to fit better with your type of game. In this tutorial, I’m leaving those properties like this:
The Default Controls box has to remain selected if you want your character to move with the arrow keys. If you want the movement controls to be custom, you have to deselect the box before coding the controls of your choosing. Here, I’m going to leave it selected.
So, if want, you can test your game now by clicking on the “preview” button (looks like a “play” button) on the top of the screen. Your result should be this:
Select the player object and open the Behaviors window again. Then, select the Scroll To behavior and click on Add.
After that, you should also add the Bound to Layout behavior, so the player object doesn’t fall off the map.
Let’s test it again and take a look at the changes!
And just like that, we are done! We have a very basic platformer without even having to code any events! We will be covering them in the next tutorial, for sure. But for now, I hope this was useful to you, and until the next one!
