Hiero Match : Add New Challenge “Rotating Tiles”

Unity 3 Blueprints

Unity 3 Blueprints

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 start from chapter 2 and finished to chapter 3.

In this post, I will show you how to add new challenge to the game. Last time we add  shuffled tiles for every game  as challenge to our game. Now we want to add new challenge whenever tiles is matched, we will move position of tiles clockwise or counter clockwise based on tiles position, see the image below for movement of each tile.

tiles rotation

tiles rotation

This challenge will make the player need more focus to remember where tiles located and how far tiles has been moved till now. To animate tile movement just like in our DEMO GAME, we need new Animation such as, slide up (position y + 1.5), slide down (position y – 1.5), slide left (position x – 1.5) and slide right (position x + 1.5) and append it to every prefab of tiles. To create such animation we should learn how to create animation curve in unity, I assume that everyone that follow this tutorial has the Unity 3 Blueprints book or e-book. so, we would not have a in-deep tutorial on making animation in unity3d, as it’s already written on chapter 3 on the book. If you are too lazy learning animation curve in unity3d, just download My complete prefab assets including it’s animation that we would use in this tutorial. Download by tweet and get it button below


Tweet&getit is powered by Viuu

Import all assets from package above, and we start by edit our tileGenerator.js script. First, we add these variable below

//define variable to be pointer to selected game object
var selectTile : GameObject;
//define variable store poition x coordinate of selected game object
var selectPosX : float;
//define variable store poition y coordinate of selected game object
var selectPosY : float;

After we define all variables above, we will create our ‘slideTiles()’  function to manage how tiles slide / move around and which animation played for each tiles. Copy these codes below to our tileGenerator script.

function slideTiles(){
	//looping for all tiles game object from tileObjects
	for (var i = 0; i < tileObjects.Length; i++){
		//find gameobject still exist on the scene
		if (GameObject.Find(tileObjects[i].name+"(Clone)")){
			//gameobject assigned to selectTile variable as temporary pointer
			selectTile = GameObject.Find(tileObjects[i].name+"(Clone)");
			//create temporary 'Empty' game object to be parents of selected tiles
			//because animation position will be started from global / parent world (0.0.0)
			//so we will create Empty Game Object to contains selected tiles, so it's animation
			//will start from it's parent position
			var temp : GameObject = new GameObject("Temporary");
			temp.transform.position = selectTile.transform.position;
			temp.tag = "Temporary";

			selectTile.transform.parent = temp.transform;
			print("select find tiles : " + selectTile.name);
			//get selected tiles X-pos and Y-pos
			selectPosX = selectTile.transform.position.x;
			selectPosY = selectTile.transform.position.y;
			//get tiles that move left
			if (((selectPosY == 4.5) && (selectPosX != 0)) || ((selectPosX == 3) && (selectPosY == 1.5))){
				selectTile.transform.animation.Play("slideleft");
				print("tiles : " + selectTile.name + "go Left");
			//get tiles that move down
			}else if (((selectPosX == 0) && (selectPosY != 0)) || ((selectPosX == 3) && (selectPosY == 3))){
				selectTile.transform.animation.Play("slidedown");
				print("tiles : " + selectTile.name + "go Down");
			//get tiles that move right
			}else if (((selectPosY == 0)&&(selectPosX != 4.5)) || ((selectPosX == 1.5)&&(selectPosY == 3))){
				selectTile.transform.animation.Play("slideright");

				print("tiles : " + selectTile.name + "go Right");
			//others tiles move up
			}else{
				selectTile.transform.animation.Play("slideup");
				print("tiles : " + selectTile.name + "go Up");
			}

		}
	}
}

from code above we will conclude that for every tiles we need a parent object. The problems is we need animation to start from it’s current position, not from global position (0.0.0) , as we know that native unity3D didn’t support to create animation that started from dynamic position / delta position of game obejcts, but it’s always started from position (0,0,0). But no worry,  it can be done by utilize gameObjects parent-child characteristic of unity3d. We would using Empty game object as parent object, which we set to have position exactly same to our tiles as child object. So our selected tile (as a child object) will have global position (0,0,0) same as it’s local position (x,x,x), weird huh? (0,0,0) == (x,x,x)?. That’s because our child object will have global position relatively to it’s parent global parents location. so (0,0,0) of selected tiles will be translated as (x,x,x) of it’s parents which is same as (x,x,x) of selected tiles on global location. It’s a bit confusing to understanding parent – child relation in Unity3D hierarchy. We could use trial and error method to check it’s characteristic on your own.

After we finish with our sliding/movement function, now we have another problems. Because we always created Temporary ‘Empty’ game object on each iteration, so it’s always increasing in number everytime we call slideTiles() function. It’s can slowing down the game and takes much memory when running. We need to remove/destroy every Temporary Game Object when it’s unused (didn’t have child). We create new function named ‘deleteEmptyTemporary()’. put these code below  into tileGenerator script.

function deleteEmptyTemporary(){
	//find all Temporary game object
	var arrayObj : GameObject[] = GameObject.FindGameObjectsWithTag("Temporary");
	for(var obj:GameObject in arrayObj){
		//checking how much game object has child
		var childs = obj.transform.childCount;
		//if gameobject didn't have child, destroy it
		if (childs < 1) {
			Destroy(obj);
		}
	}

}

New we have all necessary variable and function, we just need to call it when we got a match on revealcardTwo() function.

function revealCardTwo(){
	//some code from revealCardTwo()

		if (tName1[0] == tName2[0]){
			//some code from revealCardTwo()
			Destroy(matchOne);
			Destroy(matchTwo);

			//we start sliding tiles after we destroy two mathed tiles
			slideTiles();

			yield new WaitForSeconds(1);
			//delete all empty temporary game object
			deleteEmptyTemporary();

			//some code from revealCardTwo()
		}else{
			//some code from revealCardTwo()
		}
	//some code from revealCardTwo()

}

Now you can test it with play button on unity3D windows, and Voila, your tiles position has been rotated whenever we get a match !
You can try the modified game here >>

and also checking our Hiero Match tutorial.
1. 2. Hiero Match : Adding Exploding Particles Whenever Tiles Removed
3. Hiero Match : Speeding Up The Timer Whenever Tiles didn’t Matched
4. Hiero Match : Adding Start Menu GUI
5. Hiero Match : Add New Challenge “Rotating Tiles”
6. Hiero Match : Polish Your Game a Little bit ‘Shine’

4 Opinion to this post

  1. Marina says:

    It’s hard to find your articles in google. I found it on 17 spot,
    you should build quality backlinks , it will help you to increase traffic.
    I know how to help you, just search in google – k2 seo tricks

  2. daseinbags blog says:

    Just to let you know, this post seems a little bit weird from my android cellphone. Who knows perhaps its just my cellphone. Great article incidentally.

  3. [...] Up The Timer Whenever Tiles didn’t Matched 4. Heiro Match : Adding Start Menu GUI 5. Heiro Match : Add New Challenge “Rotating Tiles” 6. Heiro Match : Polish Your Game a Little bit ‘Shine’ : we will add a game music [...]

  4. [...] Sliding Tile Sound, we need to play it whenever our tiles sliding / move due too new challenge create on tutorial 5. Put this line below before we call slideTiles() function on revealCardTwo() [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment moderation is enabled. Your comment may take some time to appear.