Adding Animation and Text

First, you will change the single image currently used for the turtle into an image-based animation. As it turns out, the image you used previously for the Turtle sprite is actually the first frame of an animation. Unlike previous animations, however, the images are not contained within a single sprite sheet; they are in separate files. In the object panel, right-click the Turtle object and select Edit animations to open the image editor windows. In the Animation frames window, right-click and select Import Frames… and then select From Files. From the Open window, you can select multiple images at once, as follows: in this window, click the image file turtle-2.png, then hold down the Ctrl key, and continue to click the remaining image files in sequence (from turtle-3.png through turtle-6.png). In total, five files should appear selected in this window, and all the file names will appear in the text box at the bottom of this window, as shown in Figure 5-2. Then click the Open button, and you should see a total of six images in the Animation frames window. Set the Animation property Speed to 12 and Loop to Yes and then close the image editor windows.

Figure 5-2. Selecting multiple image files for an animation

Next, you need to create a pair of events to pause the animation from playing when the turtle stops moving and to resume the animation when the turtle begins moving. Sprites have some animation-related actions that can be used to start and stop animations, but these have the unfortunate effect of changing the current animation frame if not used properly, so instead you will change the animation speed to pause and resume it. Create a new event with the condition Turtle - 8-Direction: Is moving, invert the condition, add the action Turtle - Animation: Set Speed, and set Speed to 0. Add another event with the condition Turtle - 8-Direction: Is moving, add the action Turtle - Animation: Set Speed, and set Speed to 12. When finished, your events should appear as in Figure 5-3. Save your project and run the layout to verify that the turtle’s animation appears as described earlier.

Figure 5-3. Events to pause and resume the Turtle animation

Next, you will create a Text object for the user interface that displays the number of starfish remaining for the player to collect. Create a new Text object named TextStarfish. Change the Layer property to UI, set the alignment properties so that the text is centered, and change Text to Starfish Left: N (where you should replace N with however many starfish you have at the beginning of your game). To more closely align with the visual theme of this game, change Font to Comic Sans MS, change the font Style to Bold, and change the font Size to 36. Increase the size of the Text object so that all the text appears on a single line. Change the font color to a dark blue. Position the Text object in the center near the top of the layout; it should appear as in Figure 5-4.

Figure 5-4. Adding a text display to the layout

You don’t need to create a variable to keep track of how many starfish are remaining since this information is stored in Starfish.Count. You do, however, need an event to update the text itself; the text needs to be set to "Starfish Left: " & Starfish.Count. However, the placement of this action requires careful consideration. In the past, you would update a Text object immediately after the associated variable was changed; these actions would be part of the same event. In this case, the timing of certain actions can cause unexpected results because the action that destroys a sprite does not actually remove the object from the game until after the event. (This can be useful in certain cases, such as having an asteroid that was just destroyed spawn an explosion in the next action.) In the current situation, this means the value of Starfish.Count does not change until later, so updating the text must take place in a later event. To implement this, create a new event with the condition System - Every tick, add the action TextStarfish - Text: Set Text, and enter "Starfish Left: " & Starfish.Count. The completed event should appear as in Figure 5-5. Save your project and run the layout to verify that the text display changes as expected.

Figure 5-5. Event for updating the text display

Mouse Input and Buttons

Next, you will create some buttons that can be used to pause and resume the game. The buttons will be activated by clicking them with the mouse. To provide visual feedback to the player, buttons will appear slightly transparent when pressing a button would have no effect (such as pressing the pause button while the game is already paused). To begin, create a new Sprite¹ object named ButtonPause , using the image pause.png. Create another Sprite object named ButtonResume, using the image play.png, and set its Opacity to 50. Place these two buttons in the upper-right corner of the layout, where, ideally, they will not obstruct any of the game objects (starfish or rocks), as shown in Figure 5-6. To get mouse input, a Mouse object must be added to the project (similar to the Keyboard object). Right-click in the layout area, and in the Add New Object window select Mouse.

Figure 5-6. Placement of pause and resume buttons

Pausing the game can be accomplished by setting one of the system properties called the time scale, which controls the rate at which time is processed by the Construct game engine. The default time scale value is 1. Setting it to 2 would cause animations to display twice as quickly, objects to move twice as fast, and so on. Setting the time scale to 0.5 would cause these features to occur at half-speed. Setting it to 0 freezes these features, which effectively pauses the game, as nothing will occur in the game world (although Construct will still respond to input such as key presses and mouse clicks). First, you will set up the pause feature. Create a new event with the condition Mouse - On object clicked, and select the ButtonPause object. The parameter Mouse button lets you select a particular mouse button (left, middle, or right), while Click type lets you specify whether the user needs to single-click or double-click; in general, you will leave these values set to their defaults (left mouse button and click). You also have the option to select which mouse button. Add the following three actions :

• Add System - Set time scale, and enter 0.

• Add ButtonPause - Set opacity, and enter 50.

• Add ButtonResume - Set opacity, and enter 100.

Next, you will set up the resume feature; the event is quite similar. Once again, create a new event with the condition Mouse - On object clicked, and select the ButtonResume object. Add the same three actions as before, but with different parameter values: the time scale should be set to 1, the ButtonPause Opacity should be set to 100, and the ButtonResume Opacity should be set to 50. When finished, these events should appear as in Figure 5-7. Save your project and run the layout to verify that the pause and resume buttons work as expected (you should see the starfish stop and start moving).

Figure 5-7. Events for pausing and resuming the game

Audio

Audio is an important component that you should add to each game. Background music or ambient sounds (such as rushing water or city traffic) can be effective at setting the tone or mood of the game, while sound effects can provide another form of player feedback; all these aspects work together to increase the sense of immersion and provide a more complete and engaging player experience.

The Construct game engine classifies audio into two categories: sounds and music. Sounds are downloaded completely before playing and typically consist of short audio files used for sound effects, such as laser blasts or explosions. Music is not downloaded before playing; rather, it is streamed, or played while being downloaded. Large audio files, such as background music or ambient sounds, typically fall into this category. Construct supports many different audio file formats, but different web browsers and operating systems require different formats. When sounds are imported into Construct, the software will attempt to convert the files into multiple formats when possible. For cross-platform compatibility, you may want to consider the Waveform audio format (indicated by the .wav extension) for sound files and the Ogg Vorbis audio format (indicated by the .ogg extension) for music files. In particular, the popular MP3 file format may not play correctly in many browsers. However, there are many free programs and online services that can be used to convert audio files to a format of your choice; you can find them easily with an Internet search .

In the game Starfish Collector, you will add two audio elements : some background music and a sound effect of a water drop that will play every time a starfish is collected. To begin, in the Projects panel in the upper-right area of the Construct window, right-click the Sounds folder, select the option Import Sounds from the pop-up menu that appears, and select the file Water_Drop.wav from the assets you downloaded at the beginning of the chapter. Then a window titled Import audio files will appear; click the Import button, and after the text Successfully imported appears, click the OK button. Next, right-click the Music folder, select the option Import Music, and follow the same process as earlier to import the file Master_of_the_Feast.ogg.²

Next, in the layout area, right-click, select Add new object, and then select the Audio object. Just as importing the Keyboard and Mouse objects enables you to use these objects in the event sheet, the Audio object enables you to play sounds, and it even contains advanced functionality such as effects that modify the sound being played. This chapter covers only basic audio functionality, but you should feel free to experiment with the available features .

In the event sheet, locate the event with the condition where the turtle collides with a starfish. To this event, add the action Audio - General: Play, and in the parameters window, set Audio file to Water_Drop, and set Loop to not looping. Next, create a new event with the condition System - Start & End: On start of layout, add the action Audio - General: Play, set Audio file to Master_of_the_Feast, and set Loop to looping. When you are finished, these events should appear as in Figure 5-8. Save your project and run the layout to verify that the background music plays when the game starts and that the sound effect plays whenever the turtle collides with a starfish.

Figure 5-8. Events for playing audio files

Finally, you will add some buttons onto the layout that enable the player to mute or unmute the sounds being played. To begin, create two new sprites: one named ButtonMute with the image audio-off.png and the other named ButtonUnmute with the image audio-on.png and Opacity set to 50. Position them in the top-left corner of the layout, symmetrically opposite from the pause and resume buttons you created earlier, as shown in Figure 5-9.

Figure 5-9. Adding audio buttons to the layout (whole set)

In the event sheet, create a new event with the condition Mouse - On object clicked, and set Object clicked to ButtonMute. Add the following three actions :

• Add Audio - General: Set silent, and change Mode to silent.

• Add ButtonMute - Set opacity, and enter 50.

• Add ButtonUnmute - Set opacity, and enter 100.

The process for setting up the unmute button is similar. Once again, create a new event with the condition Mouse - On object clicked, and select the ButtonUnmute object. Add the same three actions as before, but with different parameter values: the silent mode should be set to not silent, the ButtonMute opacity should be set to 100, and the ButtonUnmute opacity should be set to 50. When finished, these events should appear as in Figure 5-10. Save your project and run the layout to verify that these new buttons work as expected.

Figure 5-10. Events for muting audio playback

Menus

Menu screens are fundamental in video game development to create a complete user experience. When running game software, there should be a main menu or “splash screen” that gives the player time to prepare before jumping into the game. Additional screens are often used to display the backstory, user controls, in-game items, goals and objects, and credits for the designers, artists, and programmers who developed the game. In this section, you will add a main menu and an instructions screen, as shown in Figure 5-11. This requires the creation of new layouts and event sheets, buttons to navigate between the layouts, and events with actions to switch between layouts when a button is clicked.

Figure 5-11. Start menu (left) and instructions screen (right)

To begin, in the Projects panel in the upper-right region of the Construct window, right-click the Layouts folder, and select Add layout from the menu that appears. A window will appear asking if you want to create a new event sheet for this layout. While not strictly necessary (different layouts can use the same event sheets), it is simpler to organize your code and keep game events and menu events separate. Click Add event sheet, and then you will see that a new layout has appeared in the Layouts folder; in addition, a new event sheet has appeared in the Event sheets folder. Rename the newly created layout to Start, and rename the newly created event sheet to Menu Events. To be consistent with naming, you might want to change the name of your original layout to Game and the name of your original event sheet to Game Events. Then right-click the Layout folder again, and add another layout, but this time, click the button labeled Don't add event sheet. Rename this layout to Help.

Open the Start layout in the layout area, and change Layout Size to 800, 600. To create a new instance of the Background object for this layout, in the Projects panel, select the Background object from the Object types folder and then click and drag it to the layout area. Resize and reposition the Background object so that it completely covers the layout. Also, set its Opacity to 50; this will reduce the contrast in the image, making it easier to distinguish the user interface elements. Next, create three new sprites: one named Title with the image title.png, one named ButtonStart with the image button-start.png, and one named ButtonHelp with the image button-help.png. Arrange these elements as shown on the left side of Figure 5-11 .

Next, open the Help layout in the layout area, and change the layout size and add the background as you did for the Start layout previously. Click in the margins of the layout area so that the Properties panel displays layout properties, and set Event sheet to Menu Events. Also, create new instances of the Title and ButtonStart objects by dragging them onto the layout from the Projects panel. Create a new sprite named ButtonBack with the image button-back.png. Next, create a new Text object named TextInstructions, with Text set to Use the arrow keys to move the turtle. To keep with the visual theme of the game, change the font to a larger, bold Comic Sans, and set the color to a dark blue. When you are happy with the style, create another instance of the Text object, and change the text of this new object to read Collect all the starfish to win the game. Arrange these elements as shown on the right side of Figure 5-11.

Finally, you need to create events that enable the user to navigate through the menus. Double-click the Menu Events event sheet in the project panel to open it in the editor, add a new event with condition Mouse - On object clicked, and select the ButtonStart object. Add the action System - General: Go to layout, and select the layout named Game. Repeat this process to create two more events: clicking the ButtonHelp object should go to the layout named Help, and clicking the ButtonBack object should go to the layout named Start. When you are finished, these events should appear as shown in Figure 5-12. In the project properties, set First layout to Start. Then, save your project, and while the Start menu is displayed in the layout area,³ run the layout and test that the buttons work as expected, allowing you to navigate between the different screens.

Figure 5-12. Events for navigating between menu and game screens

Alternative Controls

Many game enthusiasts have their own preferred way to interact with a game; some prefer keyboard and mouse controls, while others prefer gamepad controllers, and still others enjoy touchscreen-style games. In this section, you will learn how to implement each of these features.

Changing Default Controls

In the Starfish Collector game, the default controls are the arrow keys. If you want, you can disable the default key setup and use other keys to trigger the 8-Direction actions. Here, you will configure the W/A/S/D keys⁴ to take the place of the up/left/down/right arrow keys, a popular setup with many gamers. To begin, add a Keyboard object to the project. Then select the Turtle object, and in the Properties panel, underneath the 8-Direction group, change Default controls to No. Next, in the Game Events event sheet, create a new event with the condition Keyboard - Key is Down, set Key to W, add the action Turtle - 8-Direction: Simulate Control, and select Up from the list. Create additional similar events for the remaining keys and associated controls. When you are finished, these events should appear as in Figure 5-13. Test your game to make sure that this new control setup works.

Figure 5-13. Events for changing the 8-Direction controls

Gamepad Controllers

Another option for controlling your characters is to use a gamepad controller, such as the Xbox 360 or the Logitech F310 gamepads, as shown in Figure 5-14. Construct 2 uses web browsers to run your game, and many of these (such as Google Chrome and Mozilla Firefox) automatically support gamepad input without any special configuration required. To add gamepad support to your game, right-click in the layout area, select Insert new object, and choose the Gamepad object. Then, in the event sheet, you will have access to a variety of gamepad-related conditions that can, for example, determine whether gamepads are connected or whether buttons were just pressed or are being held down (similar to the conditions provided by the Keyboard object).

Figure 5-14. Xbox (left) and Logitech (right) gamepad controllers

One possibility is to use the D-pad to control the turtle. The events for this are straightforward: there is a Gamepad object condition named Is button down, and in the parameters window, you would leave Gamepad set to 0 (this refers to the first gamepad connected) and set Button to one of the buttons listed. The associated action would be Turtle - 8-Direction: Simulate control, as described in the previous section. However, in this section, you will instead use the analog joysticks on the gamepad to control the turtle. This is often a preferable setup because it gives the player fine-grained control over their character’s movement. Any direction can be selected, and the speed of the character can be dependent on how far from the center the joystick is pressed (pressing the joystick all the way to the edge results in full speed).

However, analog joystick controls are slightly more complex to set up than button press controls. Each joystick measures how much the player is pressing in along each of the coordinate directions: the x-axis (horizontal) and the y-axis (vertical). These inputs are represented as percentages, which can then be used to set the velocity in the X and Y directions (called the Vector X and Vector Y properties in Construct). To get these values, you use a function belonging to the Gamepad object called Axis. Just as you use the dot notation to access a property belonging to an object (such as Turtle.Angle), you do the same for functions (although this situation occurs far less frequently), so this function is entered as Gamepad.Axis. This function has two inputs. The first input is the ID number of the gamepad (the first gamepad has ID 0, the second gamepad has ID 1, and so forth). The second input is a code for the joystick (left or right) to check on the controller and which axis (x or y) to check. The codes are as follows :

• 0 for left joystick, x-axis

• 1 for left joystick, y-axis

• 2 for right joystick, x-axis

• 3 for right joystick, y-axis

So, for example, if there is only one gamepad (the ID is 0) and the player is using the left joystick, you can determine the percentages to which they are being pressed with the expression Gamepad.Axis(0,0) for the x-axis and the expression Gamepad.Axis(0,1) for the y-axis. The values returned by these functions are numbers in the range from -100 to 100, so in practice you will divide them by 100 (to convert them to a fraction) and then multiply the result by the maximum possible speed of the object.

To enable gamepad controls for the turtle, create a new event with the condition Gamepad - Gamepad: Has gamepads. Add the action Turtle - 8-Direction: Set vector X, and enter Gamepad.Axis(0,0) / 100 * 200. Add another action similar to the first, which instead sets the 8-Direction vector Y and replaces Gamepad.Axis(0,0) with Gamepad.Axis(0,1). When you are finished, the events should appear as in Figure 5-15. Save your project, connect a gamepad controller to your computer, and run the layout. Once the game starts, you may have to press a button (any button will do) on your gamepad so that the web browser recognizes that a gamepad is connected. Test the joystick controls and verify that the turtle moves as expected.

Figure 5-15. Events for gamepad controls (if gamepad is connected)

If you want, you can add events to the Game Events and Menu Events event sheets that allow the player to use the gamepad to interact with the user interface buttons by pressing buttons on the gamepad. Some button associations are standard, such as pressing the gamepad start button to begin or pause the game and pressing the gamepad back button to return to the main menu. For less obvious button associations (for example, determining the gamepad button used to mute the audio), one standard practice is to place small images of gamepad buttons near or slightly overlapping the onscreen buttons, as shown in Figure 5-16. This is an optional feature that you can implement if you want; for your convenience, images of gamepad buttons have been included in the assets provided for this chapter.

Figure 5-16. Using images to indicate gamepad controls for the user interface

Touchscreen Input

The final alternative control scheme we will discuss in this chapter is the use of touchscreen controls. From a technical standpoint, implementing touchscreen controls is straightforward. Sprites containing images representing buttons or keyboard keys can be created, there is a Touch object that can be used to detect when objects are touched (similar to the conditions provided by the Mouse object), and you can use actions that simulate eight-direction controls. In addition, if you configure touch controls and run the game on a desktop computer, the mouse input will be used to emulate touch input, which is convenient for testing purposes. From a design standpoint, however, the layout of the touchscreen controls is quite complex. The images used need to be relatively large (64 pixels or greater) so that they are easy to press on devices with small screens. The main problem is the obstruction of the game world since the controls can overlap in-game objects, as shown in Figure 5-17. Making the controls partially transparent does not fully address this problem since the player’s fingers will still be covering part of the screen. Solid objects could be placed under the user controls to prohibit game world objects from entering this area, but for games with large worlds that involve scrolling the window, this approach can also be complicated to implement. A thorough discussion of this topic at this time would take us too far afield, so it is left as a design issue for you to ponder in your future game projects.

Figure 5-17. Game world objects obstructed by onscreen controls

Summary

In this chapter, you learned many techniques for making your games more polished and professional: adding audio (sound effects and background music), creating additional layouts to serve as menus, and implementing alternative controls for your games. At this point, it would be excellent practice for you to revisit your game projects from earlier chapters (Space Rocks and Cleanup Challenge) and try your hand at implementing the features described in this chapter for those games. In the next chapter, you return to creating new games and creating your first side-scrolling game: Plane Dodger.