Image Puzzle 8: Identify When a Tile is in the Correct Position

In this lesson we’re going to tell the game how to identify when the tile is in the correct position – when it is at the correct angle.

We are also going to learn about variables:

  • Variable – a variable in game making is something that holds information that varies or changes. For example, a variable might be the speed that something moves at which varies when different conditions are met (For example, gets slower when it is clicked). In Construct 3 there are two types of Variables, Global and Instance.
  • Global Variable – this is a variable, something that holds information, which applies to the whole game. For more about global variables see HERE.
  • Instance Variable – a variable which is unique to that instance.

We are going to use both Global and Instance Variables in this lesson.  As every tile needs to store in its own instance variable, information about the angle that particular tile has turned.

Why Use Variables?

We are using variables to store the information about the angles that the pieces have turned. We need to know the angle that the pieces turned when the game starts, so we know the angle that the pieces need to be turned to return them to the correct position. 

We will use Instance Variables to store the angle that the piece has been turned at the start. We will then use the Instance Variables to record the angles that the player turns the piece. This will enable the game to recognize when the angle of the tile is back to the start position.

1/ Add an Instance Variable

To add an instance variable to an object, click on the object you wish to add the instance variable to and then look in the left hand panel. You will see an option to Add Instance Variable.

Click to add an instance variable and a panel will open for you to enter the details.

Tip: When naming instance variables, start the name with an i or iv. This will help to clearly identify them if you have several things with similar names (for example, here, we’ve named it iv_angle, to clearly distinguish it from other uses of the term ‘angle’).

There is no need to change anything else in this window:

Note: The properties panel on the left is now beginning to show us a lot of information about the tiles object. We can see the behaviour that is added (tween) and the instance variables created. This is handy to refer to when you are looking to see how an object will behave.

2/ Add a Global Variable

To add a global variable, right click on the event sheet and select ‘Global Variable’.

Name the new variable something like g_angle (starting global variables with a g_, as with using I or IV for instance variables, helps to distinguish them). 

There is no need to change anything else.

2/ Set the Instance Variable

We now need to set the instance variable so it records the angle the puzzle piece is rotated at the start.

To do this, we need to set the instance variable and make a change to the event ‘On Start of Layout’.

Add a new action by clicking the Add action button in the On Start of Layout event.

Select the Tiles object and look for Instance variables in the panel. Select ‘Set Value’

,

We now want to set the value to choose(90,180,270). The instance variable will then hold this number for each of the tiles in the puzzle. 

We now need to amend the Tween action so, instead of the Tween action choosing the tile angle, we want the Tween action to use the angle stored in the instance variable. 

Double click in the Tween action to open the options panel and change the end value to Tiles.iv_angle. This is saying that we want the angle of the tile to be turned on start so it is the same angle that is held in the instance variable. This means we will know the angle of each tile.

Reorder by dragging the actions so the action setting the instance variable is ABOVE the Tween action as you can see in the image below.

Note: The system will run through the actions consecutively. Therefore, we need to be sure we instruct the system to set the instance variable with the angle BEFORE we tell the Tween action which angle to set the tiles to.

Use the preview to check that the tiles are still randomly rotating.

3/ Subtract Angle For Each Click

There’s one thing left to do in this part of the set up and that’s to subtract 90 from the instance variable for each tap on the tile. 

To do this, we need to add another action to our Touch event. The instance variable was set to the angle the tile was turned at the start. Let’s say the instance variable was set to 270, that means the player needs to tap the tile three times to return it to the 0 position. We therefore want the system to subtract 90 degrees for each tap.

‘Add Action’ in the Touch event and select the Tiles object. Under ‘Instance Variables’ select ‘subtract from value’


Now we need to tell the system to subtract 90 from the iv_angle instance variable.

4/ Test the Variable

We can use the Debug Preview to check this is working. Select Debug in the Preview panel at the top of the page.

The game will run as normal, however you will see you can inspect the objects and elements in the game.

Select any puzzle tile and you will see the instance variable set. Now click on that tile and you will see the instance variable reduce until it reaches 0.

5/ Stop the Tile Rotating When It Is Correct

Note: This makes an easier version of the puzzle. We’ll look at changing this when we look at different options we could use to increase the complexity of the puzzle.

When the tile is rotated back to the correct position, we want the tile to no longer be rotated when it is clicked. 

Therefore we need to add another condition to the Tile Touch Event. We want to tell the touch event to turn the tiles when the tile is touched, when there’s no tween action playing and the instance variable IS NOT 0.

Click to add another condition and this time select the Tiles object, and then look for Compare Instance Variable.

We want the system to check for the instance variable for that tile is 0 (back to the start position). Therefore, the parameter check should look like this:

Now we need to INVERT this (right click and select Invert) to tell the system to only rotate the tile if the instance variable IS NOT 0.

Test the puzzle and check the pieces do not rotate when they are back in the correct position.

Save the project.