UI/Image を UI/Button の代わりに使う

Image を貼り付けた任意の GameObject にちょっと記述を追加するだけで、ボタンの代わりにする事ができます。

  • 絵の切り替えだけでボタンを作りたい
  • 独自の表示演出をいれたい
  • ボタンを押せなくしたい。その際の視覚的な部分も調整したい

などなど、ボタンに独自の機能を追加したい場合、こちらの方が楽に色々追加しやすいです。
表題では Image としましたが、Canvas 下に置く UI であれば、なんにでも使えると思います。

ソースコード

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

[RequireComponent(typeof(Image))]

public class ButtonSample : MonoBehaviour, IPointerClickHandler, IPointerDownHandler, IPointerUpHandler, IPointerEnterHandler, IPointerExitHandler
{
	Image	image;
	
	void Start()
	{
		image = GetComponent<Image>();
	}
	/// <summary>
	/// ボタンをクリックした時
	/// </summary>
	void IPointerClickHandler.OnPointerClick(PointerEventData eventData)
	{
		Debug.Log("CLICK");
		image.color = new Color(1f, 0f, 0f);
	}
	
	/// <summary>
	/// ボタンを押した瞬間
	/// </summary>
	void IPointerDownHandler.OnPointerDown(PointerEventData eventData)
	{
		Debug.Log("DOWN");
		image.color = new Color(1f, 0.7f, 0.7f);
	}
	
	/// <summary>
	/// ボタンを離した瞬間
	/// </summary>
	void IPointerUpHandler.OnPointerUp(PointerEventData eventData)
	{
		Debug.Log("UP");
		image.color = new Color(1f, 1f, 1f);
	}
	
	/// <summary>
	/// ボタンにマウスカーソルが触れた
	/// </summary>
	void IPointerEnterHandler.OnPointerEnter(PointerEventData eventData)
	{
		image.color = new Color(0.9f, 0.9f, 1f);
		Debug.Log("ENTER");
	}
	
	/// <summary>
	/// ボタンからマウスカーソルが離れた
	/// </summary>
	void IPointerExitHandler.OnPointerExit(PointerEventData eventData)
	{
		image.color = new Color(1f, 1f, 1f);
		Debug.Log("EXIT");
	}
}

動作例