[Unity] uGUIのボタン(Button (Legacy))の使い方

当ページのリンクには広告が含まれています。
目次

はじめに

UnityのuGUIであるButton (Legacy)は、ユーザーインターフェース(UI)で最も基本的かつ頻繁に使用される要素の一つです。
本記事では、Button (Legacy) の基本的な使い方から、見た目のカスタマイズ、クリックイベントの設定方法までをわかりやすく解説します。

ボタン(Button (Legacy))とは

ボタン(Button (Legacy))は、以下のコンポーネントで構成されたオブジェクトです。

  • Rect Transform
  • Canvas Renderer
  • Image
  • Button

また、子オブジェクトにテキスト (Text (Legacy)) を持っています。

「Rect Transform」と「Canvas Renderer」は他のオブジェクトと共通のコンポーネントです。

ImageとText (Legacy)については、下記の記事で解説しているため、本記事での解説を省略します。

本記事では、Buttonコンポーネントについて解説します。

ボタン(Button (Legacy))の基本

Button (Legacy) は、UnityのuGUI(Unity UI) システムにおける「ボタン型UIコンポーネント」です。
ユーザーのクリック(またはタップ)に応じて処理を実行するために使用します。

ボタンに表示するテキストの品質を上げたい場合は、もう一つのボタン型UIである、「Button – TextMeshPro」の使用を推奨します。

ボタン(Button (Legacy))の特徴

特徴説明
ユーザーインタラクション対応クリック/タップなどの入力イベントに反応
見た目の変更が容易色や画像、アニメーションなど多様なビジュアル表現が可能
他UIコンポーネントとの親和性Toggle, Slider, Dropdownなどと組み合わせやすい
旧来の安定機能新UI(UIToolkit)とは別のuGUI系だが、今も現役

ボタン(Button (Legacy))の基本的な使い方

ボタン(Button (Legacy))を使用するには、UI要素を配置するためのCanvasが必要です。
もし、シーンにCanvasが無い場合は、Canvasを作成してください。

キャンバス(Canvas)の作成:
「ヒエラルキー(Hierarchy)」ウィンドウを右クリック⇒UI⇒キャンバス(Canvas)
を選択してCanvasを作成します。

ボタン(Button (Legacy))の作成:
「ヒエラルキー」ウィンドウのCanvasオブジェクトを右クリック⇒UI⇒古い機能 (Legacy)⇒ボタン(Button)
を選択してButton (Legacy)をCanvasに追加します。

Buttonコンポーネントでは以下の項目を設定できます。

  • Interactable
  • 遷移 (Transition)
    • 遷移:色 (Color Tint)
      • ターゲットグラフィックス (Target Graphic)
      • 通常色 (Normal Color)
      • 強調色 (Highlighted Color)
      • 押下時の色 (Pressed Color)
      • Selected Color
      • 無効時の色 (Disabled Color)
      • カラー乗数 (Color Multiplier)
      • フェード間隔 (Fade Duration)
    • 遷移:スプライトスワップ (Sprite Swap)
      • ターゲットグラフィックス (Target Graphic)
      • Highlighted Sprite
      • Pressed Sprite
      • Selected Sprite
      • Disabled Sprite
    • 遷移:アニメーション (Animation)
      • Normal Trigger
      • Highlighted Trigger
      • Pressed Trigger
      • Selected Trigger
      • Disabled Trigger
  • ナビゲーション (Navigation)
  • 可視化 (Visualize)
  • クリック時 (On Click)

順番に解説していきます。

Interactable

Buttonがユーザー操作を受け付けるかどうかを制御するプロパティです。

説明
ON (true)Buttonが有効(クリック可能。)
OFF (false)Buttonが無効(クリック不可。見た目も変化する。)

InteractableとSetActiveの違い

機能InteractableSetActive
UI表示表示される非表示になる(完全に消える)
入力の受け付け無効化されるそもそもオブジェクトが存在しない
Transitionの動作色変化あり動作しない
Raycastの対象受けない存在しないため検知されない

スクリプトからInteractableを設定/変更する方法

using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour
{
	public Button myButton;	// ボタンオブジェクトをインスペクターからアタッチ

	void Start()
    {
		// 起動時は操作不可にする
		myButton.interactable = false;
	}
}

遷移 (Transition)

ボタンの状態(通常/ホバー/クリック/無効)に応じて、見た目を変える仕組みです。
これにより、ユーザーが「今ボタンを押せるかどうか」や「押下したかどうか」が視覚的に分かりやすくなります。

遷移には以下のモードがあります。

モード名説明特徴用途
なし
(None)
遷移なし(常に同じ見た目)常に固定デザインのボタン

(Color Tint)
状態ごとに色を変える(最も基本)・軽量でシンプル
・視覚的な変化を簡単に作れる
通常のボタン、クリック可能の視覚変化
スプライトスワップ
(Sprite Swap)
状態ごとに画像(スプライト)を切り替える・画像での演出に最適
・スプライト3枚以上を用意する必要あり
アイコン付きボタン、画像切替演出
アニメーション
(Animation)
アニメーションで遷移を表現(Animatorを使用)・高度な演出が可能
・自由度が高いがセットアップに時間がかかる
カスタム演出(スケーリング・回転など)

スクリプトから遷移を設定/変更する方法

using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour
{
	public Button myButton;	// インスペクターからアタッチ

	void Start()
    {
		// TransitionをNoneに設定
		myButton.transition = Selectable.Transition.None;

		// TransitionをColor Tintに設定
		myButton.transition = Selectable.Transition.ColorTint;

		// TransitionをSprite Swapに設定
		myButton.transition = Selectable.Transition.SpriteSwap;

		// TransitionをAnimationに設定
		myButton.transition = Selectable.Transition.Animation;
	}
}

遷移:色 (Color Tint)

ボタンの状態(通常・ホバー・押下・無効)に応じて色を変える視覚的な演出方法です。

ターゲットグラフィックス (Target Graphic)

ボタンの状態変化(Color Tint)によって色を変化させる対象のUI要素を指定するためのプロパティです。
通常は、ボタンにアタッチされている Image コンポーネントが自動でセットされます。

対象にできるコンポーネント一覧:

コンポーネント対象用途
Imageボタン背景画像
Text (Legacy)ボタンラベル
TextMeshPro高品質テキスト
RawImageテクスチャベースのUI
  • スクリプトからInteractableを設定/変更する方法
using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour
{
	public Button myButton;			// インスペクターからButtonをアタッチ
	public Image customTargetImage; // インスペクターからImageをアタッチ
	public Text myText;             // インスペクターからTextをアタッチ

	void Start()
    {
		// TransitionをColor Tintに設定
		myButton.transition = Selectable.Transition.ColorTint;

		// 例1:対象グラフィックを設定
		myButton.targetGraphic = customTargetImage;

		// 例2:ボタン押下時に文字色が変わるように設定
		myButton.targetGraphic = myText;
	}
}

通常色 (Normal Color)

ボタンに対して何の操作もしていない通常状態に表示される色です。

  • スクリプトから通常色を設定/変更する方法
using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {
	public Button myButton;         // インスペクターからButtonをアタッチ

	void Start()
	{
		// TransitionをColor Tintに設定
		myButton.transition = Selectable.Transition.ColorTint;

		// カラーブロックを取得/編集し、ボタンの通常色を青に設定する
		ColorBlock cb = myButton.colors;
		cb.normalColor = Color.blue;
		myButton.colors = cb;
	}
}

強調色 (Highlighted Color)

Buttonに対してユーザーがマウスカーソルを重ねたときやキーボード/ゲームパッドで選択状態になったときに表示される色です。
これは、ユーザーに対して「今このボタンが選ばれています」ということを視覚的に示す重要な設定です。

  • スクリプトから強調色を設定/変更する方法
using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {
	public Button myButton;         // インスペクターからButtonをアタッチ

	void Start()
	{
		// TransitionをColor Tintに設定
		myButton.transition = Selectable.Transition.ColorTint;

		// カラーブロックを取得/編集し、ボタンの強調色を黄に設定する
		ColorBlock cb = myButton.colors;
		cb.highlightedColor = Color.yellow;
		myButton.colors = cb;
	}
}

押下時の色 (Pressed Color)

ユーザーがボタンをクリックまたはタップして押し込んだときに表示される色です。
これは「ユーザーが今まさに操作を行っている」というフィードバック効果として機能します。

ボタンの押下が終わると、再び通常または強調に戻ります。

  • スクリプトから押下時の色を設定/変更する方法
using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {
	public Button myButton;         // インスペクターからButtonをアタッチ

	void Start()
	{
		// TransitionをColor Tintに設定
		myButton.transition = Selectable.Transition.ColorTint;

		// カラーブロックを取得/編集し、ボタンの押下時の色を赤に設定する
		ColorBlock cb = myButton.colors;
		cb.pressedColor = Color.red;
		myButton.colors = cb;
	}
}

Selected Color

Button が EventSystem によって選択されている状態のときに表示される色です。
これは「UIがフォーカスを持っている状態」を意味し、マウス操作ではなく、キーボードやゲームパッドによるUIナビゲーションにおいて主に使用されます。

Selected Colorを使用するためには以下の条件を満たす必要があります。
・ナビゲーション (Navigation)が有効(None以外)
・EventSystemがシーンに存在している
・StandaloneInputModule または InputSystemUIInputModule が入力を受けている
・選択されたオブジェクトを明示的にEventSystem.current.SetSelectedGameObject()で指定する(または自動で選択される状態)

  • スクリプトからSelected Colorを設定/変更する方法
using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {
	public Button myButton;         // インスペクターからButtonをアタッチ

	void Start()
	{
		// TransitionをColor Tintに設定
		myButton.transition = Selectable.Transition.ColorTint;

		// カラーブロックを取得/編集し、ボタンの選択時の色を設定する
		ColorBlock cb = myButton.colors;
		cb.selectedColor = Color.cyan;
		myButton.colors = cb;
	}
}
  • スクリプトからButtonオブジェクトを選択状態にする方法
using UnityEngine;
using UnityEngine.EventSystems;

public class ButtonManager : MonoBehaviour {
	public GameObject myButtonObj;

	void Start()
	{
		// 起動時に選択状態にする
		EventSystem.current.SetSelectedGameObject(myButtonObj);
	}
}

無効時の色 (Disabled Color)

Button.interactable = false (ボタン無効)のときに表示される色です。
ユーザーに対して「このボタンは現在使用できません」という状態を視覚的に伝えるための色です。

  • スクリプトから無効時の色を設定/変更する方法
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {
	public Button myButton;         // インスペクターからButtonをアタッチ

	void Start()
	{
		// TransitionをColor Tintに設定
		myButton.transition = Selectable.Transition.ColorTint;

		// カラーブロックを取得/編集し、ボタンの無効時の色を設定する
		ColorBlock cb = myButton.colors;
		cb.disabledColor = new Color(0.6f, 0.6f, 0.6f, 0.5f);	// 無効状態の色(薄いグレー + 半透明)
		myButton.colors = cb;

		// 無効化(押せなくする)
		myButton.interactable = false;
	}
}

カラー乗数 (Color Multiplier)

色 (Color Tint) モードで使用されるすべての色(Normal、Highlighted、Pressed、Disabledなど)に対して、最終的な色の明るさ(強さ)を乗算的に調整するパラメータです。
全体的なトーンの補正として使用できます。

色 (Color) に乗数をかけた場合のイメージ:

設定値表示される明るさの印象
Color: (1, 1, 1) × 1.0明るく表示される(通常)
Color: (1, 1, 1) × 0.5半分の明るさ(やや暗い)
Color: (1, 1, 1) × 2.0通常の2倍に強調(明るく強調)
  • スクリプトからカラー乗数を設定/変更する方法
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {
	public Button myButton;         // インスペクターからButtonをアタッチ

	void Start()
	{
		// TransitionをColor Tintに設定
		myButton.transition = Selectable.Transition.ColorTint;

		// カラー設定取得と変更
		ColorBlock cb = myButton.colors;
		cb.normalColor = Color.white;
		cb.highlightedColor = Color.yellow;
		cb.pressedColor = Color.red;
		cb.disabledColor = Color.gray;

		// カラー乗数を設定(明るさ調整)
		cb.colorMultiplier = 1.5f;

		// 設定反映
		myButton.colors = cb;
	}
}

フェード間隔 (Fade Duration)

ボタンの状態が変化したときに、その状態に対応する色へ”何秒かけて”変化させるかを指定する値です。

状況に合わせたおすすめ設定:

状況推奨値(秒)解説
通常(ナチュラルなUI)0.1〜0.2 秒スムーズな印象、ユーザーに違和感を与えない
高速なレスポンスを演出0.05 秒eスポーツや高速UI、機械的な操作感
即座に色を切り替えたい0 秒色が瞬時に変わる(フェード無し)
ゆっくり変化させたい0.3〜0.5 秒リッチなUI表現、高級感を演出
  • スクリプトからフェード間隔を設定/変更する方法
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {
	public Button myButton;         // インスペクターからButtonをアタッチ

	void Start()
	{
		// TransitionをColor Tintに設定
		myButton.transition = Selectable.Transition.ColorTint;

		// カラー設定取得と変更
		ColorBlock cb = myButton.colors;
		cb.normalColor = Color.white;
		cb.highlightedColor = Color.yellow;
		cb.pressedColor = Color.red;
		cb.disabledColor = Color.gray;

		// カラー遷移のフェード間隔を設定
		cb.fadeDuration = 0.2f;

		// 設定反映
		myButton.colors = cb;
	}
}

遷移:スプライトスワップ (Sprite Swap)

Buttonの状態(通常・ホバー・押下・無効)に応じて、Imageコンポーネントのスプライト画像を差し替えることで見た目を変える演出方法です。

ターゲットグラフィックス (Target Graphic)

ボタンが状態(通常・ホバー・押下・無効)に応じて変化させる対象となる UI のImageコンポーネントです。

Highlighted Sprite

ユーザーがボタンにマウスカーソルを重ねたとき(ホバー時)や、キーボード/ゲームパッドで選択したときに表示されるスプライト(画像)です。

Pressed Sprite

ボタンが「押されている」状態(=クリック中、またはタッチ中)、またはマウスの左ボタンが押されている間、タッチデバイスで指が触れている間に表示されるスプライト(画像)です。

Selected Sprite

UIナビゲーション(キーボードやゲームパッド)でボタンにフォーカスがある状態(EventSystem によって選択状態になったとき)に表示される画像(スプライト)です。
PCやコンソールゲームで、選択されているUI要素を明示する目的で使われます。

Selectable.navigation を有効にし、明示的に EventSystem.current.SetSelectedGameObject() などで選択状態を作る必要があります。

Disabled Sprite

無効状態(interactable = false)で表示される画像(スプライト)です。
「このボタンは現在操作できない(使用不可)」ことを明示するために用います。

スクリプトからスプライトスワップ (Sprite Swap)を設定/変更する方法

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

public class ButtonManager : MonoBehaviour {
	// Button本体への参照(インスペクターからアタッチ)
	public Button myButton;

	// 遷移先として使うImage(Target Graphic)への参照(インスペクターからアタッチ)
	public Image targetImage;

	// 各状態のスプライト(インスペクターからアタッチ)
	public Sprite normalSprite;
	public Sprite highlightedSprite;
	public Sprite pressedSprite;
	public Sprite selectedSprite;
	public Sprite disabledSprite;

	void Start()
	{
		// 1. Buttonの遷移モードをSprite Swapに設定
		myButton.transition = Selectable.Transition.SpriteSwap;

		// 2. 対象となるImage(スプライトを差し替えるGraphic)を指定
		myButton.targetGraphic = targetImage;

		// 3. 通常状態のスプライトをImageに適用(Image.spriteにセット)
		targetImage.sprite = normalSprite;

		// 4. SpriteState構造体を作成し、各状態のスプライトを代入
		SpriteState spriteState = new SpriteState();

		// マウスホバーやフォーカス時に表示されるスプライト
		spriteState.highlightedSprite = highlightedSprite;

		// 押下中に表示されるスプライト(クリックまたはタッチ中)
		spriteState.pressedSprite = pressedSprite;

		// フォーカス状態(選択中)に表示されるスプライト(キーボード/パッド操作向け)
		spriteState.selectedSprite = selectedSprite;

		// ボタンが無効(interactable = false)のときに表示されるスプライト
		spriteState.disabledSprite = disabledSprite;

		// 5. ButtonにSpriteStateを適用
		myButton.spriteState = spriteState;
	}
}

遷移:アニメーション (Animation)

ボタンの状態変化(通常 → ホバー → 押下など)に応じて、Animator Controller 内のアニメーショントリガーが実行されるようになります。

Normal Trigger

他の状態(ホバー・押下など)から通常状態に戻るときに使用されます。

Highlighted Trigger

マウスカーソルがボタン上にある or 選択状態(キーボード/ゲームパッド操作)になったときに使用されます。

Pressed Trigger

ボタンが押された瞬間(クリック or タップ)に使用されます。。

Selected Trigger

UIの選択状態(ゲームパッドやTabキーでの選択)にあるときに使用されます。

Disabled Trigger

ボタンが interactable = false の状態になったときに使用されます。

Auto Generate Animation

Transition を「Animation」に設定した際に、Unity が自動的に Animator Controller と状態ごとのアニメーションクリップを生成してくれる機能です。

自動生成されるもの:

種類名前(例)内容
Animator ControllerButton_Animator.controllerボタンに設定されるステートマシン
Animation ClipsButton_Normal.anim など状態ごとのアニメーションクリップ(全5種類)
トリガー名Normal, Highlighted, Pressed, Selected, Disabled各ステート遷移の条件トリガー
遷移各アニメーション間の遷移設定Trigger を使ったステート遷移(即時遷移)

スクリプトからアニメーション (Animation)を設定/変更する方法

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

public class ButtonManager : MonoBehaviour {
	// アニメーションで制御したいButton
	public Button myButton;

	// AnimatorControllerを持つGameObject(通常はButton自体)
	public Animator buttonAnimator;

	void Start()
	{
		// 1. 遷移モードをアニメーションに設定
		myButton.transition = Selectable.Transition.Animation;

		// 2. ※ Animator(Animator Controller付き)は InspectorでButtonのGameObjectに設定済みとする

		// 3. AnimationTriggers構造体を作成し、トリガー名を設定
		AnimationTriggers triggers = new AnimationTriggers();

		// 通常状態に戻るときに使われるトリガー名
		triggers.normalTrigger = "MyNormal";

		// マウスホバーまたは選択時に使われるトリガー名
		triggers.highlightedTrigger = "MyHighlighted";

		// 押下(クリック中)で使われるトリガー名
		triggers.pressedTrigger = "MyPressed";

		// 選択状態(キーボード・パッドで選ばれている)で使われるトリガー名
		triggers.selectedTrigger = "MySelected";

		// 無効化状態(interactable = false)のときに使われるトリガー名
		triggers.disabledTrigger = "MyDisabled";

		// 4. 設定をButtonに適用
		myButton.animationTriggers = triggers;
	}
}

ナビゲーション (Navigation)

キーボード・ゲームパッドなどの入力デバイスを使って UI を移動(フォーカス)するための制御機能です。
Unity の ButtonToggle などの Selectable系 UIコンポーネント に共通して使用されます。

使用場面:

  • Tabキーや矢印キーで 次のボタンに移動
  • ゲームパッドの上下左右で UIのフォーカスを変更
  • フォーカスされたボタンを Spaceキーや Enterキーで 押下

Navigation のモード:

モード名説明
Noneナビゲーションを無効にする(このUIにフォーカスが移動しない)
Horizontal左右方向(←→)だけにフォーカスが移動
Vertical上下方向(↑↓)だけにフォーカスが移動
AutomaticUnityが自動的に上下左右を判断してナビゲーションを設定
Explicit開発者が「上・下・左・右」の遷移先を明示的に指定する(詳細制御向け)

スクリプトからナビゲーション (Navigation)を設定/変更する方法

  • Explicitモードの設定例
using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {
	public Button buttonA;
	public Button buttonB;
	public Button buttonC;

	void Start()
	{
		// ------------------------
		// 1. Button A → Button B → Button C
		//    の縦方向ナビゲーションを設定する
		// ------------------------

		// Button A の Navigation 設定
		Navigation navA = new Navigation();
		navA.mode = Navigation.Mode.Explicit;
		navA.selectOnDown = buttonB; // ↓でButtonBへ移動
		buttonA.navigation = navA;

		// Button B の Navigation 設定
		Navigation navB = new Navigation();
		navB.mode = Navigation.Mode.Explicit;
		navB.selectOnUp = buttonA;   // ↑でButtonAへ
		navB.selectOnDown = buttonC; // ↓でButtonCへ
		buttonB.navigation = navB;

		// Button C の Navigation 設定
		Navigation navC = new Navigation();
		navC.mode = Navigation.Mode.Explicit;
		navC.selectOnUp = buttonB;   // ↑でButtonBへ
		buttonC.navigation = navC;
	}
}
  • Automaticモードの設定例①
buttonA.navigation = Navigation.defaultNavigation;
  • Automaticモードの設定例②
Navigation autoNav = new Navigation();
autoNav.mode = Navigation.Mode.Automatic;
buttonA.navigation = autoNav;
  • 初期選択UIを明示する設定例
using UnityEngine;
using UnityEngine.EventSystems;

public class ButtonManager : MonoBehaviour {
	public GameObject firstSelected;

	void Start()
	{
		EventSystem.current.SetSelectedGameObject(firstSelected);
	}
}

可視化 (Visualize)

Inspector の Navigation セクション右上に表示される Visualize ボタンをクリックすると、
Sceneビューに「矢印(Arrow)」が表示され、他のUIへのナビゲーション接続が見えるようになります。

これは、キーボードやゲームパッドによるUI移動経路を直感的に確認するためのデバッグツールです。

クリック時 (On Click)

Button コンポーネントがクリック(またはタップ)されたときに呼び出されるイベント(UnityEvent)です。
「このボタンが押されたときに、何か処理を実行したい」というときに使用します。

イベントが発行される操作:

操作方法On Click イベントが発行されるか?
マウス左クリック発行される
スマホでのタップ発行される
キーボードで選択後Enter発行される
ゲームパッドで選択後決定発行される
マウス右クリック発行されない

イベント登録できる関数の条件:

  • public void 関数名()
  • 引数無し、または限定された1つの型のみ(stringやint)

スクリプトからクリック時 (On Click)を設定/変更する方法

  • インスペクターに登録した関数を呼ぶ方法
using UnityEngine;

public class ButtonManager : MonoBehaviour {

	// Button の On Click からこの関数を呼び出す
	public void OnButtonClicked()
	{
		Debug.Log("ボタンが押されました!");
	}
}
  • onClick.AddListener()を使用して動的に関数登録する方法
using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {

	public Button myButton;

	void Start()
	{
		// ボタンのクリックイベントにリスナーを追加
		myButton.onClick.AddListener(OnClicked);
	}

	// クリック時に呼ばれる関数(引数なし)
	void OnClicked()
	{
		Debug.Log("ボタンがクリックされました(AddListener)");
	}
}
  • onClick.AddListener()とラムダ式を使用して引数付きの関数を動的登録する方法
using UnityEngine;
using UnityEngine.UI;

public class ButtonManager : MonoBehaviour {

	public Button myButton;

	void Start()
	{
		// 引数付き関数を登録する場合はラムダ式でラッピングする
		myButton.onClick.AddListener(() => DoSomething("Hello", 1234));
	}

	void DoSomething(string message, int number)
	{
		Debug.Log($"{message} - {number}");
	}
}

ボタン(Button (Legacy))のパフォーマンス最適化

ボタン(Button (Legacy))のパフォーマンスに関する基礎知識

頻繁な再描画

  • 問題点
    • Button は Graphic(通常は Image) を持っており、色変更やアニメーション時に再描画が発生する
    • 状態変化(ホバー、押下、無効化など)で SetVerticesDirty() が頻発する
  • 対策
    • 状態が変わらないときは Color Tint の変化頻度を抑える(例:Fade Duration を0にする)
    • アニメーション頻度や UI の動的更新を最小限に抑える

大量のSelectable

  • 問題点
    • Sceneに多数のボタン(例:100個以上)があると、内部的にNavigation・イベント処理のオーバーヘッドが増える
    • EventSystemが毎フレーム、ナビゲーション対象をチェックするため負荷が蓄積
  • 対策
    • ボタンを動的に生成する場合、表示中のUIに絞ってアクティブ化する
    • 不要なナビゲーション(Navigation.Mode.Automatic)を None に切り替える

OnClick イベントの過剰利用

  • 問題点
    • ボタンに重い処理(ロード、演算、Instantiateなど)を直結すると フレーム落ち・クリック遅延が発生
  • 対策
    • OnClick ではできるだけ処理を「トリガー」に限定し、実処理は Coroutine や 非同期処理(Async) に分離
    • 重い処理を一時無効化中に排除する(interactable = false)

Canvas 再構築の連鎖

  • 問題点
    • Button は Graphic を持つため、親の Canvas に影響を与えやすい
    • クリック時に Text や Image を切り替えると、Canvas全体のRebuild(Layout/Batching) が走ることがある
  • 対策
    • Canvas を分割して「動的UI」と「静的UI」を分ける
    • Canvas に CanvasGroup や SetActive() を使うのではなく、enabled フラグや alpha 変更にする

描画バッチングへの影響

  • 問題点
    • 状態ごとに異なるスプライトを使う Sprite Swap モードでは、バッチングが崩れて Draw Call が増える
  • 対策
    • 可能であれば Color Tint を使い、スプライトの差し替えを避ける
    • スプライトの Packing Tag を統一し、Sprite Atlas によるバッチ最適化を行う

まとめ

UnityのuGUIにおけるButton (Legacy) は、UI開発において非常に重要な役割を果たします。
基本的な使い方からカスタマイズ、イベントの設定方法までを理解することで、よりインタラクティブでユーザーフレンドリーなUIを構築できるようになります。
ぜひ、この記事を参考にして、ボタンの活用方法をマスターしてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次