【3D】UIボタンのマウスオーバー【Unity6】

unity技術

UIボタンのボタンコンポーネントでマウスオーバー設定を使用すると、ボタンを押しつつそのままドラッグでボタンから離れた場合、変化した画像がそのままになる現象があります。
その回避方法を2つ。

簡易版

  • Sprite Swap」を使用する場合は「Navigation」設定を「None」にする。
  • Event Trigger」を使用する場合は、まずは「スクリプト」を作成。
  • Event Trigger」追加後、「Pointer Enter」「Pointer Exit」「Pointer Down」「Pointer Up」を設定。

ボタンコンポーネントのマウスオーバー機能/説明

ボタンコンポーネントの設定で3種類のマウスオーバー機能を付与することができます。

Transition

  • None
  • Color Tint
  • Sprite Swap
  • Animation

None

トランジションなし。
ボタンの状態が変化しても見た目に変化はありません。
シンプルなボタンや特定のカスタムスクリプトを使用している場合に利用します。

Color Tint

ボタンの状態に応じてを変更します。
通常の状態、ホバー状態、押下状態、無効状態ごとに異なる色を設定できます。

  • Normal Color:通常の状態の色。
  • Highlighted Color:ホバー状態の色。
  • Pressed Color:押下状態の色。
  • Selected Color:選択状態の色。
  • Disabled Color:無効状態の色。
  • Color Multiplier:色の乗算係数。
  • Fade Duration:色が変わる際のフェード時間。

Sprite Swap

ボタンの状態に応じてスプライトを変更します。
通常の状態、ホバー状態、押下状態、無効状態ごとに異なるスプライトを設定できます。

  • Highlighted Sprite:ホバー状態のスプライト。
  • Pressed Sprite:押下状態のスプライト。
  • Selected Sprite:選択状態のスプライト。
  • Disabled Sprite:無効状態のスプライト。

Animation

ボタンの状態に応じてアニメーションを再生します。
ボタンの各状態に対応するアニメーションクリップを設定することで、より良いビジュアル効果を実現できます。

  • Normal Trigger:通常の状態のアニメーショントリガー。
  • Highlighted Trigger:ホバー状態のアニメーショントリガー。
  • Pressed Trigger:押下状態のアニメーショントリガー。
  • Selected Trigger:選択状態のアニメーショントリガー。
  • Disabled Trigger:無効状態のアニメーショントリガー。

Sprite Swap を使用したい場合

ボタンコンポーネントの「Sprite Swap」を使用すれば簡単にマウスオーバーを付与することができますが、ドラッグ問題が発生します。

操作をマウスのみにする場合には「Navigation」設定を「None」にすることで、ドラッグ問題は解決されました。

Navigation」は、配列されているボタンの移動順を決める設定なので、コントローラーやキー操作なども併用する場合は必要になる機能です。

Event Trigger と スクリプト を使用する場合

Event Trigger」を使用して各自設定することにより、問題の回避ができました。
新規スクリプトを作成し、ボタンオブジェクトにアタッチしてから「Event Trigger」を追加しましょう。

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

public class ImageChanger : MonoBehaviour
{
public Sprite normalImage;
public Sprite hoverImage;
public Sprite pressedImage;

private Image image;

private void Awake()
{
image = GetComponent();
image.sprite = normalImage;
}

public void OnPointerEnter()
{
image.sprite = hoverImage;
}

public void OnPointerExit()
{
image.sprite = normalImage;
}

public void OnPointerDown()
{
image.sprite = pressedImage;
}

public void OnPointerUp()
{
image.sprite = normalImage;
}
}

ボタンコンポーネントの「Transition」は「None」にします。

作成したスクリプトをボタンオブジェクトにアタッチして、スクリプトコンポーネントを追加します。

  • Normal Image:通常の状態のスプライト。
  • Hover Image:ホバー状態のスプライト。
  • Pressed Image:押下状態のスプライト。

Event Trigger」を追加します。
その後「Pointer Enter」「Pointer Exit」「Pointer Down」「Pointer Up」を設定します。
指定する関数部分はスクリプト内の対応している関数を指定します。

コメント