はじめに
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
- 遷移:色 (Color Tint)
- ナビゲーション (Navigation)
- 可視化 (Visualize)
- クリック時 (On Click)
順番に解説していきます。
Interactable
Buttonがユーザー操作を受け付けるかどうかを制御するプロパティです。
値 | 説明 |
---|---|
ON (true) | Buttonが有効(クリック可能。) |
OFF (false) | Buttonが無効(クリック不可。見た目も変化する。) |
InteractableとSetActiveの違い
機能 | Interactable | SetActive |
---|---|---|
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
を設定/変更する方法
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要素を明示する目的で使われます。
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 Controller | Button_Animator.controller | ボタンに設定されるステートマシン |
Animation Clips | Button_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 の Button
や Toggle
などの Selectable系 UIコンポーネント に共通して使用されます。
使用場面:
- Tabキーや矢印キーで 次のボタンに移動
- ゲームパッドの上下左右で UIのフォーカスを変更
- フォーカスされたボタンを Spaceキーや Enterキーで 押下
Navigation のモード:
モード名 | 説明 |
---|---|
None | ナビゲーションを無効にする(このUIにフォーカスが移動しない) |
Horizontal | 左右方向(←→)だけにフォーカスが移動 |
Vertical | 上下方向(↑↓)だけにフォーカスが移動 |
Automatic | Unityが自動的に上下左右を判断してナビゲーションを設定 |
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() が頻発する
- Button は
- 対策
- 状態が変わらないときは 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を構築できるようになります。
ぜひ、この記事を参考にして、ボタンの活用方法をマスターしてください。
コメント