• No results found

BACKGROUND AND PLATFORMS

In document html5 game developpement (Page 131-135)

Kitty & Katty Development

two 9-patch objects, one each for the off and on button state (with the lat- lat-ter starting as invisible and placed to exactly superimpose on the former)

8.2 BACKGROUND AND PLATFORMS

Off to the actual game now! Open the game layout (in Figure 8.3 we called it level1) and start drawing a sprite or importing an image for the back-ground mountain (for this, like for most other assets in this game, I took

* For a full state save, suitable for complex action or role-playing games where we want to take a

“snapshot” of the whole game to continue it later, Construct 2 provides a proper save and load feature through the System object.

FIGURE 8.13 Checking for the existence of a LevelReached key to initialize the player_level variable when the game starts. If it doesn’t, we define it once and for all.

Kitty & Katty Development    ◾   111  

an image from the public domain clipart collection website Clker.com).

You may also want to change the layout background color to a nice light blue to simulate a bright summer sky day. This is actually done via the layer, so select the main layer where the action takes place and, in its prop-erties tab, change the background color. For example, I picked one with RGB values of 0, 204, 255.

Once the mountain background is in place, we should add a series of platforms to help our hero climb around and reach the mountain peak.

Add a new sprite, naming it, for example, path. This can be a simple brown filled rectangle that we are then going to stretch and modify to make plat-forms of different sizes across the mountain.

Place the path sprite in the layout and click on Add/Edit Behaviors in its Properties Tab. To define the typical behavior we would expect from a platform, Construct gives us two options: a solid behavior and a jump through one. The difference being that the latter allows for characters to jump on them from underneath while, on the former, we would just bump our head on a solid wall and fall back. Here, we are going to use jump through. Once this is done, add also the Physics behavior and set the val-ues as in Figure 8.14. This is not necessary for having a proper platform-ing action, but it will be needed for interactplatform-ing with the boulders, whose movements will be controlled by the physics engine.

FIGURE 8.14 The physics properties for the path sprites, needed later when we will also add the falling boulders. Be sure Immovable is set to Yes and that we are using Bounding box as collision mask.

There are two more important elements we should add to make our platformer more interesting: moving platforms and stairs.

For the first, let’s add a new sprite in the shape of a fluffy cloud. We will place this in the upper part of the mountain, and we will let the player jump and ride it to provide an original way to the mountain top. This means we should add the jump through behavior to the sprite as well.

The “stairs” here can take the shape of a vertical, rocky path for the player to climb. For this, let’s add a tiled background object instead of a simple sprite. This will allow us to define just a small part of the image, which will be repeated over and over as we stretch it: we can make stairs as long as we like without actually deforming the sprite image! It is the same idea we used earlier with the 9-patch images when designing buttons, and it works really well. I designed the vertical path to be just a few dark gray circles (Figure 8.15), which will be repeated as needed while drawing the vertical paths in the layout.

Now we have all the elements for designing our levels, i.e., platforms and paths we can use to make them challenging yet possible, so it’s high time to start making your own actual level! Mine is shown in Figure 8.16, where you will see I also added a small hut at the lower left corner: this is where the player will start his adventure.

One more thing before moving on to the next section and adding the main characters to our game. We talked about the clouds being

FIGURE 8.15 A simple image we can use for identifying vertical paths across the mountain. Just a few dots to be repeated over and over as needed by the tiled background object.

Kitty & Katty Development    ◾   113  

moving platforms, and this is something we can do now already with-out adding any additional event: we simply need to add another behav-ior to them, specifically the Sine to make them move back and forth.

Once added, we can specify the actual movement through its proper-ties (Figure 8.17).

FIGURE 8.16 The layout for the first level of the game, featuring different plat-forms (which we can also rotate slightly) and vertical paths to climb. Note that the image for the vertical path is repeated automatically and not stretched, since it is defined as a tiled background object and not as a simple sprite. We will make the player spawn at the hut in the lower left corner of the screen (think of the big blue barrel in Donkey Kong!).

FIGURE 8.17 The sine behavior properties for the clouds. Here we can define how fast and how far the clouds can go and if the movements should also have random components or not. Experiment till you find the values that suit your level most!

In document html5 game developpement (Page 131-135)