144 ◾ HTML5 Game Development from the Ground Up
implement a tile highlighting mechanism to point out the tiles that
can actually be moved.
3. Turky: placement and movement, here we will dene where Turky
starts his adventure and how it moves.
4. Sly, Foxy, and Otto, in this section we will take care of Sly, Foxy, and
Otto and how they should become more dangerous aer each level.
5. Timer and bonus items, where we are going to add dierent bonus
items as well as other elements like a timer.
10.1 LAYOUT AND SHUFFLING
Originally, Turky on the Run was developed with a web browser and the
iPhone 3GS as target platforms, so great care was taken to keep resources
as low as possible and to work on the 3GS low-resolution screen of
480×320 pixels, relying on the up-scaling abilities of Construct 2 to adapt
to other devices. I will maintain the original 480 × 320 layout size here, but
if you prefer, feel free to design for a higher resolution and scale all values
Once our new empty project is open and the layout size set, let’s rename
the Layer 0 to “Action,” set its background color to black, and then add
a new layer named GUI, like we did for the other projects. We may also
want to add a Debug layer to display helpful text while the game is run-
ning and monitoring dierent variables.
We saw in the game design document that our maze will consist of a
grid made by four rows and ve columns, making enough room for 19
tiles and one empty space. Specically, we will have tiles of seven dierent
types according to the paths they represent, shown in Figure10.1.
Start by adding a new sprite for each of these and import the graph-
ics accordingly (you can nd these in the downloadable game project le
or draw your own). As usual, name each sprite in a meaningful way, for
example, the crossroad could be t_X, with t standing for “tile,” the vertical
FIGURE 10.1 The dierent tiles that will make up our maze. In the game project
these are named as: t_X, t_V, t_H, t_LD, t_DR, t_UR, and t_LU, respectively.