Player Setup and Grid-Based Movement

In this section, you will set up the Runman character and grid-based movement. The process for setting up the Runman sprite’s animations is identical to how you set up the Cleaner sprite’s animations in the Cleanup Challenge game in Chapter 4. To begin, set the active layer to Main, and create a new sprite named Runman; in the Animation frames window, load the spritesheet general48.png (with three horizontal cells and four vertical cells), and set the Animation properties Speed to 6, Loop to Yes, and Ping-pong to Yes. Then duplicate this animation three times so that there are four animations in total. Next, rename the animations to South, West, East, and North. Select the animation named South in the list; 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. Repeat this process for the West, East, and North animations, deleting the frames not required within each of the animations.

Next, you need to adjust the sprite’s collision polygon to a smaller shape and adjust the sprite’s origin to be aligned with the grid. These adjustments must be applied to all frames of all animations for consistency and to prevent glitches. Select the South animation, and adjust the collision polygon (adding and repositioning vertices as necessary) until it is roughly circular, as illustrated in Figure 12-3. After this adjustment, right-click the polygon and select Apply to all animations. Next, in the Image points window, adjust the origin image point using the Quick-assign tool (as you did with the Chargeometer object in the Spell Shooter game in Chapter 9) so that the origin point is at the bottom-left corner of the sprite, also shown in Figure 12-3. After this adjustment, right-click the Origin in the Image points window, and select Apply to all animations. When you are finished, close the image editor windows. Change the size of the sprite to 32,32, and position it at any open grid square except for those with an adjacent wall on the right.

Figure 12-3. The Player sprite’s circular collision polygon

The next mechanic you will implement is grid-based movement: the characters in this game can move only in straight lines in four directions (north, south, east, and west) and can change directions only from the center of each grid square. Determining when a character has reached the center of a grid square is difficult since character positions are updated only 60 times per second, and because of the automatic approximation of decimal values by computers, the exact coordinates might not be obtained. To overcome this dilemma, you will use a formula from physics: speed = distance/time. You will know both the speed (it will be set to 100 pixels/second) and the distance between tiles (32 pixels). Therefore, you can use this formula to calculate how long it will take a character to travel from one grid square to the next since the formula can be rewritten as time = distance/speed. A timer will be set up to go off regularly at this time interval, and on the corresponding tick (and only then), the character will have the opportunity to change direction. At the same time, the character might not be located at the exact center of a tile when the timer goes off (because of the aforementioned rounding errors), so the character’s position will also be adjusted at this instant, as shown in Figure 12-4, to avoid accumulating errors that could result in glitches at a later time.

Figure 12-4. Adjusting Runman’s position to be centered in a grid square

To begin, select the Runman object and add the behaviors Bullet and Timer. Set the Bullet properties Speed to 100 and Set angle to No. Also, since Runman will move to the right by default, in the Properties panel change Initial animation to East. (Incidentally, this is also why you avoided placing Runman with a wall directly to his right.) In what follows, you will use groups to keep sets of events organized and easy to locate in the event sheet. Groups are basically headers that display a line of text; events are added to a group by adding them as subevents to the group, just as you would add a subevent to another event. In the event sheet, right-click in the margins, select Add group, and set Name to Player Movement. To this group, add an event with the condition System - On start of layout. In accordance with the formula discussed earlier, add the action Runman - Timer - Start timer, set Duration to 32/100, set Type to Regular, and set Tag to "Grid".

The next event to be added will realign Runman to the center of the grid square to which he is closest. Since the grid square positions are located at multiples of 32, Runman’s X and Y position should be set to the nearest multiple of 32 whenever the timer activates. To determine which multiple of 32 is closest, you can divide the current position by 32, round it to the closest whole number, and then multiply it by 32. For example, given the number 95, the closest multiple of 32 is 96 = 3 * 32. The key part in this calculation is figuring out the multiplier, which is 3 in this case. We know that 96 / 32 is exactly 3, while 95 / 32 is 2.96875, which is only approximately 3. Using the round function converts this approximate decimal into the desired exact value 3, and then you can simply multiply this by 32 to get the position to which Runman should be adjusted. To implement this calculation in the event sheet, in the Player Movement group, add a subevent with condition Runman - On timer, and set Tag to "Grid". Add the action Runman - Set X, setting X to round( Runman.X / 32 ) * 32, and add the action Runman - Set Y, setting Y to round( Runman.Y / 32 ) * 32. When you are finished, the events should appear as in Figure 12-5.

Figure 12-5. The Player Movement group and events for grid alignment

Next, you will implement events that enable the player to change Runman’s direction, provided that no walls are blocking the way. This type of check is called preventative collision detection, meaning that rather than waiting for a collision to happen (and responding accordingly), you will check to see whether the player is holding down an arrow key corresponding to a direction in which a tile exists; if so, Runman will be prevented from moving in that direction in the first place. Potential collisions such as these can be detected with a condition named Is overlapping at offset. To begin, in the layout, add a Keyboard object. Then, in the event sheet, add a subevent to the On timer event you created previously. Create two conditions for this new event: Keyboard - Key is down (Right arrow) and the inverted condition Runman - Is overlapping at offset (Walls, at an Offset X of 32 and an Offset Y of 0). Add two actions to this event: Runman - Bullet: Set angle of motion (0) and Runman - Set Animation ("East"). Next, you will create three more subevents in the On timer event with the same conditions and actions, but with the parameter values changed as follows:

• Check whether the player is holding down the left arrow key and for an overlap at the values Offset X of -32 and Offset Y of 0; set the angle of motion to 180 and the animation to "West".

• Check whether the player is holding down the up arrow key and for an overlap at the values Offset X of 0 and Offset Y of -32; set the angle of motion to -90 and the animation to "North".

• Check whether the player is holding down the down arrow key and for an overlap at the values Offset X of 0 and Offset Y of 32; set the angle of motion to 90 and the animation to "South".

When you are finished, these events should appear as in Figure 12-6.

Figure 12-6. Events for player movement and animation

At this point, Runman can move freely throughout the level and stays aligned with a grid. However, the wall tiles you added in the tilemap do not currently function as walls; Runman can travel right through them. To get the precisely desired effect, you will not add the Solid behavior; instead, you will create another set of events to implement this feature. These events will check the direction in which Runman is traveling (by checking the name of the currently playing animation), and if there is a wall ahead, Runman’s movement, animation, and timer will all be stopped. If the player presses a key while Runman is not moving (indicated by a speed of 0), then his speed will be restored to its original value, the On timer event will be activated again immediately, and the recurring timer will be set up again.

To start implementing these features, add a new subevent to the On timer event , with two conditions: Runman - Animation: Is playing ("East") and Runman - Is overlapping another object (Walls, with Offset X set to 32 and Offset Y set to 0). To this event, add three actions: Runman - Bullet: Set speed (0), Runman - Animation: Stop, and Runman - Timer: Stop timer ("Grid"). Next, you will create three more subevents in the On timer event with the same conditions and actions, but with the parameter values of the conditions changed as follows:

• Check whether the West animation is playing and for overlap at Offset X of -32 and Offset Y of 0.

• Check whether the North animation is playing and for overlap at Offset X of 0 and Offset Y of -32.

• Check whether the South animation is playing and for overlap at Offset X of 0 and Offset Y of 32.

You will also need an event as described earlier that starts Runman moving again after he has stopped. Create a new subevent in the Player Movement group (but it should not be a subevent of the On timer event) with the condition Keyboard - On any key pressed and the condition Runman - Bullet: Compare speed (0). Add the three actions Runman - Bullet: Set speed (100), Runman - Timer: Start timer (Duration set to 0, Type set to Once, Tag set to "Restart"), and Runman - Timer: Start timer (Duration set to 32/100, Type set to Regular, Tag set to "Grid"). The extra Restart timer needs to be created to activate the On timer event again right away (the Grid timer cannot be used for both these purposes at the same time). Finally, the On timer event needs to be adjusted so that either of the named timers can activate it; to this end, right-click the event, select Make "or" block, and then add a second condition called Timer - On Timer ("Restart"). When you are finished, these events should appear as in Figure 12-7. Save the project and preview your game to make sure that the movement works as expected and that Runman is blocked by the walls.

Figure 12-7. Events for tilemap wall functionality

Enemies and Intelligent Movement

In this section, you will implement enemy ghosts with intelligent movement patterns that will chase the player around the maze. These ghosts will also be subject to grid-based movement; the implementation will be similar to the previous section but simpler, as the ghosts will not stop moving. To begin, create a new sprite named Ghost; in the Animation frames window, load the spritesheet ghost.png (three horizontal cells and one vertical cell), and set the Animation properties Speed to 6, Loop to Yes, and Ping-pong to Yes. As you did with the Runman sprite, adjust the collision polygon shape and origin image point, as shown in Figure 12-8, and after each of these changes, select the right-click menu option Apply to whole animation. When you are finished, close the image editor windows. Change the size to 28,28, add the Bullet and Timer behaviors, set Bullet Speed to 90 (so it is just a bit slower than Runman), and change Set angle to No. Create two more instances of the Ghost object, and position them each on an empty tile space (but not with a wall directly to the right, as before).

Figure 12-8. The Ghost sprite’s collision polygon

In the event sheet, right-click and create a new group named Ghost Movement. In this group, create an event with the condition System - On start of layout, and add the action Ghost - Timer: Start Timer (with Duration set to 32/90, Type set to Regular, and Tag set to "Grid"). Then create an event with the condition Ghost - On Timer ("Grid") and the condition System - For Each (Ghost). Add the action Ghost - Set X, setting X to round( Ghost.X / 32 ) * 32, and add the action Ghost - Set Y, setting Y to round( Ghost.Y / 32 ) * 32.

Before creating any more events, it is necessary to introduce a new feature of Construct: the Array object. Arrays are “data structures ” that can be used to store a list (or a grid) of values. Here, arrays will be used to store the directions of movement available to each ghost each time they reach the next grid square, and one of the stored directions will be selected according to the programmed pattern for each ghost. To begin, in the layout, add a new object, an Array object named Directions, and then return to the event sheet.

In the Ghost - On timer event , add an action called Directions - Set Size, and set Width to 0, Height to 1, and Depth to 1. Since you are interested only in storing a list of values (as opposed to a 2D or 3D grid of values), Height and Depth should always be set to 1. The width refers to the number of values being stored in the list, and setting it to 0 effectively “resets” or “clears out” the list, preparing it for reuse when analyzing the options for each of the ghosts.

Next, you will add values to the array, corresponding to the angles of movement for the available directions. One of the requirements for a direction to be considered available is that there must be no overlap with a wall in that direction. Additionally, ghosts are not permitted to reverse direction because otherwise ghosts would behave erratically, hovering back and forth between positions as they attempt to align themselves horizontally or vertically with Runman. Directions satisfying these conditions are added, or “pushed,” onto the array. For example, if there is no wall to the right (offset (32,0)) and the ghost is not moving to the left (motion angle 180), then moving to the right is a valid option, and the corresponding angle (0) will be added to the array. To implement this, create a subevent to the Ghost - On timer event, with the inverted condition Ghost - Is overlapping at offset (Walls, Offset X set to 32, Offset Y set to 0) and the condition System - Compare two values (check whether Ghost.Bullet.AngleOfMotion is not equal to 180). Add the action Directions - Manipulation - Push (set Where to Back, Value to 0, and Axis to X). Create three more events with the same conditions and actions, with the parameter values changed as follows:

• If there is no overlap at offset (-32, 0) and the angle of motion is not 0, then push 180 onto the array.

• If there is no overlap at offset (0, -32) and the angle of motion is not 90, then push -90 onto the array.

• If there is no overlap at offset (0, 32) and the angle of motion is not -90, then push 90 onto the array.

When you are finished, the Ghost Movement group should appear as in Figure 12-9.

Figure 12-9. Events for ghost grid alignment and adding available directions to the array

Before adding the events that correspond to the different movement patterns that the ghosts will follow, you need to add an instance variable to the ghosts to distinguish between them. Select the ghost object, and add an instance variable named Pattern, with Type set to text, Value set to Vertical, and Description set to Vertical, Horizontal, or Random. Then, select an instance of one of the ghosts, set its Pattern variable to Horizontal, and select another one and set its Pattern variable to Random so that each of the three ghosts has a different value. When changing direction, the ghost with Pattern set to Vertical will choose to move either north or south, depending on whether Runman is located to the north or south of the ghost (and provided the ghost is currently able to move in that particular direction). If this ghost has the same Y coordinate as Runman, then it will choose to move either east or west, following similar criteria. The ghost with Pattern set to Horizontal follows similar logic but prioritizes moving east or west, while the ghost with Pattern set to Random will simply choose one of its currently available directions at random.

Before implementing these movement patterns, you will set up a “default” direction for the ghosts to follow, in case no good option is available (where “good” is defined from the perspective of the ghosts, as a direction that moves them closer to Runman). Add a subevent to the Ghost - On timer event, with the condition System - Every tick and the action Ghost - Bullet: Set angle of motion, set to Directions.At(0). The Array action At retrieves a value stored in the array at a given position (or index); array positions are numbered starting with 0 (a standard convention in computer science).

Next, you will implement the vertical pattern of movement described earlier. To the Ghost - On timer event, add a subevent with the condition Ghost - Compare instance variable (check whether Pattern is equal to "Vertical"). To this event, you will add a set of four subevents that compare the position of the ghost to Runman, and if a good move exists in the array of directions, then the ghost’s angle of motion will be changed to that value. For example, if the ghost’s X coordinate is less than Runman’s X coordinate (Runman is to the right of the ghost) and the angle 0 is currently in the Directions array (indicating that the ghost is able to move to the right), then the ghost angle of motion will be set to 0. Similar events will be created for the other possible directions. It should be noted here that events that appear later in this list correspond to the movements that will take priority because their actions can override previous actions; it is as if these later events “have the final word” in what happens in the game. Create a new subevent with the condition Ghost - Compare X (check whether it is less than Runman.X) and the condition Directions - Contains value (0), and add the action Ghost - Bullet: Set angle of motion (0). Create three more subevents with the same conditions and actions, but change the parameter values as follows:

• Check whether the ghost X value is greater than Runman.X and whether Directions contains the value 180, and set the angle of motion to 180.

• Check whether the ghost Y value is less than Runman.Y and whether Directions contains the value 90, and set the angle of motion to 90.

• Check whether the ghost Y value is greater than Runman.Y and whether Directions contains the value -90, and set the angle of motion to -90.

When you are finished, the events should appear as in Figure 12-10.

Figure 12-10. Events for vertical pattern ghost movement

The events controlling the ghost following the horizontal pattern are extremely similar to the previous events. Copy and paste the event with the condition Pattern = "Vertical" and its subevents. In the new copy of the events, edit the condition to check whether Pattern is equal to "Horizontal", and click and drag to rearrange the subevents so that the events comparing the X values appear last, as shown in Figure 12-11. Finally, to implement the random movement pattern, you will need to write only a single event. Add a new event with the condition Ghost - Compare instance variable, and check whether Pattern is equal to "Random". For the action, you need to generate a random number between 0 and the width of (number of elements in) the Directions array, use the floor function to truncate the decimal digits (since array positions are whole numbers), and extract the array element at that position. This is accomplished by adding the action Ghost - Bullet: Set angle of motion, set to Directions.At(floor(random(Directions.Width))). When finished, these events should appear as shown in Figure 12-11. Save and test your project, and verify that all three ghosts move in different patterns, as expected. (To check an individual pattern more easily, you could delete the other ghost instances temporarily and simply add them back to the project later.)

Figure 12-11. Events for horizontal and random pattern ghost movement

Collecting Coins

In this section, you will add coins for the player to collect while moving around the maze. These coins will give the player points that will be added to their score. To begin, create a new sprite named Coin with the image coin.png, and position it in any open path grid square. You should create additional coin instances to fill all open grid locations (those not occupied by the player, ghost, or walls). When finished, select the Coin object in the object panel (so that all instances are selected); then right-click in the layout area, and select Z-Order - Send to bottom of layer. This makes the Runman and the ghosts appear on top of the coins, rather than underneath them (which would look strange). To keep track of points earned, in the event sheet, add a global variable named Score with an initial value of 0. To display this value on the user interface, create a new Text object named TextScore, set its Layer to UI, and position it in the top-center of the game window, over the top bounding wall. Change the default text to Score: 0. Change the font to Arial, bold, size 14, and change the font color to a bright yellow (since it matches the color of the coins and is also easily visible against the dark wall). Your user interface and style of coin placement should be similar to example layout shown in Figure 12-12.

Figure 12-12. The user interface and coin placement in the layout

You can now set up the corresponding events for collecting coins and updating the text displayed. First, in the event sheet, right-click the empty area in the event sheet to create a new group named Coin Events. Next, to this group, add a new subevent with the condition Runman - On collision with another object (Coin), add the action System - Variables: Add to (add 10 to Score), and add the action Coin - Destroy. Add another event to this group, with the condition System - Every tick and the action TextScore - Set text ("Score: " & Score). When finished, these events should appear as in Figure 12-13.

Figure 12-13. Events for collecting coins

Game End

In this section, you will implement end-of-game conditions that indicate whether the player has lost or won. When the game has ended, the player and ghosts’ movement will be stopped, and then they will all fade away. To begin, in the layout, to the Runman object, add the behavior Fade, and set Active at start to No. Then, click Ghost in the object panel (so all instances are selected) and similarly add the Fade behavior, and set Active at start to No. Create two new sprites: one named MessageLose using the image text-lose.png and one named MessageWin using the image text-win.png. Set their Layer properties to UI, set Size to 416 by 64, set “Initial visibility” to Invisible, and center both within the window bounds. Next, you will add the “game over” sequence event that will fade the player and the ghosts upon player collision with a ghost. Since you will want to fade away all ghosts in the game, not just the one filtered by the collision condition, you will add an additional System condition called Pick all to reset the event’s filter for the ghosts so that the actions are applied to all ghosts (not just the one that collided with the player). First, in the event sheet, right-click the empty area in the event sheet to create a new group named Game End. To this group, add a new subevent, add the condition Runman - On collision with another object (Ghost), and add the condition System - Pick all (Ghost). Add the following actions:

• MessageLose - Set visible (Visible)

• Runman - Bullet: Set enabled (Disable)

• Runman - Start fade

• Ghost - Bullet: Set enabled (Disable)

• Ghost - Start fade

You will now add the winning sequence event, which will occur when all coins have been collected (or equivalently, when no coins remain). To the Game End group, add another subevent called System - Compare two values (check if Coin.Count is equal to 0); then add the same actions as in the previous event, but change MessageLose to MessageWin in this new event. The “game end” events should appear as in Figure 12-14.

Figure 12-14. Events for the end of the game

Congratulations! You have now finished implementing the core mechanics of the game Maze Runman.

Side Quests

In this optional section, you will add a special collectable jewel item that will repeatedly spawn at a specified location for the player to collect, giving the player repeated chances for extra points. Additional features will also be suggested at the end of this section.

Adding a Jewel Bonus Item

To add more variety to the maze, you will add a special collectable jewel item that will repeatedly spawn at a specified location (designated by a SpawnPoint sprite), and on collection, the jewel should grant the player a bonus of 100 points. To begin, add a new sprite named JewelSpawn with any drawn image (this sprite will be invisible during gameplay), and resize it to 32, 32. Find a location of a coin in the middle of the maze, delete that particular coin instance, and position the JewelSpawn at that location. Then, set Initial visibility to Invisible. Next, add a new sprite named Jewel, with the image jewel.png, and position it in the layout margins. Add the Fade behavior to the jewel, and set Wait time to 9. Every 20 seconds a jewel should spawn, and the player will have 10 seconds to collect it before it disappears. In the event sheet, create a new group named Jewel Events. To this group, add a new event with the condition System - Every X seconds (20) and the action JewelSpawn - Spawn another object (Jewel). Add another event to this group with the condition Runman - On collision with another object (Jewel); add the action System - Variables: Add to (add 100 to Score), and add the action Jewel - Destroy. When you are finished, the events should appear as in Figure 12-15.

Figure 12-15. Events for the bonus jewel item

Summary

In this chapter, you created the game Maze Runman. By using a tilemap, you created a maze for the player to strategically navigate, while collecting coins and avoiding ghosts. You learned how to implement precise grid-based movement by combining the Bullet and Timer behaviors. You were introduced to the Array object, which helped you store multiple values. By accessing the array data, you created events that simulated intelligent behavior for the ghosts and created variations on their movement patterns. Throughout the chapter, you organized events by using groups in the event sheet. The “Side Quests” section discussed how to create a regularly reappearing jewel for bonus points and suggested a variety of other features you could add to your game.

In the next chapter, you’ll create another game where the player collects coins and dodges enemies: a side-view, platformer-style game called Jumping Jack.