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

101
Chapter 8
Kitty & Katty Development
K
  K  going to be developed as a PC/browser game, so
our starting resolution should be on the low end of the spectrum
to allow people with old computers and monitors to enjoy it without big
issues: limiting our window size to 800 × 600 pixels would be ne in
this case.
Start a new project and dene the layout and screen dimensions accord-
ingly, together with a “letterbox scale” option to easily accommodate
larger (or smaller) resolutions. e rst thing we should take care of now
is setting up the game structure as described in Figure8.1.
8.1 GAME STRUCTURE
To implement the game structure we just dened, we need to add dierent
layouts to the project, one for each part: splash screen, high score table,
level selection, and then the actual levels. We can add them one by one by
right clicking on the Projects tab, Layouts folder, and select Add layout as
shown in Figure8.2.
When adding a new layout, Construct will also ask us if we’d like to
add a new event sheet to be associated with it. Lets do so as well (event
sheets can be added any time by right clicking on the event sheet folder
and selecting the appropriate command, so don’t worry if you forget about
this while adding a layout).
In the end, aer we rename and resize all layouts accordingly, we should
have something like Figure8.3, and then we should update our project
properties so that the application knows which layout needs to be loaded
rst. In our case it will be the splash screen, as shown in Figure8.4.
102  ◾    HTML5 Game Development from the Ground Up
FIGURE 8.2 Adding a new layout.
FIGURE 8.3 Layouts and event sheets for our game.
Game Over
Game
Select Level
High Scores
Next level
unlocked
Submit Hi Score
Splash Screen
FIGURE 8.1 e game structure we want to implement for Kitty & Katty.
Kitty & Katty Development  ◾    103  
Lets start by implementing the splash screen then. We are going to
keep things extremely simple here (but you can of course let your imagi-
nation and artistic creativity run wild), so all we will have is a big text with
the game title and, possibly Kitty and Katty sprites.
*
Once we set this up,
we need to implement the most crucial component of the framework: its
navigation system.
We already used buttons in Moon Wolf, and, indeed, using buttons to
navigate from layout to layout is clearly the easiest route. However, we
wont do that here. e reason is that the Button object is specic to the
Web and might not work on other platforms if later we decide to port and
wrap our HTML5 game by using other tools. Even if we are planning this
game to be a PC/web title only, it is always a good practice to keep as many
opportunities open as possible.
For this reason, we are going to make our own buttons by using
sprites, but there is also another aspect we should consider before
choosing our approach: web games can also be played in countless
different resolutions, and sprites may not always scale that well. To
work around this problem, Construct 2 offers the 9-patch object. A
9-patch image is subdivided in nine different areas, eight small ones
encompassing the edges and one big central one (Figure8.5), so when
we need to stretch the image to fit a different resolution, we can have
much finer control on each area and decide whether to “stretch” or
“tile” them (“tile” means repeating the same section over and over)
*
I’ll be using free PD art from www.clker.com.
FIGURE 8.4 Deciding the rst layout to load in the project properties.

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