Hiero Match : Adding Start Menu GUI

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 create menu GUI for the game.  we would need complete game project files from the book, you can download it here.

First we would like to duplicate our current scene (game.scene), select our “_scenes/game” from Project View and then go to Edit > duplicate (CTRL + D), now our scene is duplicated. rename copied scene with name ‘menu’.

We  will create our menu GUI just look like images below.

GUI menu Layout

GUI menu Layout

We need some GUI Texture assets to create the GUI, download GUI assets below via tweet and Get it

Tweet&getit is powered by Viuu

the very reason why we duplicate our game scene because we will re-use ‘background’ model for our menu, instead of generated tiles, we show our Game title and play/quit button.  So, Open our new scene ‘menu’ and remove tileGenerator Object from Hierarchy View because we didn’t need it anyway. Create new Empty Game Object, rename it to ‘menuGUI’. Create new C# script and rename it to ‘menuGUI’ and copy code bellow (or just import from downloaded package above).

using UnityEngine;
using System.Collections;

public class menuGUI : MonoBehaviour {

	//Rectangle for define GUI Area / Grouped GUI
	public Rect menuArea;
	//Rectange for define GUI Start Button
	public Rect startGame;
	//Rectange for define GUI Quit Button
	public Rect quitGame;
	//Rectange for define GUI Game Title
	public Rect menuLabel;
	//Variable to store Texture for GUI Game title
	public Texture2D menuLabelTexture;
	//GUI Skin to define style
	public GUISkin menu;
	// Use this for initialization
	void Start () {
		Camera.main.transform.position = new Vector3(2.25f,2.25f,-8f);

	// Update is called once per frame
	void Update () {


	void OnGUI(){
		//apply defined GUI Skin
		GUI.skin = menu;
		//create Grouped GUI
		//create GUI game title
		GUI.Label(new Rect (menuLabel), menuLabelTexture);
		//create GUI start button
		if(GUI.Button(new Rect(startGame),"Start Game")){

		//create GUI quit button
		if(GUI.Button(new Rect(quitGame),"Quit Game")){



Put menuGUI script into menuGUI game object components on Hierarchy View (drag it and drop it into menuGUI Game Object). Don’t forget to make scene ‘menu’ to be first executed scene. Open File > Build Settings, and you can re-order your scene build there.

Laslyt we have to configure our menuGUI script component on menuGUI game object on Hierarchy View, we edit properties from Inspector View, just like the image below, note that you can also modified this value as you want, try to experimenting to get what you really want.

menuGUI (script) properties

menuGUI (script) properties

Don’t forget to place SkinNew GuiSkin into Menu option, and also select menulabel texture from our downloaded assets into Menu Label texture option. Now you can test it with play button on unity3D windows, and Voila, you have new Start Game GUI !

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. ウエディングドレス

  2. Gill says:

    I like this post, enjoyed this one appreciate it for putting up.

  3. [...] Tiles Removed 3. Heiro Match : Speeding Up The Timer Whenever Tiles didn’t Matched 4. Heiro Match : Adding Start Menu GUI 5. Heiro Match : Add New Challenge “Rotating Tiles” [...]

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.