Project Setup

To begin, download the zip file containing the graphics for this game from the companion web site for this book. Extract the files to a folder of your choice; there will be images of water, a turtle, a starfish, a rock, and words that say You Win! when the player wins. Alternatively, you can use your own images if you desire.

Next, start the Construct program. In the menu bar, select New to create a new project. In the window that appears, select the option New empty project and click the Open button. Construct will then create an empty project file for you. In the center region you will see the game layout. On the left is the Properties panel (which displays information about the currently selected object in the layout), on the upper right is the project panel (which displays the list of files for your project), and on the lower right is the objects panel (which displays a list of object types currently in your layout).

To begin, you will set up the layout. Click anywhere in the layout area, and the Properties panel title will change to Layout properties; underneath, it will list the different properties of the layout in the left column and their current values or settings in the right column, shown on the left side of Figure 2-2 with the default settings. Click in the area next to Name, type Main, and press Enter.¹ You should see that the name of the layout has also changed in the project panel. Similarly, click in the properties area next to Layout Size, and enter 800, 600. This sets the layout width to 800 pixels and height to 600 pixels, which is a fine size for the game world. When you’ve completed these changes, the Properties panel should look like the right side of Figure 2-2.

Figure 2-2. Layout properties

Next, you will set up layers on the layout. Layers are used to organize the objects in the layout into groups, such as background images, characters and items, and user interface (UI) or heads-up display (HUD) information. To see the list of layers, underneath the project panel, you will see two tabs: Projects and Layers. Click the Layers tab, and the project panel will be replaced with the layer panel. You will see a list that contains a single layer, named Layer 0. Click the add button (indicated with a plus icon) two times to add two layers; they will be given the default names of Layer 1 and Layer 2. To rename a layer, click the layer name in the list to select it and then click the rename button (indicated with a pencil icon). Rename Layer 0 to Background, Layer 1 to Main, and Layer 2 to UI. When you are finished, the layer panel should look like Figure 2-3. The order in which the layer names appear makes a difference; the layer at the bottom of the list will have its contents rendered (drawn on the screen) first. Its objects will appear to be on the bottom, or below the objects from other layers. Similarly, the layer listed directly above the bottom layer will have its objects drawn next, and so on. The layer at the top of the list will have its objects drawn last, so this is the best group for user interface–related information, such as the player’s score or time remaining, since this data should be displayed overlaying the game world.

Figure 2-3. The layer panel

The last project setup task you will do is to set some of the project properties. This is a place to store information about your game and change settings such as the window size and web browser used to preview your game. Click in the layout area, and underneath the list of layout properties on the left, you will see a Project Properties row next to which there will be underlined blue text (similar in style to a link on a web page) that says View, as shown on the left side of Figure 2-4. Click View, and the Properties panel will now change and display project properties, as shown on the right side of Figure 2-4. Here, you might want to fill in the areas next to Name (which refers to the name of the project or game) and Author (your name). Filling in properties such as Email or Website is not necessary but can be useful if you plan to share your project file with someone and you want to provide a way for them to contact you. Further down in the Properties panel, you should change Window Size to 800, 600, just as you did for the Layout Size property previously. This is important because the Starfish Collector game world should fill up the program window.

Figure 2-4. Project properties

Sprites

Next, you will add some Sprite objects to your program. A sprite is an image that represents an entity in your game world and has associated properties such as position (specified using x,y coordinates), angle of rotation (measured in degrees), and size (which need not be the same as the size of the original image). To create a sprite, right-click in the layout area, and a menu will appear as pictured on the left side of Figure 2-5. Select Insert New Object, and a window will appear, as shown on the right side of Figure 2-5. Click the Sprite icon; then in the text box at the bottom of the window next to Name when inserted, type Background; and finally click the Insert button.

Figure 2-5. Inserting a new Sprite object

After clicking the Insert button, the mouse pointer icon will change to a crosshair-style icon, which is used to indicate where you would like to place the Sprite object. You can easily change the position of the sprite later, so for now, simply click in the center of the layout area. Next, a set of windows as pictured in Figure 2-6 will appear. These are the image editor windows. With the tools provided, you could draw an image or set up an animation. However, for this project, you will use the graphics provided that you downloaded at the beginning of this project. Click the folder icon along the top of the Edit Image window, navigate to the folder where you extracted the images from the zip file, and select the image named water.jpg. The image will appear in the Edit Image window. You don’t need to modify this image in any way, so close the Edit Image window (all the other image editor windows will also close automatically), and the sprite will appear in the layout area.

Figure 2-6. The image editor

The background sprite needs to be adjusted so that the water image covers the entire layout area. Click the sprite in the layout area to select it; the currently selected sprite is indicated by being surrounded by a light blue rectangle. You can reposition the sprite by clicking and dragging on the interior region of the sprite. You can resize the sprite by clicking and dragging any of the small white squares that appear around the blue rectangle when the sprite is selected. You can rotate the sprite by clicking and dragging the small white square that is connected to the center point by a line (however, you do not need to rotate this particular sprite). You will notice that, as you change the position, size, or angle, the corresponding value in the Properties panel will change as well. Alternatively, you may set these values by typing them into the Properties panel directly. In addition, change the background sprite’s Layer property to the Background layer.

Next, you will repeat this process to add a turtle sprite. As before, right-click in the layout area, select Insert New Object, click Sprite, enter the name Turtle, and click the Insert button. When the crosshair cursor appears, click anywhere in the layout to select an initial position, and in the image editor windows that appear next, select the image named turtle.png.² Close the image editor windows, resize and reposition your turtle sprite as desired, and change the Layer property to Main. Finally, repeat this process one more time to add a starfish sprite, with the name Starfish, using the image starfish.png. When you are complete, the layout should look like Figure 2-7.

Figure 2-7. The layout window with background, turtle, and starfish sprites added

This game would be quite short if there were only one starfish for the turtle to collect, and thus you will create some copies of the starfish sprite that you previously created. These copies are called instances of the starfish sprite. Every instance of an object has its own set of property values that can be adjusted independently of the others. Additional instances can be created in multiple ways. One method is to select the sprite you want to copy on the layout, press Ctrl+C to copy it, and press Ctrl+V to paste the copy onto the layout; the cursor icon will change to a crosshair-style pointer, allowing you to select the position of the new instance. An alternative (and slightly quicker) method is to select the sprite on the layout, hold down the Ctrl key, and click and drag the selected sprite. A new instance of the sprite will be generated on top of the original one, which can then be dragged to its new position on the layout. Using either of these methods, create a few additional instances of the starfish sprite and position them around the screen. Feel free to change their angle and size slightly to add some variation in their appearance. Figure 2-8 shows one possible such layout. Once you are finished, it is a good idea to save your project.³

Figure 2-8. Layout example with multiple starfish sprites

Events

Next, you will add some instructions, commonly referred to as code, to your game to make it interactive. In the Construct game engine, instructions are called events. Each event has two parts: a condition and an action. A condition is a test that the program can check, which will be either true or false. An action is something the program can do. Informally, events can be thought of as “if-then” statements (instructions that say “If this condition is true, then do this action”). Every type of object in Construct has an associated list of conditions and actions that you can select from menus when creating events. This is convenient compared to traditional programming languages, where programmers need to remember and type in the names of each command or function.

The first event you will create will enable the turtle to “collect” the starfish. In many video games, the player’s character often collects items by simply coming into contact with them, after which the collected item disappears; the gameplay in Starfish Collector will be the same. Informally, the event could be phrased as “If the turtle comes into contact with the starfish, then remove the starfish from the screen.”

To begin entering this event, click the Event Sheet 1 tab above the layout area, or if the tab is not visible, you can click Event Sheet 1 in the project panel on the right. The layout will be replaced with an event sheet, which is where all the game events are displayed. Next, click the light gray text that says Add event in the event sheet area. A window will appear, which asks you to “double-click an object to create a condition from.” The condition is that the turtle makes contact with a starfish, and therefore you should double-click the Turtle object, as shown in Figure 2-9. A window will then appear that contains a list of conditions you can select from, as shown in Figure 2-10.

Figure 2-9. Selecting an object to create a condition from

Figure 2-10. A list of available conditions for the turtle sprite

One of the tricky parts of working with events is determining which of the available conditions (or actions) you need. Sometimes the condition you need is phrased with words other than those you originally thought of in an informal description. For example, there is no condition labeled “comes into contact with,” but underneath the Collisions group of conditions there is a condition labeled as on collision with another object, which has the same meaning. If you are unsure what a particular condition means, you can click it and a short description of the condition will appear at the top of the window. Alternatively, you can click the underlined text Help on ‘Sprite’ conditions at the bottom of the window and you will be brought to the help documentation for Construct. Since you have found the condition you seek, you can double-click this condition (or single-click and then click the Next button), and a new window will appear. Such a window will appear whenever there is more information that you need to enter; the additional details that you need to enter are called parameters, which is why the word parameters appears in the title bar of this new window. For this condition, you must enter which type of object you are checking for collision with, as different types of object collisions may have different results (for example, collisions with an item, an enemy, or a wall all have very different outcomes or actions associated with them). Click the <click to choose> button, double-click Starfish in the window that appears, and then click the Done button. You are now finished setting up the condition for the event, and your event sheet should appear as in Figure 2-11.

Figure 2-11. Condition for the collecting starfish event

To complete this event, you need to specify the action that will take place whenever the condition is met; in this case, the starfish should be removed from the game. In the event sheet, click the words Add action that appear next to the condition you just created. Similar to the process of creating a condition, a window will appear containing the different sprites you have added to the project. Double-click the Starfish object. A window will appear, containing a list of available actions for the starfish sprite. The Destroy action is used to remove an instance of an object from the game entirely; select this action and click the Done button. No more windows will appear because there is no additional information that needs to be entered. When you are finished, the event should appear as in Figure 2-12. Congratulations; you have finished writing your first event in Construct!

Figure 2-12. Completed event for collecting starfish

Behaviors

The next feature to add is movement for the turtle. In this game, pressing any of the arrow keys will move the turtle in that direction: pressing the up arrow key moves the turtle toward the top of the screen, pressing the right arrow key moves the turtle toward the right side of the screen, and so forth. It is clear how to think of these as if-then statements; for example, “If the up arrow key is currently being held down, then move the turtle upward.” In terms of events in Construct, the condition is “the up arrow key is being held down,” and the action is “move the turtle upward.”

Although you could program these events yourself, it is more efficient to use features in the Construct game engine called behaviors. Behaviors are like prewritten collections of events that you can attach to a sprite. This saves you, the game developer, the time and effort of creating these events yourself. There are currently approximately 25 different behaviors available for use; they include many commonly used game mechanics such as player controls for movement, visual effects such as fading or flashing, and advanced features such as pathfinding and physics simulation.

Next, you will add a behavior to easily control the movement of the turtle. Return to the layout, select the Turtle object, and in the Properties panel click the underlined blue text labeled Behaviors. The Turtle: Behaviors window will appear, containing a row of icons along the top. Click the Add New button (represented with a plus symbol icon), and a window of available behaviors will appear, as shown on the left side of Figure 2-13. Underneath the Movements group, select the 8 Direction behavior (either by double-clicking or by clicking once and clicking the Add button). This window will close, and the program will return to the Turtle: Behaviors window; the 8 Direction behavior icon should now appear in this window.

Figure 2-13. The Add behavior window and Turtle: Behaviors window

While you are in the process of adding behaviors, there is a second behavior that is helpful for this particular game called Bound to Layout, which will keep the associated sprite from moving past the boundaries of the screen. As with all behaviors, you could theoretically add this functionality yourself by creating a set of events; in this case, the events would be “If the left edge of the turtle sprite moves past the left edge of the layout, then move the turtle to the right,” and so forth, for all edges of the turtle. However, once again, you will instead add a behavior following the same procedure as before: click the button with a plus symbol icon and select the Bound to Layout behavior underneath the General group. When you are finished, the Turtle: Behaviors window should appear, as in Figure 2-14. Close the Turtle: Behaviors window.

Figure 2-14. The list of behaviors added to the Turtle sprite

At this point, you are ready to test your game! Be sure to save your project (as a single file, as usual) and then click the Run layout button (represented with the standard play icon featuring a right-pointing triangle) in the title bar of the Construct window. Your default web browser will open, and your layout should appear. Press the arrow keys, and your turtle should move around the screen; notice that the 8 Direction behavior also rotates the sprite so that it faces the direction in which it is moving,⁴ as illustrated in Figure 2-15. You can also test the Bound to Layout behavior by trying to move the turtle beyond the layout area (the turtle should stop moving forward when it touches an edge of the screen). Finally, you can test the event you wrote (for collecting starfish) by moving the turtle so that it collides with each starfish; this should cause the starfish to disappear.

Figure 2-15. Playing the Starfish Collector game in a web browser

Ending the Game

After the initial thrill of seeing your game come to life in a web browser and being able to play it, your experience may be a bit anticlimactic, since after you collect the starfish, nothing happens. The game is presumably finished, but there is no sense of closure. This could lead players to confusion (leaving them to think “Is there something left to do?” or “Did I do something wrong?”) or even a sense of frustration. To remedy this situation, you will now add a game-over message that says You Win! to the game, which will appear after the turtle has collected all the starfish.

In the layout area, right-click, select Insert New Object, and add a sprite named YouWin. Use the image you-win.png and position this sprite so that it is in the middle of the layout. In the Properties panel, there are two properties you need to change. First, set the Layer property to UI. As mentioned, this helps keep your project organized and also ensures that the sprite will be displayed on top of everything in the layers listed below it: Background and Main. Second, change the property Initial Visibility to Invisible. This makes the sprite invisible to the player at the start of the game (although you will still be able to see it in the layout area); this is important because the player should not see this message until the game is over.

Next, you need to add an event that checks whether all the starfish have been collected, in which case the YouWin sprite should become visible. Informally, the event you will create can be phrased as “If there are zero Starfish sprites left on the layout, then make the YouWin sprite visible.” To begin, click the event sheet tab and add a new event. The number of starfish currently on the layout is a property of the Starfish object called Count. However, to check this value, you will need to use a condition from the System group of conditions. In the Add event window, select System (represented with a gear icon) and then select the condition named Compare Two Values from the General group. A parameters window will appear, which allows you to enter the two values to compare and the type of comparison to make (such as equals, less than, or greater than). In the first box, type Starfish.Count (notice in particular that there is a period between the words Starfish and Count; this tells the program to use the Count variable that belongs to the Starfish object, rather than the Count variable of something else, such as the Turtle object). Leave the comparison type set as equal to and leave the second value set to 0. Click the Done button, and the condition will appear in the event sheet. Finally, click Add action next to the condition, then select the YouWin sprite in the Add action window, and finally select the action Set Visible from the Appearance group. In the parameters window, leave the visibility set to Visible and click the Done button. The event is now complete and should appear in the event sheet, as shown in Figure 2-16.

Figure 2-16. The completed event to display a message at the end of the game

Now is a good time to save and test your project. Maneuver the turtle to collect all the starfish and verify that the You Win! message appears after they have all been collected.

Side Quests

Although you have now finished implementing the core game mechanics for the Starfish Collector game, there are still additional optional features you can add to make the game more interesting, challenging, polished, and fun. This section explains how to add these features into your game. While they may not be part of the core gameplay, these features are highly recommended to increase the quality of the gameplay experience for the future players of your game. In particular, you will learn how to add solid obstacles to the game world and how to use motion to animate the starfish.

Solid Objects

Games should have well-defined tasks or goals to accomplish and, at the same time, obstacles to make it challenging to accomplish these goals. In the Starfish Collector game, the turtle encounters no obstacles; she only needs to swim in a straight line from starfish to starfish until they are all collected. To make her journey less straightforward, you will place some obstacles in her way. You will add some rocks (sprites that use a rock image) that behave as solid objects—objects that the turtle cannot move through.

To begin, set the layout property Active layer to Main. Right-click in the layout area, select Insert New Object, and add a sprite named Rock. Use the image rock.png and position it anywhere on the screen that does not overlap the turtle or any starfish. In the Properties panel for the Rock object, click the underlined blue text Behaviors, and, similar to the process you used before when adding behaviors to the turtle, add a behavior named Solid. Duplicate the Rock object a few times, as you did when creating additional starfish, and position the new rocks around the layout, with enough space in between them so that the turtle will be able reach each of the starfish. Figure 2-17 shows an example of such an arrangement. Save your project, and click the Run layout button in the title bar. Move the turtle around the screen using the arrow keys, and you will notice that you can’t move the turtle through the rocks; make sure that the player can win the game.

Figure 2-17. Adding rocks to the game

As you navigate the turtle around the rocks, you may have noticed that although image files are rectangular, collision boundaries usually are not. It is typically the case in video games that if two sprites overlap in transparent areas of their images, this typically does not count as a collision. However, checking every pixel of every image for overlap with every pixel of every other image takes a great deal of computation and would cause your game to run more slowly. Therefore, game engines often use an intermediate approach, creating a collision polygon: a shape that estimates the boundaries of the object, usually with eight or fewer sides. When you select an image for a sprite, the Construct game engine automatically estimates the boundaries that should be used when checking for a collision between two objects. To inspect or adjust the collision polygon for a sprite, open the image editor (by double-clicking the object), and in the Edit Image window, select the icon at the lower left. You will see the collision polygon for the sprite, lightly shaded in blue, with blue edges and red vertex points. Figure 2-18 shows the collision polygons for the rock and turtle sprites. You can adjust the collision polygon if you want by clicking and dragging on any vertex; right-clicking a vertex will bring up a menu where vertices can be added or deleted .

Figure 2-18. Viewing the collision polygons for the rock and turtle objects

Value-Based Animations

In game design, it is good practice to draw the player’s attention to objects with which they can interact. One way to do so is with animations, which come in two varieties: image- based, where a sequence of images are quickly displayed in sequence to simulate a change in appearance, and value-based, where a set of numbers are continually adjusted that affect the sprite’s position, rotation, size, and so forth. In this section, you will use behaviors to implement value-based animations; image-based animations will be covered in a later chapter.

To begin, select the Starfish object from the object panel in the lower-right area of the Construct window. It is important to use the object panel so that all instances of the starfish are selected so that the changes you are about to make apply to all of them. Add two behaviors to the starfish: Rotate and Sine. The Rotate behavior causes a sprite to spin by continuously changing the angle property of the sprite. In the Properties panel, under the heading Rotate, change Speed to 10; this will cause the angle property to increase by 10 degrees every second, resulting in a nice, slow, spinning effect. The Sine behavior causes a property to oscillate between two values. In the Properties panel, under the heading Sine, change Movement to Size (this causes the Size property to be the one affected by the Sine behavior), change Period to 2 (this is how many seconds it will take to cycle through the values), and change Magnitude to 10 (this is the amount by which the starting value of the property will be adjusted). The result should be a subtle, rhythmic, pulsing effect as the starfish size increases and decreases by 10 pixels every 2 seconds. Figure 2-19 shows the Properties panel with these changes made.

Figure 2-19. Adjusted values for the Rotate and Sine behavior properties

As you can see when testing your game, when the turtle collides with a starfish, the starfish immediately disappears. To present a more sophisticated effect, you will add another value-based animation that will cause the starfish to fade out instead of suddenly disappearing. Use the object panel to make sure that all starfish instances are selected and then add the Fade behavior. The Fade behavior causes a sprite to either fade in or fade out by continuously changing the Opacity property, which controls how transparent the sprite image is; Opacity values close to 100 are fully visible, while values close to 0 are completely transparent (and thus cannot be seen by the player). In the Properties panel, under the Fade heading, change Active at start to No (which means that the sprite does not start fading out right away), and change Fade out time to 0.2 (which means it will take 0.2 seconds for the opacity to decrease from 100 to 0). Notice that the Destroy property is set to After fade out, which means that when the object has completely faded out, the Destroy action will automatically be applied to the sprite, removing it from the game.

Next, you need to adjust one of the game events. Go to the event sheet and locate the event with condition Turtle: On Collision with Starfish and action Starfish: Destroy. Click the action and press the Delete key; this will cause the action to be removed from the game. Click Add action next to the condition, select the Starfish object, and in the list of actions select Start Fade from the Fade group. When you are finished, the event should appear, as shown in Figure 2-20. Save and test your game to verify that the fade animation works as expected.

Figure 2-20. Replacing Destroy with Fade in the event sheet

Summary

In this chapter, you created your first game in Construct and encountered a lot of vocabulary along the way. You learned how to create sprites and adjust their properties, such as position, angle, and size, and how to create multiple instances of a given sprite. You learned that instructions for your game are specified as events, which can be thought of as “if-then” statements. Events consist of conditions and actions; if the conditions are true, then the associated actions are performed. You also learned about behaviors, which are like collections of events, useful for many common types of games. In particular, you worked with the following behaviors: 8 Direction, Bound to Layout, Solid, Rotate, Sine, and Fade.

In the next chapter, you will build upon these fundamental skills and create a space-themed shoot-’em-up game called Space Rocks.