Well done for choosing Construct 2! Let's get started making your first HTML5 game. We'll be making the 'Ghost Shooter' demo game.
Try it out here first so you know what we're aiming for: a player who looks at the mouse, moves with arrow keys, and shoots monsters with the mouse. You'll learn everything you need to know to make a simple game - from layers to the event system!
Note: please don't ask for help in the comments of this tutorial! Instead, head over to our forum to get the best possible response to any questions you may have.Alternative tutorial
There is an alternative beginner's guide:
How to make a platform game, aimed at making a jump-and-run platformer rather than a top down shooter. You can start with either tutorial, but we highly recommend you complete both to get a good idea how to make both kinds of game!
Installing Construct 2
If you haven't already, grab a copy of the latest release of Construct 2
here. The Construct 2 editor is for Windows only, but the games you make can run anywhere, such as Mac, Linux or iPad. Construct 2 can also be installed on limited user accounts. It's also portable, so you can install to a USB memory stick for example, and take it with you!
Getting started
Now you're set up, launch Construct 2. Click the
File button, and select
New.
In the
New Project dialog, you don't need to change anything. Just click
Create project. Construct 2 will keep the entire project in a single
.capx file for us. You should now be looking at an empty
layout - the design view where you create and position objects. Think of a layout like a game level or menu screen. In other tools, this might have been called a
room,
scene or
frame.
Inserting objects
Tiled Background
The first thing we want is a repeating background tile. The
Tiled Background object can do this for us. First, here's your background texture - right click it and save it to your computer somewhere:
Now,
double click a space in the layout to insert a new object. (Later, if it's full, you can also right-click and select
Insert new object.) Once the
Insert new object dialog appears,
double click the Tiled Background object to insert it.
A crosshair will appear for you to indicate where to place the object. Click somewhere near the middle of the layout. The
texture editor now opens, for you to enter the texture to tile. Let's import the tile image you saved earlier. Click the folder icon to load a texture from disk, find where you downloaded the file to, and select it.
Close the texture editor by clicking the X in the top right. If you're prompted, make sure you save! Now you should see your tiled background object in the layout. Let's resize it to cover the entire layout. Make sure it's selected, then the
Properties Bar on the left should show all the settings for the object, including its size and position. Set its position to 0, 0 (the top left of the layout), and its size to 1280, 1024 (the size of the layout).
Let's survey our work. Hold
control and scroll the
mouse wheel down to zoom out. Alternatively, click
view - zoom out a couple of times. You can also hold space, or the middle mouse button, to pan around. Neat, huh? Your tiled background should cover the entire layout now:
Hit control+0 or click
view - zoom to 100% to return to 1:1 view.
(If you're impatient like me, click the little 'run' icon in the window title bar - a browser should pop up showing your tiled layout! Woo!)