KITTY, KATTY, AND THE PLAYER

Now that we have the first level designed, we need to populate it. Let’s start by importing a suitable image for Kitty and Katty, if we haven’t done so already, and then place them in some not so easy places to reach. For example, we can place one at the very top of the mountain, accessible only by jumping on a cloud, while the other could be on the midlevel platform on the right, as shown in Figure 8.18. There’s no need to add any behavior to them.

We can now start thinking about our main character.

For designing our hero, I decided to use the Tim character sprites from the famous award-winning game Braid by Jonathan Blow, since David Hellman, the artist responsible for Braid’s gorgeous graphics, has gener-ously made these assets freely available to the indie community.^*

To start, insert a new sprite object in the layout and call it Tim, in honor of Braid’s protagonist.

Once in the image editor, we can start adding the graphics. I divided all Tim images into individual frames but, naturally, Construct 2 also allows you to import sprite sheets (all frames included in one single, big image) so you can choose the approach you prefer for this.

Let’s start with the Default animation, which is not really an anima-tion, since we are going to use only one frame. Let’s rename it Idle and import the still Tim sprite. To add another animation, right click on the Animation window of the image editor and select the proper command (Figure 8.19).

We have to do this a few times: starting with a Running animation that will look like in Figure 8.20.

* http://www.davidhellman.net/braidbrief.htm

FIGURE 8.18 A detail of the level layout, showing Kitty and Katty ready to be rescued.

Kitty & Katty Development    ◾   115  

Note that, as we said, each frame can be added individually or by importing a sprite sheet where all frames, each having exactly the same dimensions, are spread regularly across the image. This can be done from a specific menu, as shown in Figure 8.21.

FIGURE 8.19 Adding a new animation in the image editor.

FIGURE 8.20 The running animation, made by four frames.

The running animation also should have a left counterpart. We will do this at runtime, but it’s useful to know we can easily reverse an entire animation if needed in the editor itself by shift clicking on the reverse icon as shown in Figure 8.22.

Once the running animation is done, we also have to add a jumping animation (one single frame that we will use also for falling) and a simple two-frame animation for climbing. In the end we will have all the anima-tions as shown in Figure 8.23.

Let’s not forget running and climbing animations need to loop: we can set this, and other parameters like animation speed, via the Animation properties tab displayed when we select a specific animation in the Image Editor (Figure 8.24).

We need now to set up our character and play the different anima-tions as appropriate. Construct provides us with a very helpful Platform

FIGURE 8.21 Right click on the Animation frames window to import frames from individual images or a sprite sheet (here called sprite strip).

FIGURE 8.22 Mirroring an animation is a very simple process that can be done in two different ways: we can specify a running left animation on its own in the image editor by copying and mirroring an existing one frame by frame (like in this figure) or mirroring the whole animation later at runtime via events (this is actually what we will be doing in our game).

Kitty & Katty Development    ◾   117  

FIGURE 8.23 We will need all these different animations in our game. Here a frame from the Climbing animation.

FIGURE 8.24 Setting the running animation loop property to yes.

behavior that takes care of all the low-level work for us, but there is a small caveat. Adding the Platform behavior to the animated sprite itself can give us collision problems due to the changing nature of animated sprites, with weird results like our character getting stuck on a platform or ledge if a collision is registered during any animation frame, for example. It is then recommended to have a very simple sprite, like a rectangle, of the same size of the character (possibly a few pixels smaller, depending on the shape of your sprite and how you want to trigger the contact with the platforms) and add the Platform behavior to this instead. The animated sprite will then be attached to this sort of invisible mask and follow it accordingly.

Add a new sprite, name it Player, and resize it to be like our idle Tim character. Then add the Platform behavior to it while also adding the Pin behavior to Tim. Figure 8.25 shows both Tim and its Player mask in the layout editor.

To stick the Player sprite to the animated Tim sprite by using the Pin behavior, we need to move to the event sheet. Once there, add a new event for Tim, selecting the Pin/Is pinned event. Invert it (by right clicking on the event and selecting the invert command) so that the event is triggered only if Tim has not been pinned yet, and then define an action for Tim by

FIGURE 8.25 Tim with its mask in the layout, also showing the mask’s Platform properties. I filled the latter with a bright yellow color so I could easily see it against the background when testing. You can start with these values for speed, jump strength, etc. and then tweak them while playtesting to make the overall movement feel more natural in your specific level. Don’t forget to add the Pin behavior to make it stick to Tim and change the mask’s Initial visibility property to Invisible to make it disappear during an actual game!

Kitty & Katty Development    ◾   119  

using the Pin object and pinning it to the Player as shown in Figure 8.26.

If we play the layout now, we will be able to move Tim around (with no animations yet) by using the cursor keys, but, in reality, we are actually controlling the underlying Player sprite, and Tim is simply being dragged around thanks to the Pin behavior!

To finally play the animations, we need first to check the status of the Player sprite (whether it is on the floor or jumping, for example), then check which key is actually being pressed (are we going left or right?) and finally trigger the right animation sequence.

Let’s go in order and let’s begin with the running action. We need to start with the Player sprite and select its is on floor event from the Platform behavior. This is to be followed by two subevents, one for each running direction, i.e., a keyboard event for the right cursor key, key is down, and one for the left cursor key. For the corresponding actions we need to choose our animated sprite, Tim, and pick the select animation action, writing the name of the animation we want to play (running, in this case) while leaving the from Beginning parameter set so that the ani-mation will always start from its first frame.

Now, if you followed these steps so far, we should not forget we have Tim running only toward the right, and we still have to mirror the whole animation when running left! To do so we need to add another action:

select Tim and, in the Appearance group, pick the Set mirrored action.

Set the flag to mirrored when running left and not mirrored when run-ning right.

We also want the animation not only to stop immediately when we release the cursor key, but to go back to its idle state right away. For this we need to add another subevent for the Player object. Among its events, select On stopped among its Platform: Animation triggers group, and then add an action for Tim setting the animation to idle. The sequence of events is shown in Figure 8.27.

Now we need to do something similar when we are jumping or falling.

FIGURE 8.26 The event sheet for our level1 layout, here superimposing and pin-ning the animated Tim sprite to the invisible Player object.

Make a new event with two conditions: Player/Platform On fall and Player/Platform On jump. Then select both, right click on the event, and choose Make ‘Or’ block so that the following action will be triggered when either of the two events happen (obviously, they can’t happen together!).

The action will simply take Tim and set the animation to Jumping, since both are sharing the same animation frame.

Last, we need to take care of resetting things once Tim touches the ground, so we need a new event Player/Platform On landed bringing back the Idle frame. But what if we touch the ground and keep run-ning right away without stopping first? We need to take care of this case as well, so let’s add a subevent to the event we just defined to be triggered if the sprite is moving, i.e., Player/Platform is moving where we restart the Running animation. All this sequence is exemplified in Figure 8.28.

Now that we can run and jump, as well as fall from a platform, we need to take care of climbing.

The first thing we need to do is check whether we are overlapping with one of the possible vertical paths, named climber in my case, we placed in the level earlier. Pick the Player object and select the Is overlapping

FIGURE 8.27 The events for animating the sprite while running left and right and resetting the animation to idle as soon as we stop moving.

FIGURE 8.28 The events for having Tim behave properly when jumping, falling, and also hitting the ground running!

Kitty & Katty Development    ◾   121  

another object event in the Collisions group, then we need to define two subevents to check whether we have an up or down key press and move accordingly, while also setting the proper climbing animation.

There is something tricky here that requires our attention though: the Platform behavior won’t allow us to move properly! So we need to define an action first that disables the Platform behavior through the Set enabled action. Only then we can proceed in moving our player up or down a spe-cific amount, which we can define as an instance variable for the Player object (named, for example, ClimbingSpeed). Once we are back on the ground (i.e., overlapping with a path object again or not overlapping any-more with the climber path), we need to remember to restore the Platform behavior once again or the game won’t be playable any more! All these events and actions are exemplified in Figure 8.29.

Now that we can move around properly, we need to be sure we stay within the layout boundaries. Left and right edges are easy to control: we can either check for player’s coordinates through events or add a new sprite, naming it “wall,” add a solid behavior to it, and then use two instances of it to frame the layout, placing them just outside the viewable game field to stop the player from running away. To minimize the number of events in the game (don’t forget the free version of Construct 2 allows only for 100 events in a game), I’d suggest we take the latter approach.

FIGURE 8.29 The events related to climbing: we need to disable the Platform behavior when climbing and reenable it as soon as we get back on the platforms.

The climbing speed is defined by an instance variable set, for example, to 20 pix-els per second (note the dt in the formula when updating the y coordinate since now we are not using a predefined behavior for handling movement).

Once this is done, we still need to take care of the hole in the middle of the lower path in Figure 8.16. If we fall in there we also want the player to lose a life and then respawn at the hut.

Let’s proceed in order. First, we add an instance variable to the Player, name it Lives, and initialize it to 3. We should also display the lives indica-tor in the top right corner of the screen. The simplest way to do this is to add a new sprite for each life. We can call these life1, life2, and life3 and add them to the GUI layer. Import the Tim idle sprite for each of them, and place them on the top right corner of the screen, in order from life1 to life3, as in Figure 8.30.

When Tim dies, we want the game to remove these accordingly. We can achieve this effect in several ways, and I will use this opportu-nity for introducing the concept of functions. As in any programming language, functions are used here to define snippets of code that can be called any time it is needed from another part of the program. To enable the use of functions in Construct 2, we need first to add the Function object to the game. Do so now. Then let’s define a new event for the Player sprite and select Is outside of layout (within the Size &

Position group). The corresponding actions would be to change the Player position in front of the hut, subtract 1 to its instance variable Lives, and then call the proper function to take care of removing one life indicator, eventually going to the game over layout if there are no lives left.

When using the Function object, we can call a specific one by name and also add eventual parameters to be passed for further comparisons and processing. In our case, let’s call the function LifeLost, and we also add the player lives as parameters, as shown in Figure 8.31.

FIGURE 8.30 The three life indicators in place.

Kitty & Katty Development    ◾   123  

We have to declare the function now. Add a new event and select the function object. Select On function and then specify its name (LifeLost).

The next step is to add three different subevents where, in each, we check the value of the parameter and destroy one life indicator accordingly.

When lives get to 0, we also go to the Game Over layout. The function is shown in Figure 8.32.

Try to play the game, and have fun falling in the crevasse to check the function is actually working!

8.4 RESCUING OUR PETS AMIDST FALLING BOULDERS