How to match 2 UI objects with Pointer Click?


I’m still very much a beginner with Unity and am using Unity 5.0 currently.

I’m using a world space canvas that has a panel with a gird layout. The layout will hold 20 square images. The squares will be randomized in position and will have a pair (10 unique images). The goal is to click on the two matching images.

How can I compare the two images clicked to confirm they match then set them to invisible to avoid the grid layout group auto arranging the remaining images? I imagine it would be a combination of a script and the event trigger PointerClick? I’m new to coding and am using C# so I don’t have a lot of experience. I believe I would need to create a public string in the script that would go on the prefab that would let me give the images a name and it would compare them the name in the string? Would someone be able to point me in the right direction and possible provide some example code or if they know of a tutorial video I’d be happy to watch. I haven’t been able to find anything as of yet.

Thank you for your time and assistance.


I came up with this solution (using unity 4.6 but it should be close to your version, at least I hope):

So I work with 4 images in the example and I use their name to check if they Match

This is the hierarchie in my scene:

Each image should have this set up :

(You might need to add event->Event Trigger component and UI->selectable)
I did it with colors but you can of course set the appropriate sprite to your image.
The set-up can all be done from the inspector or via script depending on how you generate your board.

About event trigger: when you click on the image it is selected and it calls the function CheckMatch from GameHandler.cs (see below)

Then I have this script “GameHandler.cs” to check the match between the images (this script can be on any gameobject, in my scene its on camera):

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using System.Collections.Generic;

public class GameHandler : MonoBehaviour {

	public EventSystem mySystem;
	public List<Selectable> selectables;
	private GameObject lastSelectedObject;

	void Start(){

		selectables = Selectable.allSelectables;


	public void CheckMatch() {

		if (lastSelectedObject == null)
			lastSelectedObject = mySystem.currentSelectedGameObject;
		Debug.Log ("Select & Checking Match..");

		if (mySystem.currentSelectedGameObject != lastSelectedObject) {

			//Debug.Log ("Last Selected : " + lastSelectedObject);
			//Debug.Log("Current Selected : " + mySystem.currentSelectedGameObject);

			if ( =={

				Debug.Log ("Image Match !");


				Debug.Log ("Images Not Matching");




	void UpdateBoardAfterSuccess(){

		// I brutaly set the whole gameObject to unActive but you could just disable the image component
		lastSelectedObject.SetActive (false);
		mySystem.currentSelectedGameObject.SetActive (false);
		ResetBuffers ();


	void ResetBuffers(){

		lastSelectedObject = null;
		mySystem.SetSelectedGameObject (null);

Hope it helps :slight_smile: