Beginner's guide to Construct 2





520,138 visits, 2,756,926 views




This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Adding a layer

Okay, now we want to add some more objects. However, we're going to keep accidentally selecting the tiled background unless we lock it, making it unselectable. Let's use the layering system to do this.

Layouts can consist of multiple layers, which you can use to group objects. Imagine layers like sheets of glass stacked on top of each other, with objects painted on each sheet. It allows you to easily arrange which objects appear on top of others, and layers can be hidden, locked, have parallax effects applied, and more. For example, in this game, we want everything to display above the tiled background, so we can make another layer on top for our other objects.

To manage layers, click the Layers tab, which usually is next to the Project bar:

You should see Layer 0 in the list (Construct 2 counts starting from zero, since it works better like that in programming). Click the pencil icon and rename it to Background, since it's our background layer. Now click the green 'add' icon to add a new layer for our other objects. Let's call that one Main. Finally, if you click the little padlock icon next to Background, it will become locked. That means you won't be able to select anything on it. That's quite convenient for our tiled background, which is easy to accidentally select and won't need to be touched again. However, if you need to make changes, you can just click the padlock again to unlock.

The checkboxes also allow you to hide layers in the editor, but we don't need that right now. Your layers bar should now look like this:

Now, make sure the 'Main' layer is selected in the layers bar. This is important - the selected layer is the active layer. All new inserted objects are inserted to the active layer, so if it's not selected, we'll be accidentally inserting to the wrong layer. The active layer is shown in the status bar, and also appears in a tooltip when placing a new object - it's worth keeping an eye on.

Add the input objects

Turn your attention back to the layout. Double click to insert another new object. This time, select the Mouse object, since we'll need mouse input. Do the same again for the Keyboard object.

Note: these objects don't need placing in a layout. They are hidden, and automatically work project-wide. Now all layouts in our project can accept mouse and keyboard input.

The game objects

It's time to insert our game objects! Here are your textures - save them all to disk like before.




and Explosion:

For each of these objects, we will be using a sprite object. It simply displays a texture, which you can move about, rotate and resize. Games are generally composed mostly out of sprite objects. Let's insert each of the above four objects as sprite objects. The process is similar to inserting the Tiled Background:

1. Double click to insert a new object

2. Double click the 'Sprite' object.

3. When the mouse turns to a crosshair, click somewhere in the layout. The tooltip should be 'Main'. (Remember this is the active layout.)

4. The texture editor pops up. Click the open icon, and load one of the four textures.

5. Close the texture editor, saving your changes. You should now see the object in the layout!

Note: another quick way to insert sprite objects is to drag and drop the image file from Windows in to the layout area. Construct 2 will create a Sprite with that texture for you. Be sure to drag each image in one at a time though - if you drag all four in at once, Construct 2 will make a single sprite with four animation frames.

Move the bullet and explosion sprites to somewhere off the edge of the layout - we don't want to see them when the game starts.

These objects will be called Sprite, Sprite2, Sprite3 and Sprite4. That's not very useful - things will quickly get confusing like this. Rename them to Player, Monster, Bullet and Explosion as appropriate. You can do it by selecting the object, then changing the Name property in the properties bar:


  • Order by
Want to leave a comment? Login or Register an account!