Hiero Match: Speeding Up The Timer Whenever Tiles Didn't Match

Hiero Match is a matching/pairing game tutorial using Unity3D from the book Unity 3 Blueprints, written by Craig Stevenson and Simon Quig, and published by Deep Pixel. This tutorial starts from chapter 2 and finishes in chapter 3.

In this post, we add a timer effect: whenever tiles fail to match, the timer accelerates.

Step 1: Add New Variables

Add three new variables to store font styling, track time depletion, and flag acceleration status:

//variable to store how much time was decreased during the gameplay
var timeDepleted = 0;
//variable to save state whenever time is speeding up or no
var isTimeDecreased = false;
//variable to store a Gui font style
var Style : GUIStyle;

Step 2: Modify Timer Display in onGUI()

Change the font style of the GUI Label when isTimeDecreased is true:

//create timer string with following format MM.DD
text = String.Format("{0:00}.{1:00}", txtMinutes, txtSeconds);
if (this.isTimeDecreased == false) {
	//create GUI Label with standart GUISkin whenever time isn't speeding up
	GUI.Label(Rect(10,50,150,40), text);
}else{
	//create GUI Label with costumized GUIStyle whenever time is speeding up
	GUI.Label(Rect(10,50,150,40), text, Style);
}

Step 3: Calculate GUI Time with Time Depletion

Modify the timer calculation to include the timeDepleted variable. Replace var guiTime = Time.time - startTime; with:

//change method to get guitime by adding timeDepleted variable
var guiTime = Time.timeSinceLevelLoad - startTime + timeDepleted;
//Time.timeSinceLevelLoad to reset guiTime everytime Level Loaded

Step 4: Create Speeding Effect in revealCardTwo()

Add the following code within the revealCardTwo() function when tiles don't match (condition if (tName1[0] != tName2[0])):

function revealCardTwo(){
	// ~~ some revealCardTwo code() from the book

		if (tName1[0] == tName2[0]){
			// ~~ some revealCardTwo code() from the book
		}else{
			canClick = false;
			// set state isTimeDecreased true
			this.isTimeDecreased = true;
			// timer speeding up effect
			for (var i=0; i<3; i++) {
				//adding value of timeDepleted to increase guitime
				timeDepleted+=1.0f;
				// wait for 0.25 seconds to create speeding up effect
				yield new WaitForSeconds(0.25f);
			}
			// set state isTimeDecreased false
			this.isTimeDecreased = false;

			// ~~ some revealCardTwo code() from the book
		}
	// ~~ some revealCardTwo code() from the book
}

Step 5: Configure GUIStyle Properties

Navigate to the Hierarchy View and select the tileGenerator object. In the Inspector View, expand the Style properties and customize the Font Size, Font Style, and Font Color under Normal properties. Experiment with various settings to achieve your desired visual effect.

This is part 3 of the Hiero Match series.