teachinTech


Introduction to events and the event sheet

Events are key to creating interactive games. In this activity, we get started creating events.

Turn In: A Construct2 project named Events-Exploration.capx exploring the information in this activity.

Events are things that may happen in the game. An event can be one or more conditions. An action is a game task that is completed. One or more actions can be associated with an event. Describing this in sentence structure ... When an event occurs, then take this action.

In Construct2, the events and their actions are coded or configured on the Event Sheet. Most of the layout pages in Construct2 have a corresponding Event Sheet. Layouts can have no event sheets, their own unique event sheet, or share an event sheet with other layouts. More it this in a different activity.

Setting Up the Game Graphics

Create a new project called Events-Exploration.capx file using the "New empty project" template. Work through the items below and any additional items you would like to try about yourself. Set your layout and window size to 1280 by 1024.

In the grey area (the margin) above the layout, create four sprites called PaintBallRed, PaintBallPink, PaintBallOrange, and PaintBallYellow. For each sprite, create a 30 by 30 circle using the color in the name. An easy way to create a circle is to select the paintbrush then set the size 5 to 10 higher than the width of the image (i.e. 40 if using width of 30). Center your paintbrush in the image box then click a few times until you get the desired look of your circle. Add the bullet behavior and the "Destroy outside layout" behavior to each of the paint balls. Many paintballs are going to be fired and the destroy outside layout will remove them from the game's memory once they leave the playing space. This is important to keep the game from running out of resources or running slow.

On the layout, create a player, an enemy, and a box. Each of those should be roughly 75 by 75 in size. Place the enemy in the upper right corner of the game board, place the box in the middle of the screen, and place the player at the location of your choosing. Add the 8Direction behavior to the player object.

Adding Events/Conditions and Actions

Click on the "Event sheet 1" tab then click on the "Add event" link. Conditions are created from the objects in the game as well as System. Click on System then Next. Pick the condition "On Start of Layout" then click done. This event will fire off each time the layout is started up.

Beside the event just created is an "Add action" link. Click on Add action. Pick System then click on Next. Click on "Create object" then click Next. For the "Object to create" click and choose the enemy object. Use the values of Layer = 0, X = 100, and Y = 100. The X value is the position from left to right. The Y value is the position from top to bottom. The upper left corner of the game window is 0,0. Run layout and you should see a new enemy object on the upper left portion of the game window.

Keyboard Events

To use keyboard events, you need to add the Keyboard object to your game. If not on the Layout 1 tab, click on it. Right click on the Layout and pick Insert new object then pick Keyboard. There is no visible object added to the Layout. In the Projects window, the Keyboard object does show up.

Note: The 8 Direction and Car behaviors use the keyboard without adding the keyboard object to your game. By adding the keyboard, we can create keyboard based events.

The keys WASD are often used as an alternative way to move objects on the screen since those keys are arranged similar to the arrow keys on the other side of the keyboard. We are going to create events and actions to move the box object using the WASD keys.

Click on the Event sheet 1 tab and click on Add event. Pick the Keyboard object then "On key pressed" and click Next. Click on the "click to choose" then press the W key. Click on Ok then click on Done. Click on Add action then pick the box object and click Next. Click on "Move at angle" and click Next. To move up, the angle is either 270 or -90 (chose one or the other, do not try to put in both). Set the distance to 15. Run layout then use the W key to move the box up.

Tip: Depending on the browser you are using and how it behaves, after you run the layout or refresh your browser, the keyboard may not respond. If that happens, click somewhere in the game window to set the focus of Windows to that browser then try your keyboard keys again.

Below is the shortcut version to add events/actions to move the box with the ASD keys. Refer to the information above for the longer version of how to create these events.

Add the event System->On key pressed (then pick the A key). Add the action Box->Move 15 pixels at angle 180. Run layout and verify that the A key will move the box to the left.

Add the event System->On S pressed. Add the action Box->Move 15 pixels at angle 90. Run layout and verify that the S key moves the box down.

When System-> On D pressed then Box->Move forward 15 pixels (notice using Move forward since that is the default direction). Run layout and verify that the WASD keys work to move the box in all four directions.

Note: In addition to On key pressed there are conditions for the key being held down or the key being released. Each of those events fire a little bit differently. Be sure to try those out and see the difference in how they work and how you might use them.

Spawn New Objects

Since this is a paint ball game, our player needs to shoot some paint balls. This is done by spawning a new object off of an existing object. In this case, the player object will spawn pink paint balls. In keyboard games, the space bar is often used to do this.

Click on Add Event then pick Keyboard. Choose On key pressed. Select the space bar button. Click on Add action and pick the player object. Select "Spawn another object" and click Next. Pick the pink paint ball for the object. Layer 0 and image point 0 will work ok.

Run layout and verify that the space bar will launch some pink paint balls.

Collision and Destroy Objects

If you have not already tried, have your player shoot paint balls at the enemy. Notice that they do nothing. In paint ball, when you get hit then you are out of the game. Let's have our game do that as well.

In Construct2, we can detect when a collision occurs. We are going to check when a paint ball hits the enemy and remove the enemy from the game. We are also going to detect when the enemy collides with the player and remove the player from the game.

Click Add event and pick the Enemy object then pick "On collision with another object". Click to choose the object and pick the player. Click on Add action then pick the player object and choose the Destroy option. Run layout and verify that when the player object runs into the enemy, the player is removed from the game.

We have four different paint balls that can hit the enemy. Rather than create 4 different events, we will create one event with multiple conditions.

Click on Add event and pick the red paint ball object then "On collision with another object" and pick the enemy object. Right click on the green arrow in front of the event just created and pick "Make 'Or' Block". Right click on the red paint ball event just added and pick "Add another condition". Select the pink paint ball, click Next, click on "On collision with another object", click Next, pick the enemy object, and click Done. Do this same set of steps for the orange and the yellow paint balls. Click on Add action and pick the enemy object then pick the Destroy action.

The event we created says that when the red or the pink or the orange or the yellow paint balls hit the enemy then the enemy object is removed from the game.

Run layout and verify that when the player launches a pink paint ball at the enemy and hits the enemy, that the enemy disappears.

Image Points

Image points are used as the point on the image for an action. Below is an example of image points.

Double-click on the Box object to open it in the Edit image tool. Click on the "Set origin and image points" button found in the tools on the left hand side (go toward the bottom).

In the Image points that pops up, click on the + to add a new Image point, rename it Top, and click in the middle top of the box. Add number 2 named Right and click to set the image point on the middle of the right side of the box. Image point three should be named Bottom and set on the middle of the bottom line. Image point 4 is named left and placed on the middle of the left side of the box. Click on the "Set origin and image points" button to hide the Image points box then close the Edit image box.

When an object is spawned off of another object, by default it comes from the origin image point which is usually in the middle of the object. Observe this with the pink paint balls the player launches. We are going to launch a paint ball off of each of the sides of our box to illustrate using different image points.

On the Event Sheet, add an event. Pick System then "Every X Seconds". Put in 2.0 for the number of sections. This will trigger the event every 2 seconds. Click on Add action then pick the Box object and then the action "Spawn another object". Choose PaintBallRed for the object, layer 0, and Image point 1. Run layout and observe the results.

Notice that every 2 seconds a red paintball is fired off of the top of the box but then it goes to the right side of the game. We want the paintball to go up instead of to the right. Add another action directly below the previous one. For this action pick the PaintBallRed then set the bullet's angle of motion to -90 degrees. Run layout. The red paint ball should shoot straight up.

Next is the pink paint ball to the right side. Since this is the default direction, add the event System->Every 3 seconds. For the action, Box->Spawn PaintBallPink on layer 0 (image point 2). Run layout and verify working properly.

Yellow paint ball on the bottom. Event is System->Every 4 seconds. Action is Box->Spawn PaintBallYellow on layer 0 (image point 3). Add a second action PaintBallYellow->Set Bullet angle of motion to 90 degrees. Run layout and verify working properly.

Orange paint ball on the left. Event is System->Every 5 seconds. Action is Box->Spawn PaintBallOrange on layer 0 (image point 4). Add a second action PaintBallYellow->Set Bullet angle of motion to 180 degrees. Run layout and verify working properly.

Give the Enemy A Chance

Right now our two enemy objects are stationary ... they are easy targets and the game is very dull. To give our enemy a better chance, we are going to add a few more of them and also let them move toward the player object.

Add the bullet behavior to the enemy and set the speed to 75. Run layout to see the change. This makes the enemy objects move but eventually the enemy will be off the game screen.

At the beginning of this activity, we added an "On start of layout" event. Find that at the top of the Event sheet. Under the action for the that event and above the next event is an Add action link. This lets us add another action to that event. Click on System then Create object then pick the enemy object on layer 0 at the position of X = 1000, Y = 900. Add another enemy at position X = 100 and Y = 900. You should have the original enemy in the upper right corner then the three created on the start of the layout at the other three corners of the game screen. Run layout to verify those show up properly.

Shortly after the game starts, we are going to point the enemy objects toward the player object. Add event, pick System, then pick "Compare time" and put in 0.5 for the time (leave the comparison as equals to). Click done to add this event ... which means fire off the associated action one-half of a second after the game starts. Add action and pick the enemy then in the Angle section, select "Set angle toward position" and click Next. The position of the player can change so we are going to put in an expression that tells the game what the player's current position is. For the X type in Player.X and for the Y type in Player.Y If you named your player something other than Player, type that name in instead of Player. When you start typing it will show you possible matches. Once you have that in, click on Done. Run layout and verify that after one-half of a second, all of the enemy objects start moving toward the player object.

As long as the player does not move this works ok but if the player does move then the enemy objects are going in the wrong direction. So add a new action to the "Every 3 seconds" event that sets the enemy's angle toward Player.X,Player.Y. See above for the specific instructions of how to add that action.

Play the Game

As you play the game you will probably notice that the enemy often gets hit by the paint balls. Try to move the player to get caught by the enemy. Try changing the time interval to longer for the paint balls to get launched.

Observe the events and actions that you created and make sure that you understand what each of them is doing.

Adjust your game or try out any variations that you would like.


Copyright © 2021 Eric Schumm. Permission granted to freely use this in your classroom.