Platform-Style Video Games with Construct

Adding Layers to Organize the Layout

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

The video demonstrates how to create layers to organize the content of each game level.


  • Construct 2
  • Layout
  • Layers

About this video

Lee Stemkoski
First online
15 February 2019
Online ISBN
Copyright information
© Lee Stemkoski 2019

Video Transcript

Lee Stemkoski: The final setup we’re going to do, so we want to keep our project organized just like you use folders or directories on a computer system. On a game, we use layers to organize our sprites. So in the top right panel, you’ll see two tabs, one that says Projects, one that says Layers. Go ahead and click on the Layers tab. And by default, we have just a single layer. We’d like to add some more to work with. So let’s click on that plus icon three times and we’re going to rename each of these layers starting with Layer 0, which appears on the bottom. I’ll click on Layer 0, then click that pencil icon to rename it. I’m going to name that Background. I’ll click on Layer 1 next, click on the pencil icon to rename that to Map. That’s where we’ll put our tilemap later. And I’ll click on Layer 2, click on the pencil icon to rename that to Main. That’s where we’ll eventually put most of our sprites and other characters, and then we’ll click on Layer 3. Click on the icon. We’ll rename this User Interface. This is where we’ll put a lot of texts displays that we’ll use to convey information to the player.

One final thing we need to do, these layers are going to scroll as the player moves across the screen from left to right as the camera follows the player character, but the User Interface layer should not scroll, right? The texts stays fixed across the top of the screen, so we’re going to change some properties of the User Interface layer. So while this is selected, if we look at the Properties panel over to the left, we’ll see that we’re looking at Layer properties for the User Interface layer. We’d like to change something called the Parallax. The parallax is the rate at which the layer scrolls in each direction. Right now it’s set to 100, 100. Think of those as percentages. Since we want the user interface to not scroll, we’re going to change that to 0. Let’s go ahead and delete that and type in 0, 0 and press enter. This will make the User Interface layer not scroll at all.

All right. The final thing we want to do is save this project. So then we’ll go to the File menu and there’s two options, and this is sometimes a little bit confusing. You can either Save As Project or Save As a Single File. For simplicity, I always want to save this as a single file. Saving as project, that creates a directory structure, which is interesting if you need to alter individual files. Saving it as a single file makes it more portable, easier to transfer from system to system. So I’m going to choose Save As Single File. I’ll go ahead and put this in our Downloads folder. I’ll type in a name, Jumping Jack. It saves with the capx extension. C-a-p.x. And this file can be opened by Construct later. And later on, for a quick save, I can click on the save icon in the toolbar at the very top.

All right, we’ve done all the basic setup for our game. In the next video, we’ll start adding some objects to our scene and start building our world.