Image Puzzle 7: Kid’s Puzzle – Player Controls

In this lesson we’re going to apply the player controls, so the player can click to turn the pieces.

This isn’t difficult, but it does take a bit of thought.

We’ll start by adding an event which tells the system that when the tile is tapped, it must be rotated.

1/ Add Touch Event

This is the same process we used to add the touch event for the restart button.

Go to the Event Sheet and then Add a New Event.

Make the Event a Touch Event which should apply to the Tiles object.

2/ Add a Tween Action

We now want to apply a tween action in the same way that we did with the puzzle set up. Select Add an Action and choose ‘Tween single property’. 

We want the tile to rotate at 90 degrees each time the tile is touched. Therefore, we are using ‘Self’ as part of the command. ‘Self’ means the instance that has been clicked. 

Therefore the command below is saying that the system is to take the angle of ‘self’ (the object just clicked) and to turn it to -90 degrees (counter clockwise – if you want it to rotate clockwise, make it +90 degrees).

The parameter box should look like this:

When you have finished, the completed event should look like this:

To recap, this event is saying ‘when the tile is touched, rotate the tile -90 degrees from its current angle.

3/ Test The Game

Now we’ll test the game. Click on the preview button and then tap a few tiles, you will see how they rotate.

However, double tap on the tiles in quick succession, and you’ll see all sorts of craziness happens!

We need to avoid the cards being rotated with a double tap. 

This is easy to do!

4/ Don’t Allow Tiles to be Clicked While Rotating

We have used the ‘tween’ behaviour to rotate the tiles after being clicked. We also set the rotation animation to run over 0.5 seconds.

Therefore, to avoid double clicking, we can simply tell the system to ignore any clicks which happen when a tile is actually rotating.

To do this, we will set up a second condition. We can nest several conditions together to control the game, for example to only take an action when the object is red AND the number is nine, or to only take an action when the apple is moving left AND the orange is moving right.

We can also invert the condition, therefore say to only take an action when the apple is NOT moving right and the orange is NOT moving left.

We want to tell the system to take an action when the tile is clicked AND the tween animation is NOT playing.

Therefore, click under the Tile Touch event and select ‘add another condition’

Then select the Tile object and select the ‘Is Any Playing’ option.

Now, this is currently telling the system to rotate the tiles when the tile is touched AND the animation is playing.

However, we need to change this so it tells the system to rotate the tiles when the tile is touched AND the animation isn’t playing.


Therefore, we can invert this condition (so the opposite is true).


Right click on the condition we just made and select ‘Invert’.

The finished event should now look like this.

Test the puzzle using the preview and save.