2Dボタン要素（2DオブジェクトおよびUIボタン）にマウスオーバー機能を付与します。
ボタンのカーソルが乗ったときに変化、離れたときに元画像へ戻る、といった挙動です。
簡易版
- C#スクリプト作成。
- EventTriggerコンポーネント追加。
- 「PointEnter」「PointExit」追加、設定。
新規スクリプト作成
新規スクリプトを作成し、カーソルがボタンに触れたとき・離れたときに起動する関数を記述していきます。
ファイル名は任意です。今回は「ButtonIC」としました。
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class ButtonIC : MonoBehaviour
{
public Sprite highlightedSprite; // カーソルが重なったときの画像
private Image buttonImage;
private Sprite normalSprite; // ボタンの通常の画像
void Start()
{
buttonImage = GetComponent();
normalSprite = buttonImage.sprite; // ボタンの通常の画像を記憶する
}
// カーソルがボタンに重なったときの処理
public void OnPointerEnter()
{
buttonImage.sprite = highlightedSprite; // カーソルが重なったときの画像に変更する
}
// カーソルがボタンから離れたときの処理
public void OnPointerExit()
{
buttonImage.sprite = normalSprite; // 通常の画像に戻す
}
}
作成したスプリクトをボタンオブジェクトにアタッチして、スクリプトコンポーネントを追加します。
アタッチが完了したら、
変数フィールド（Highlighted Sprite）に変更後に表示したい画像を登録します。
スクリプト作業は以上です。
イベントトリガー・PointerEnter／PointerExit 枠追加
コンポーネント追加で「EventTrigger」及び「PointerEnter」「PointerExit」を追加します。
EventTriggerは「～したら」という条件を付けられるコンポーネントです。
その中の「PointerEnter」は「カーソルが～に触れたら」という条件になります。
「PointerExit」は「カーソルが～から離れたら」という条件になります。
「Add Conmponent」ボタンを押して「EventTrigger」を追加します。
「Event」>「EventTriger」を選択します。
「EventTrigger」が追加されたら、「Add New Event Type」で「PointerEnter」を追加します。
インスペクターに「EventTrigger」及び「PointerEnter」が追加されれば成功です。
同じく「Add New Event Type」で「PointerExit」も追加します。
EventTrigger内に「PointerExit」が追加されれば成功です。
これでイベントトリガー内に2つのイベントタイプ「PointerEnter」「PointerExit」の枠が追加されました。
PointerEnterに関数指定
追加できた「PointerEnter」のリストを増やし、この条件下で起動するスクリプト内関数を指定します。
つまり、スクリプトをアタッチしたボタンオブジェクトとスクリプト内の関数の2つを登録します。
PointerEnter枠の「+」を押すとリストが追加されます。
まずはボタンオブジェクトを登録。
「No Function」タブから、
作成したスクリプト「ButtonIC」内の関数「OnPointerEnter()」を指定します。
「PointerEnter」の設定は以上です。
PointerExitに関数指定
追加できた「PointerExit」のリストを増やし、この条件下で起動するスクリプト内関数を指定します。
同じく、スクリプトをアタッチしたボタンオブジェクトとスクリプト内の関数の2つを登録します。
PointerExit枠の「+」を押すとリストが追加されます。
こちらもボタンオブジェクトを登録。
「No Function」タブから、
作成したスクリプト「ButtonIC」内の関数「OnPointerExit()」を指定します。
「PointerExit」の設定は以上です。
コメント