teachinTech


Reduce Redundant Code

In this activity we are going to look at ways to code a little smarter and reduce redundant code.

Turn In: CodeReuse.capx file

In this activity, we are going to look at having multiple event sheets in a game project, including one event sheet in another event sheet, and also look at functions.

Each layout in Construct 2 can be associated with either one event sheet or no event sheets. More than one layout can use the same event sheet or each layout can have its own event sheet.

Setting Up the Project with Multiple Event Sheets

Start a new empty project in Construct 2.

In the upper right side of Construct 2, pick the Projects tab. Rename Layout1 to Level1. Rename Event sheet 1 to esLevel1 (the es prefix differentiates the Level1 Layout from the Level1 Event sheet when looking at the tabs in a project).

Right click on the Layouts folder and pick "Add Layout" then pick "Add event sheet". Rename the new layout to Level2 and rename the new event sheet to esLevel2.

On the Level1 layout, insert the Touch object.

Also on the Level1 layout, add a new sprite called Coin that is a yellow circle. Duplicate the coin so there are 5 of them.

Switch to the Level2 layout, add a new sprite called Diamond that looks like an orange diamond. Duplicate the diamond so that there are 5 of them. Drag the coin out to the Level2 layout and duplicate it so that there are 5 of them (see note below if you don't see the coin).

Note: If you do not see an object that you have already created, right click in the Objects box (lower right corner) and pick "Filter objects" then "All project objects".

In the Projects window (top right side of Construct 2), right click on the Level2 layout and pick the Duplicate option then change the "Layout 1" name to "Level3". In the Projects window, right click on the "Event sheets" folder and pick "Add event sheet" and change the name "Event sheet 1" to esLevel3. Left click on the Level3 layout in the Projects window then on the upper left side of Construct 2 in the Properties window, click on esLevel2 and change it to esLevel3.

Double click on Level3 in the Layouts folder of the Projects window to open the Level3 tab in the middle of Construct 2. Notice that the coins and diamonds that you put on Level2 are already there (since we duplicated the Level2 layout). Add a new sprite called Stripes which has blue stripes on a white background. Duplicate the stripes sprite so that there are 5 of them.

Add a new Text object named LevelName to the current layout then place that Text object in the upper left corner of the window. Select each of the other two layouts and drag the LevelName object from the Objects box to the upper left corner of the window.

Add a new text object named ShowPoints to the layout and place it across the top of the layout from the middle then stretched to the right hand side of the visible window. For the Text property of the ShowPoints text object, remove the word Text. Switch to the other two layouts and put the ShowPoints object at the same location and of the same size.

To quickly review, each layout (named Level1, Level2, and Level3) has their own event sheet (named esLevel1, esLevel2, and esLevel3) allowing you to have different events for each layout. Some layouts have the same objects on them and certain objects are only on specific layouts.

A Common Set of Events

The downside of having different event sheets for each layout is when something is the same across the layouts then you have to do it on each event sheet.

In a best of both worlds scenerio, we can have a common event sheet for things that are the same across layouts and then use the individual event sheets for things specific to each layout (in this case our Level1, Level2, and Level3 layouts).

Right click on the Event sheets folder and click "Add event sheet". Change the name of the event sheet to CommonEvents.

On each of the event sheets (esLevel1, esLevel2, esLevel3) right click in the blank area of the Event sheet then pick "Include event sheet". Select the sheet "CommonEvents".

If we Run layout, the word Text would appear on each of the layouts where the text named LevelName is. We could manually change that on each layout. Rather we are going to use our CommonEvents to change that name each time a layout is started.

Select the CommonEvents tab, Add event, pick System->On start of layout, then Add action, LevelName->Set text, and in the text type in the word LayoutName without any quotes and click Done. LayoutName holds the name of the current layout.

Run layout and depending on which layout you have selected or is the default, that name will show in the upper left corner. Click on a different layout then Run layout to see it change.

We are going to add a few events to the CommonEvents event sheet that is included on the other event sheets and other events specific to individual event sheets. We need a few global variables so lets add those in first.

On the CommonEvents event sheet ... right click in the blank area and pick "Add global variable" with name of Points and inital value of 0. Add another global variable named TotalPoints with the value of 0.

In our game, we get one point for touching a coin, two points for touching a diamond, and three points for touching the stripes.

On the CommonEvents event sheet ... Add event, Touch->On touched object, click Next, pick Coin, click Done. Add action, System->Add to, click Next, pick the variable Points and the value of 1, then. Add action, System->Add to, click Next, pick the variable TotalPoints and the value 1, then click Done. Add action, pick Coin, then pick Destroy and click Done. Add action again and pick the ShowPoints object and the Set text property. For the text, put in the line listed below exactly how you see it (or copy/paste it) then click Done.

"Level Points: " & Points & " Total Points: " & TotalPoints

Click on the Level1 layout and Run layout. Click or touch each of the five coins. When you touch the coin it should disappear and both points and total points should increase by 1. Back in Construct 2, click on the Level2 tab and Run layout, you should see the diamonds and coins ... click on both types ... the coins should disappear and score points but the diamonds will not. We did not do add an event for the diamonds but we did for the coins on the CommmonEvents which is included on the esLevel2 event sheet.

While we could add events for the diamonds and the stripes, we are instead going to look at using functions to reduce our code.

Functions

A function is a set of actions that can be ran as part of several different events. A function reduces the amount of code needed if specific actions are repeated. It makes maintaining the code easier and less error prone.

Click on either the Level1, Level2, or Level3 layout and then double-click somewhere on the layout and select Function from the list of available objects. Nothing will appear on the layout but Function will show up in the Project list and in the Object window.

For our game, we need to add points to both the points for the level and also the total points when they click on the coin, diamond, and stripes. The action is the same except the number of points is different for each object.

What we will do is create a function named AddPoints that takes one parameter ... the number of points. So when we click on the coin then the parameter value is 1 and when we click on the stripes the parameter value is 3.

On the CommonEvents event sheet, click on Add event, pick Function, click Next, pick On function, click Next, type in "AddPoints", and click Done. Next to the Function AddPoints, click on Add action then pick System, click Next, pick AddTo, click Next, pick the variable Points and for the value type in the following:

Function.Param(0)

then click on Done. This says to take the information (called a parameter) passed to the function and add it to the Points variable. For the same event, Add action then System->AddTo, click Next, pick TotalPoints for the variable and put the same expression as done above then click on Done.

We have the function defined, now we need to call it. On the CommonEvents event sheet ... Add event, Touch->On touched object, click Next, pick Diamond, click Done. For the Touch Diamond event, click Add action, pick Function, click Next, pick Call function, click Next, type in "AddPoints" as the name, click on the Add parameter link, for the Parameter 0 type in 2 then click on Done. This tells the AddPoints function to add 2 (the parameter) to the Points and TotalPoints. Repeat this for the Stripes but add 3 for parameter 0 instead of adding 2.

Pick the Level2 layout then Run layout. Click on a Coin then click on a Diamond then click on another Coin.

Notice that the score is only updating when you click the coin but the points for the diamond are still being added in. Also notice that no points are displayed when game first starts.

The reason for these display issues is that we are only updating the score when the coin is touched. We also need to update it when the layout starts and when the diamond and stripes are touched.

This is another good place to use a function since we may want to change how the points line looks and do not want to make that change in a lot of different places. We are going to create a function with no parameters to update the point display then call the function from a few different locations.

On the CommonEvents event sheet, Add event, pick Function, click Next, pick On function, click next, type in "ShowPoints", and click Done. Find the ShowPoints->Set text action by the "On touched Coin" event and drag that action down to "Function On ShowPoints". This is the action we are going to take for the ShowPoints function.

We need to call the function in a few different places. First, in the AddPoints function, click on Add action, pick Function, click Next, pick Call function, click Next, in the Name type in "ShowPoints", then click on Done. In the "System->On start of layout" event add the action to call the function "ShowPoints" (see the previous steps for how to do that).

Pick the Level2 layout and Run layout. On startup the points line should be displayed. When you touch either coins or the diamonds the points should be updated.

Events Effecting Just One Layout

Each level (i.e. Level1) has its own event sheet (i.e. esLevel1) so anything we do on the specific event sheet (i.e. esLevel1) will only affect that level. While we could do a lot of different things on a level, we are going to illustrate this by simply putting in the check for number of points to then move to the next level.

Select on the esLevel1 event sheet. Add event, System->Compare variable, click Next, type Points for the Variable then the Comparison of "Greater or Equal" and the Value of 5. Add action, System->Set value, click Next, type in Points for the Variable and Value of 0. Add action, System->Go to layout, click Next, pick Layout the select Level2. This fires off the event when the points is 5 (all 5 coins on Level1 have been touched) then it sets the points to 0 (because we are going to a new level where the points for the level starts over) and game play goes to Level2.

Click on Level1 then Run layout. Touch the coins and as you do watch the points. When you touch the 5th coin, you should see Level2, the points should be 0, but the total points will be 5.

We are going to do something similar for Level2. Click on the esLevel2 event sheet. Add the same event as on esLevel1 except use the value of 10 instead of 5. Add the actions like on esLevel1 except pick Level3 as the layout to go to instead of Level2.

Click on Level1 then Run layout. Touch the 5 coins on Level2 then touch enough points to get to 10 points on Level2 (diamonds are 2 points and coins 1 point so you can do 3 diamonds for a total 6 points then 4 coins for the rest of the 4 points needed). You should be on Level3

We could do the same for esLevel3 but let's practice copy and pasting. Click on the esLevel2 and then click at the beginning of the event to select the entire line (event and action). To copy that selection (event and action) you can either hold the Ctrl key and press C _or_ you can right click on the selected item and pick the Copy option. Click on the esLevel3 event sheet then press Ctrl-V to paste the selection in. Double-click on the Points greater than or equal to 10 to change that condition. Change Points greater than or equal to from 10 to 20 and click on Done. Double-click on the Goto Level3 and change that to Level1 (this keeps the game going between the three levels).

Click on Level1 then Run layout. Touch your 5 coins to move to Level2, touch 10 points on Level2 to go to Level3, then touch 20 points (stripes are worth 3) to go to Level1. Verify that all works.

Wrap Up

You can easily add levels, put in a "you win" page, add more game play to either the CommonEvents (works across all levels), or add more game play to any of the specific levels.

Having different event sheets for different layouts combined with including an event sheet on each of those (like our CommonEvents event sheet) provides you with a lot of flexibity to easily do different things on layouts and also common tasks across layouts.

Functions are useful for collecting common tasks and keeping those in one location while running those tasks from multiple locations. When you find yourself repeating the same actions ... think "can I reduce my code using a function".


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