teachinTech


Using Touch

Mobile devices are very commonly used to play games. The primary interface for a mobile device is touch. This activity introduces the touch object in Construct2.

Turn In: Touch-Testing.capx file

Responding to touch events is essential when working with mobile devices. The touch object in Construct2 will also respond to using the mouse which makes testing nice and also allows games with a touch interface to also work with a mouse.

Note: This activity is very similar to the Mouse activity.

This activity provides different and unrelated tasks to explore some of the different things that touch works in Construct2. These items can be used in previous or future games.

For this activity, create a new project called Touch-Testing.capx with the window and layout size of 480 by 320.

Insert a new sprite object and named it RedBlock. In Edit image, click on the Resize button (two arrows) and change it to 30 by 30. Choose the Fill icon on the left side of the editor and pick red as the color then fill in the box and close Edit image. In the Objects box, right click on the RedBlock and pick the Clone option. If you do not see RedBlock2 in the Objects window, right click in that area, pick Filter objects then pick "All project objects". Right click on RedBlock2 and choose rename using the name GreenBlock. Click and drag GreenBlock onto the Layout1. Double-click on the GreenBlock (which is still red) to open it in the Edit image tool and use the Fill button to make the block green. Repeat the process of clone, rename, drag onto Layout1, and change color so that you have the following: BlueBlock, BlackBlack, GreyBlock, PinkBlock, and OrangeBlock.

Also, insert a new sprite called Arrow, resize it to 30 pixels wide and 50 pixels high. Draw/paint an arrow pointing toward the top of the screen. Click on icon across the top that says "Rotate 90 degrees clockwise" (hover your mouse over the icons to see their names). The arrow should now be pointing to the right side.

Add the Touch Object

In order to use most of the capabilities of a touch in your games, you need to add the Touch object.

Double-click somewhere on the empty part of Layout 1, click Insert new object then from the Input section, pick Touch.

The Touch object appears in the Projects window and also in the Objects window but there is nothing to put on the layout. Adding this object enables some items on the Event sheet that were not previously available.

Arrow Pointer

We are going to use the arrow to show us when touch is taking place and the direction of the touch. On Event sheet 1, add the event System->Every tick. Then Add action ... Arrow->Set angle toward position. In the X box, type in Touch.X and in the Y box type in Touch.Y ... notice that as you start typing, Construct2 shows you items that are available.

Run layout and touch different parts of the screen. Since many computers do not have touch, use your mouse to simulate touch by clicking, click and hold, double-click, etc. You should see the arrow point to the location of the touch (or mouse click) as you do it. The every tick is checking 60 times every second. Construct2 finds the point of the touch going left to right (the X) position and sets the angle of the arrow to that value. Also, it finds the top/bottom (or Y) position and sets the arrow to that position.

Types of Touch

This section will go through a few examples of common types of touch that a game might need to respond to ... tap, double-tap, hold, and is touching.

Tap is a briefly touching a specific location. To illustate, we are going to rotate the green block 15 degrees each time it is tapped.

On Event Sheet 1, Add event, choose Touch, click Next, pick "On tap object", click Next, choose the GreenBlock, then click Done. Add action, pick GreenBlock, click Next, pick "Rotate clockwise", click Next, put 15 in for the degrees, click Done. Run layout and click once on the GreenBlock, it should rotate. Try to click and hold and notice it does not move. Try some different types of clicks (or if you have a touch screen then touches).

Double-tap is tapping twice in a very short amount of time. We are going to change the opacity of the black block to a random value each time the black box is double-tapped. This will make the black box appear either lighter or darker.

On Event Sheet 1, Add event Touch->On double-tap object with BlackBlacok as the object. Add action of BlackBlock->Set opacity with the value of random(25,100) ... that will choose a random value between 25 which is pretty light and 100 which is the normal color of the block. Run layout and try different types of clicks/touches on the BlackBlock. Only the double-tap should change the opacity of the block.

Hold is touching a specific location for a some amount of time (longer than a tap). We are going to duplicate a few red blocks then destroy them when the hold event fires off.

While holding the Ctrl key, click on the RedBlock and drag it to a different location. Repeat that process until you have 5 red blocks with some space between them.

On Event Sheet 1, Add event Touch->On hold over object with RedBlock as the object. Add action of RedBlock->Destroy. Run layout and then test out the different types of touches (or clicks) on the red block. You should have to touch and hold (or click and hold) for the red block to disappear.

Some games use on-screen touch controls to move the players around. We are going to do a simple example of this with grey blocks being our movement controls and the orange block will move accordingly. In an actual game, the touch controls would be on a separate layer with the Parallax of 0,0 so the controls did not move. Some might use a non-visible object on each side of the screen so when touched it would move that direction.

Add the 8Direction behavior to the OrangeBlock. Duplicate the GreyBlock so there are four of them positioned so they can be used for up, down, left, and right. This is one way to do the controls, another way is a separate sprite created for each direction. Select one of the GreyBlock objects then click on "Instance variables" in the Properties. Click on the plus sign then use Direction for the name and Type of Text then click on Ok and close the Instance variable box. Click on the left grey block and in the properties under Instance variables type in Left for Direction. Click on the right grey block and put in Right for the Direction instance variable. Type in Up and Down for the remaining two grey blocks.

On Event Sheet 1, Add event Touch->Is touching object with the GreyBlock as the object. Add action OrangeBlock->Simulate control then pick Left and click Done. Run layout and click on any of the grey blocks, notice that the orange blocks move to the left. Back on the Event sheet 1, right click on the "Is touching" event we just created and pick "Add another condition". GreyBlock->Compare instance variable with Direction as the variable, the comparison of Equal to, and the value of "Left" (the quotes are needed with the word left). Run layout and verify that only the left grey block moves the orange block.

We are going to duplicate that event 3 times to cover right, up, and down. Click between the line number and the Touch event so that the entire event/action is highlighted. Hold down the Ctrl key and press the C key to copy. Hold down the Ctrl key and press V to paste. Press the V key (while holding Ctrl) two more times so there are a total of four events with the grey block. The first event should stay as left. In the second of the grey block events, double-click on the Direction condition and change "Left" to "Right". Double-click on the Simulate Left action and change the Left to Right. Do the same for up and down so you have four events covering left, right, up, and down. Run layout and verify that the four grey blocks will move the orange block up, down, left, and right.

Drag and Drop

The drag and drop behavior will also work with touch. Add the Drag & Drop behavior to the BlueBlock. Run layout and verify that you are able to drag the blue block around.

To wire an event up to this behavior, we are going to create new blue blocks any place that we drag the blue block ... will appear that you are painting the screen.

On Event Sheet 1, Add event BlueBlock->Is dragging. Add action System->Create object. Select the BlueBlock as the object, layer of 0, then put Touch.X for the X and Touch.Y for the Y and click on Done. Run layout and drag the blue block around, it should create additional blue blocks and look like you are point with blue.


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