【UGUI】ボタンインタラクションが大きくなる効果を実現する方法

Unity では、ボタン上にマウスを置くとボタンが大きくなる効果を実現するスクリプトを追加できます。

まず、Button オブジェクトを選択し、「イベントトリガー」コンポーネントをインスペクターパネルに追加します。「Event Trigger」コンポーネントに、PointerEnter と PointerExit の 2 つのイベントを追加します。

次に、ボタンのスクリプトを追加します。このスクリプトでは、マウスポインタがボタン領域に入るとボタンのサイズが増加し、マウスポインタがボタン領域から離れるとボタンのサイズは元のサイズに戻ります。コードは次のとおりです。

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

public class ButtonResize : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    private Vector3 originalScale;

    // 获取Button的初始大小
    private void Start()
    {
        originalScale = transform.localScale;
    }

    // 当鼠标指针进入Button区域时，将Button的大小增加
    public void OnPointerEnter(PointerEventData eventData)
    {
        transform.localScale = originalScale * 1.2f;
    }

    // 当鼠标指针离开Button区域时，将Button的大小恢复原来大小
    public void OnPointerExit(PointerEventData eventData)
    {
        transform.localScale = originalScale;
    }
}

このスクリプトを Button オブジェクトに追加して、マウスを Button の上に置くと Button が大きくなる効果を実現します。

「イベントトリガー」コンポーネントを追加し、PointerEnter イベントと PointerExit イベントを追加したにもかかわらず、スクリプト内に OnPointerEnter 関数と OnPointerExit 関数が見つからない場合は、スクリプトが対応するインターフェイスを正しく実装していない可能性があります。スクリプトクラスが正しいインターフェイスを宣言していることを確認してください。これは IPointerEnterHandler および IPointerExitHandler として宣言する必要があります。これら 2 つのインターフェイスには、OnPointerEnter と OnPointerExit という 2 つの関数が含まれています。

【UGUI】ボタンインタラクションが大きくなる効果を実現する方法

おすすめ