O'Reilly logo

HTML5 Game Development from the Ground Up with Construct 2 by Roberto Dillon

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

53
Chapter 6
Moon Wolf Development
I
’    developing our rst game with Construct 2! First, we
will dene the layout and touch controls. We will also add some back-
ground music and preview our work locally on a browser. Adding cells
and a scoring system will come next, followed by the implementation of
the speed change, fuel bonuses, and simple animations. Last but not least,
we will add the sentinel and asteroids to create challenges and complete
the game plus a basic game loop to keep playing at a higher diculty level
once all cells have been collected or to restart aer the game is over.
Before we begin, a general reminder: dont forget to save your ongoing
project oen! Note also that Construct 2 automatically keeps one or more
previous saves as backup copies. (You can specify how many from the File
menu, look for the Preferences icon and then pick the Backup tab. e
default is one.)
6.1 GETTING STARTED
If you have a demo project still open, close it and start by creating a new
empty one either from the File menu or the Start page. Once you are more
experienced, it is recommended you use the provided templates to speed up
the early development stages, but for now, it’s a good idea to go through every
step to get a better understanding of what we are actually doing and why.
e rst thing we should take care of is to dene the screen size for our
game and dene how it is going to scale when it’s played on devices having
dierent screen resolutions.
Luckily for us, Construct 2 handles scaling very well, so lets change
the Full screen in browser property in the Conguration settings for the
54  ◾   HTML5 Game Development from the Ground Up
project to Letterbox scale (to access these, click on an empty area in the
layout to display the Layout properties in the right panel, then click on
the Project properties view link). But what resolution will we develop in?
Considering we want our game to work on many devices, from Windows
8 based PCs to tablets and smart phones across dierent models and gen-
erations, it’s a good idea to start with something average that can be scaled
accordingly, up or down, by the game engine itself.
For our game, I decided to target a resolution of 800 × 480 pixels,
which can be a good starting point for many wide-screen devices and is
adopted by several 7 inch Android-based tablets as well as smart phones.
Feel free, however, to change the resolution to t any specic device you
have in mind.
Our project settings should then look like those shown in Figure6.1.
Now let’s start by setting up our rst layout, by default named “Layout
1,” as the game layout, where we will prototype our gameplay. Rename
“Layout 1” as “Game” (you can do this from either the Project or the
FIGURE 6.1 e Project settings for our rst game. Here we dene the window
size and how it should scale on devices with dierent resolutions. Note that the
exact eld names, values, and order may be slightly dierent across dierent ver-
sions of Construct.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required