Animating the Player

Previous games have simply rotated the player character to face the direction in which they were moving. In this project, you will use animations instead of a single image for the character, and furthermore, you will set up the project to display a different animation depending on which direction the character is moving (north, south, east, or west), similar to the style used in classic top-down adventure and RPG games like The Legend of Zelda and Final Fantasy. The spritesheet¹ you will use is shown in Figure 4-3. Notice that this spritesheet contains the animation frames of a character walking in all four directions. The first row contains the frames for walking south, the second row contains frames for walking west, and so forth.

Figure 4-3. The spritesheet for the main character

In the layout, set the active layer to Main so that newly added objects are automatically placed on that layer. Create a new sprite, named Cleaner. In the image editor, right-click in the Animation frames window, move the mouse to Import Frames, select From Sprite Strip, and then select the image cleaner.png. This image contains three frames in each row and four images in each column, so in the Import Sprite Strip window, enter 3 next to Number of horizontal cells and enter 4 next to Number of vertical cells. Check the Replace entire existing animation box (to remove the initial blank frame). Twelve frames should appear in the Animation frames window, as shown in Figure 4-4.

Figure 4-4. Animation frames for the main character, after initial import

However, not all of these frames will be used in each animation. In what follows, you will use this animation as a base to create four animations in total, one corresponding to each direction. First, in the Animations window, click Default (the name of the current animation), and in the Properties panel on the left, change Speed to 6, change Loop to Yes, and change Ping-Pong to Yes. Then, in the Animations window, right-click the Default animation, and in the context menu that appears, select Duplicate. Repeat this two more times so that you have a total of four animations appearing in the list. Then, right-click the first animation, select Rename, and enter South as the new name. Repeat this process for the other animations in the list, naming them West, East, and North, respectively. When you are finished, this window should appear, as shown on the left side of Figure 4-5. Next, select the animation named South in the list, and in the Animation frames window, click each frame that does not correspond to the character walking south (those initially numbered 3 through 11), and press the Delete key. When you are finished, this window should appear as shown on the right side of Figure 4-5. Right-click the South animation from the Animations window, and select Preview to see how it looks; feel free to adjust the speed if you want. Then repeat this process for the West, East, and North animations, deleting the frames not required within each of the animations. When you’re finished, close the image editor windows.

Figure 4-5. Animations list and animation frames for the South animation

In the layout area, change the Cleaner sprite property Size to 48,48 and position it in the center of the lower grass area. (Since Snap to grid is currently active and the desired size is not a multiple of 32, it is simpler to change these values in the Properties panel.) Add the behavior 8-Direction, and change the properties Max Speed to 80 and Set Angle to No. (This stops the sprite image from being rotated in the direction it is moving; the animations will handle that effect.) Also add the behavior Bound to Layout. Finally, add the behavior Fade, and change Active at start to No.

Next, you will create some events that will change the Cleaner’s animation to one of the four animations you just set up, depending on which key is pressed. First, add a Keyboard object to the project. In the event sheet, create a new event with condition Keyboard - On Key Pressed, with Key set to Down Arrow. In this event, add the action Cleaner - Animations: Set Animation, and in the parameters window, enter "South" (including the quotation marks; make sure that your capitalization matches the name you entered in the Animations window earlier). Repeat this process three times, creating three more events so that pressing the left arrow key corresponds to setting the West animation, pressing the right arrow key corresponds to setting the East animation, and pressing the up arrow key corresponds to setting the North animation. You should also set up your game so that the character’s animation stops when the character is not moving. To do so, create a new event with the condition Cleaner - 8-Direction: Is Moving, and in the event sheet, right-click and invert the condition. Then add the action Cleaner - Animation: Stop. When you are finished with these events, your event sheet should appear as in Figure 4-6. Save and test your project, and verify that when you hold each of the arrow keys, the cleaner moves in the corresponding direction and features the correct animation, and when you let go of the arrow keys and the character comes to a stop, the animation should stop as well.

Figure 4-6. Events for controlling the Cleaner character’s animation

Cars

In this section, you will add some cars for the cleaner to dodge on the way across the road; the cars will vary in their appearance and speed. To begin, create a new sprite named Car. In the image editor main window, select any one of the car images that you downloaded in the beginning of the chapter. In the Animations list window, right-click Default, select Rename, and enter Car1 as the new name.² Right-click in this window again and select Add animation. Name this animation Car2, and add an image of a car with a different color. Add two more animations in this way, once again with different images; name them Car3 and Car4. When you are finished, close the image editor windows.

In the layout, add the Bullet behavior to the Car object, and change Speed to 200. Create three more instances of the Car object, and place one in each lane of the road area. In the first and third lanes, position the cars on the left side. In the second and fourth lanes, position the cars on the right side, and set their Angle to 180 (so that they are facing to the left).

Select the Car object in the first lane. In the Properties panel, near the bottom of the list (you may need to scroll down), find the property called Initial animation. Next to this property, you will see the word Default, which means that the sprite will initially display the animation named Default (or, if there is no animation with that name, it will display the first animation in the list). Change the text to Car1. Then, for the Car in the second lane, change the Initial animation property to Car2. Similarly, change the initial animations of the cars in the third and fourth lanes to Car3 and Car4. When you are finished, your layout should appear similar to Figure 4-7 (except the colors of your cars may be different). If you save and test the game, the cars should move in straight lines, eventually moving past the edges of the screen.

Figure 4-7. The layout with cars added

Next, there should appear to be a continuous stream of cars traveling along the road. One way to accomplish this would be to add the Wrap behavior to the Car object, but that will in fact be too limiting for our purposes. We want to add some variation to the gameplay by changing the properties of each Car object after it leaves the screen and before it reappears on the other side. Using the Wrap behavior and a fixed speed would result in behavior that is too predictable, and once the user sees the pattern in the car movements, it would make the game easier (possibly too easy). It also breaks the sense of immersion, since real car drivers would not act so predictably. Therefore, in this section, you will create some events that produce an effect similar to the Wrap behavior and, at the same time, allow you to modify the properties of a car (such as its speed) once it goes past the edges of the screen. To accomplish this, you will next add a new sprite, positioned off-screen, that will serve as a trigger for these actions.

Create a sprite named CarWarp. The image is irrelevant since the object stays off-screen, so you can use the paint tools (like the fill bucket or paintbrush) to color in the provided blank image however you want. When you are done, close the image editor windows, and change the size of CarWarp to 32,32. Create three more copies of this object, and position them in the margins of the layout, one in the path of each car (at the opposite end from where they start), at least one car length beyond the edge. There needs to be enough distance so that the Car objects will not collide with the CarWarp objects until the cars are completely past the edges of the layout. The positioning should be similar to Figure 4-8.

Figure 4-8. The CarWarp objects and their position relative to the Car objects

In the event sheet, create a new event with the condition Car - Collisions: On Collision With Another Object, and select the CarWarp object . The first action will re-create the warplike behavior and place the car past the edge on the opposite side of the screen. Unfortunately, there is no “move backward” action listed, but you can still make it work with the actions available. For this event, add the action Car - Size & Position: Move forward, and set Distance to -900 (if a distance is negative, then the object will move backward). Then, in the same event, add the action Car - Bullet: Set Speed, and set the speed to random(200, 400), which will select a random number in that range for the new speed. When you are finished, the events should appear as in Figure 4-9. Test your game to verify that the cars do in fact continue to reappear on the other side of the screen, traveling at different speeds each time.

Figure 4-9. An event for a wraplike behavior

Displaying Messages with Text Objects

Next, you will set up win and lose conditions and display this information on the screen using a new type of object: a Text object . Text objects can display any message you choose and can change their contents while the game is running, so they are more flexible than using sprites that contain images of words (which you have used in the games from the previous two chapters). To begin, right-click in the layout area, select Insert new object, and click Text once (and not Text box) from the available choices; for the name, enter TextGameOver, and click the Insert button. Once on the layout, you will be changing many properties of the TextGameOver object. First, change Layer to UI, change Size to 640, 64, and position it over the bottom half of the Stone object. To make the displayed text easier to see, in the Properties panel, locate the property named Font, and double-click the name of the font next to it. A dialog window will appear, listing the names and variations of all the fonts installed on your computer, as shown in Figure 4-10. Here, keep the default Font set to Arial, change Font style to Bold, change Size ³ to 28, and click the OK button. Next, click the Horizontal alignment property, and from the drop-down menu that appears on the right, select Center. Repeat this process with the Vertical alignment property, changing its value to Center as well. Now you should see that the text is nicely centered in its box. If you want, you can also click the Color property, and in the drop-down menu that appears on the right, you can select from many different colors. If you choose to change the color, be sure to pick a color that can be easily seen against the background color. Finally, set Initial Visibility to Invisible. When you are finished, the top part of your layout should appear similar to Figure 4-11 .

Figure 4-10. Font selection window for the Text object

Figure 4-11. Displaying customized text on the layout

The lose condition, as you may have guessed, will be when a car collides with the cleaner. The win condition will be when the cleaner reaches a trash can on the other side of the road, which you will now set up. Add a new sprite, named TrashCan, using the image trashcan.png. Set its Layer property to Main. Change its size to 38,48, and position it in the center of the topmost Grass background .

Next, you will set up the events for winning and losing the game, each of which will cause a different message to appear in the Text object. When the game is over, you will also make the cleaner fade out and freeze the cleaner in place (it shouldn’t move while it is fading) by disabling user input for the cleaner.

In the event sheet, create a new event with the condition Cleaner - Collisions: On Collision With Another Object, and select the TrashCan object. Then, add the following actions to this event:

• Add TextGameOver - Appearance: Set Visible, and set Visibility to Visible.

• Add TextGameOver - Text: Set Text, and next to Text, type "You Win" (including the quotation marks).

• Add Cleaner - Fade: Start Fade.

• Add Cleaner - 8-Direction: Set Enabled, and set State to Disabled.

When you are finished, this event will appear as shown in Figure 4-12. Save and test your project to make sure the You Win message appears as expected when the Cleaner touches the trash can.

Figure 4-12. Event for the win condition

It is particularly important to understand the use of the quotation marks in the Set Text action. Quotation marks are used to specify a literal expression, in a similar way to how they are used in everyday language. For example, if you were asked to write down the name of this book, you would write Game Development with Construct 2. However, if you were asked to write down “the name of this book”, the quotation marks indicate that you should repeat those words exactly; you would write the name of this book. The same situation arises when using the Set Text action: using quotation marks will cause that exact text to appear; if no quotation marks are used, the Construct game engine will assume that whatever you entered is an object property or a variable and will try to determine its value. If there is no property or variable, Construct will display a pop-up message that either says Unknown expression or Syntax error, as shown in Figure 4-13 .

Figure 4-13. What could happen when a parameter is mistyped

Next, you will add the event corresponding to the lose condition for the game. In the event sheet, create a new event with the condition Car - Collisions: On Collision With Another Object, and select the Cleaner object. Then, add the following actions to this event:

• Add TextGameOver - Appearance: Set Visible, and set Visibility to Visible.

• Add TextGameOver - Text: Set Text, and next to Text, type "You Lose".

• Add Cleaner - Fade: Start Fade.

• Add Cleaner - 8-Direction: Set Enabled, and set State to Disabled.

This event should appear as shown in Figure 4-14. Save and test your project to verify that the You Lose message appears as expected.

Figure 4-14. Event for the lose condition

Keeping Score with Global Variables

Players are used to having some way to evaluate their performance, such as points earned, time to completion, or some type of ranking system (such as from 1 to 3 stars or a grade from A to F). In this section, you will add another gameplay mechanic: the cleaner will fulfill the duties for which he was named by picking up pieces of trash that have been scattered around the area. To keep track of how well you are doing, you will program the game to keep track of how many pieces of trash have been collected by creating and using a new variable.

A variable is a name that corresponds to stored data (such as a number) that can be changed (or is able to vary, which is why it’s called a variable). In algebra, single letters such as x and y are often used as variable names; in different math problems, these letters may have different values. When writing programs, you will typically use words that describe the type of information being stored to avoid confusion. For example, a variable named t might store time information or temperature information; it is difficult to tell out of context. When creating programs, use time or temp as the variable name, instead of t, to avoid ambiguity or confusion.

In the previous projects, you already encountered many variables, such as position, angle, size, and so forth. These correspond to values associated with sprites that you are able to change. Because each instance of a sprite object contains its own set of these variables, whose values can be set independently from the variables belonging to other objects, these are called instance variables. In this chapter, you are going to create a different type of variable, called a global variable, which is not associated to any particular instance. In Construct, a global variable is a variable defined in the event sheet, and it can easily be accessed, modified, and used by all the objects or events in the game.

To begin, in the event sheet, right-click in the margin area and select Add global variable from the menu that appears. A window titled New global variable will appear, where you can configure its properties. Next to Name, type Score. Leave Type set to Number, and leave Initial Value set to 0. Next to Description, type number of pieces of trash collected. Although entering a description of a variable is optional and has no effect on the game itself, it is a good habit to develop and will help you remember what the purpose of the variable is in the future. When you are finished, click the OK button.

Next, you will set up a text object that displays the value of the Score variable. In the layout, create a new Text object named TextScore. Change its properties (Layer, Size, Font, Horizontal Alignment, Vertical Alignment, and Color) to the same values that you used for the TextGameOver object in the previous section. Also, for the Text property, enter Trash Collected: 0. Reposition this object so that it is aligned with the top half of the Stone object. When you are finished, this area should appear as shown in Figure 4-15.

Figure 4-15. The user interface area with more text added

Next, you will set up objects and events that affect and display the score. In the layout, create a new sprite called Trash, using the image trash.png. Make sure that its Layer property is set to Main, and change its size to 38,38. Duplicate this object nine times (for a total of ten trash objects), reposition these objects so that they are appear scattered around the grass and road areas, and rotate each by different amounts so that there is some variation in their appearance.

Since the Trash objects were the most recent additions to the Main layer, they will appear to be above the Car objects. It would look strange in the game if the cars were to drive underneath pieces of trash. To address this issue, you need to change the z-order of the Trash objects, which controls the order in which the graphics are rendered on each layer. Since you want the trash to appear as though it is underneath the cars (and the cleaner), they need to be moved to the bottom of the layer. To accomplish this, click Trash in the Objects panel in the lower-right region of the Construct window so that all instances of Trash objects are selected at the same time. Next, right-click any of the Trash instances in the layout, and from the menu that pops up, select Z-Order and then Send to Bottom of Layer. Since all instances were selected, this change will be applied to each of them, and in the game they will appear under the cars. Notice that the trash was not moved underneath the Grass or Road objects; that is because the background objects are on a completely separate layer (which illustrates another advantage to keeping game objects organized with layers).

Next, you need to add an event that enables the cleaner to collect the trash objects, updates the Score variable, and displays the updated information in the Text object. In the event sheet, create a new event with the condition Cleaner - Collision: On Collision With, and select the Trash object. Add the action Trash - Misc: Destroy. Also add the action System - Global and Local Variables: Add to, and in the parameters window, leave Variable set to Score and Value set to 1. Finally, add the action TextScore - Text: Set Text, and enter the text "Trash Collected: " & Score. Here, the text that is being displayed is a combination of a literal expression (which appears between the quotation marks) and a variable (Score), which appears without quotation marks and therefore will be replaced by its value when the game is running. The ampersand character (&) is used to combine text with variables or other expressions. When you are finished, this event should appear as shown in Figure 4-16. Save and test your project to check that the cleaner can in fact collect the trash and that the score increases and is displayed correctly.

Figure 4-16. An event for increasing and displaying the player’s score

Congratulations! You have now finished implementing the core mechanics of the Cleanup Challenge game .

Side Quests

In this optional section, you will learn how to add some randomization to your game to improve both the variation of graphics and the gameplay, followed by some suggested additional features for you to ponder.

Randomization

First, you will add some randomization to the initial positions of the Trash objects. For the trash to appear near the road and not too close to the edges of the screen, the x coordinate should be somewhere between 40 and 600, and the y coordinate should be somewhere between 256 and 512. With this in mind, create a new event with the condition System - Start & End: On Start of Layout and the action Trash - Size & Position: Set Position. For the x value, enter random(40, 600), and for the y value, enter random(256, 512). When finished, the event should appear as in the bottom part of Figure 4-17. Save and run your program; click the Refresh button in your web browser to restart the game, and you should see that each time the game loads, the trash pieces appear in different locations.

Figure 4-17. Events involving randomization

Next, you will add some randomization to the car graphics. As it stands, the same color car will continue to reappear in each lane. It is possible to randomly select among the graphics stored in the car object, thanks to the naming convention you used when setting up the animations earlier. Remember that the names of the car animations are Car1, Car2, Car3, and Car4. The idea will be to randomly choose one of the numbers, either 1, 2, 3, or 4, and combine that number with the text Car to get the name of the animation to set. The random selection will be made with a function named choose, explained next. Locate the event with the condition that a Car object collides with a CarWarp object. Add another action to this event: Car - Animations: Set Animation. Set the value of Animation to "Car" & choose(1,2,3,4). When finished, the event should appear as in the top part of Figure 4-17. Save and test the game, and verify that the image of each car randomly changes each time it reappears (although it is possible that the same image could be randomly selected multiple times in a row).

The choose function provides a way to randomly select among a given set of values (numbers or text); the inputs of the function represent the different possible choices, one of which will be randomly selected each time the action occurs. Alternatively, instead of "Car" & choose(1, 2, 3, 4), you could instead enter choose("Car1", "Car2", "Car3", "Car4"), which will have the same effect. One of the great things about computer programming is that there are usually many ways to approach and solve a problem!

You may have been surprised that we didn’t recommend that you use the function random(1, 4) to create a random number in this case. This is because the random function actually returns a random decimal value, which would then need to be rounded to a whole number in order to correspond to an actual animation name (since there are no animations named Car2.71828, for example). Thus, the expression round(random(1, 4)) produces a result closer to what is actually desired. However, this approach is still not precisely correct because not all numbers will appear equally likely; in this interval, it is more likely that a number will be closer to 2 or 3 than it will be to 1 or 4. (However, this problem can also be fixed. Can you see how?) Because of these unexpected complexities, the choose function is an easier approach for this particular situation.

Summary

In this chapter, you learned about some new object types: TiledBackground and Text. You created a sprite that contained multiple animations and events that switched between these animations as needed. You also learned how to use variables to keep track of changing values and how to display these values on the screen using the Text object.

In the next chapter, you will learn how to add additional polish to your previous games, in the form of menu screens, audio (sound effects and background music), and alternative sources of input.