Hiero Match: Adding Start Menu GUI

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, I will show you how to create a menu GUI for the game.

Creating the Menu Scene

First, duplicate your current scene (game.scene) by selecting "_scenes/game" from the Project View and going to Edit > Duplicate (CTRL + D). Rename the copied scene to "menu."

The reason we duplicate the game scene is to reuse the 'background' model for our menu instead of generated tiles. We display the game title and play/quit buttons instead.

1. Open the new 'menu' scene
2. Remove the tileGenerator Object from the Hierarchy View
3. Create a new Empty Game Object and rename it to 'menuGUI'
4. Create a new C# script and rename it to 'menuGUI'

Code Implementation

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
		GUI.BeginGroup(menuArea);
		//create GUI game title
		GUI.Label(new Rect (menuLabel), menuLabelTexture);
		//create GUI start button
		if(GUI.Button(new Rect(startGame),"Start Game")){

			Application.LoadLevel("game");
		}
		//create GUI quit button
		if(GUI.Button(new Rect(quitGame),"Quit Game")){

			Application.Quit();
		}

		GUI.EndGroup();
	}
}

Configuration

Put the menuGUI script into the menuGUI game object component in the Hierarchy View (drag and drop). Make the 'menu' scene the first executed scene by opening File > Build Settings and reordering your scene build there.

Configure the menuGUI script component properties from the Inspector View — modify these values and experiment to achieve your preferred appearance.

Don't forget to place "SkinNew GuiSkin" into the Menu option and select the menulabel texture into the Menu Label texture option.

Now test it with the play button — you have a new Start Game GUI!

This is part 4 of the Hiero Match series.