UnityでボタンからUI表示を切り替える方法｜SetActiveとAnimator

2016年12月2日2026年10月3日

ボタンでUIを開く・閉じるだけなら、ButtonのOn Click()からGameObject.SetActive(bool)を設定できます。一つのボタンで交互に状態を切り替える場合は、AnimatorにON/OFFの状態と遷移を作る方法があります。目的に合う方を選ぶと、不要なアニメーション設定を減らせます。

対象はuGUIのButtonです。Unity 6.3とuGUI 2.0の公式資料を参照していますが、今回のUnityでの設定・再生は未実施です。後半のSepiaTone画像は旧版作例として残し、現在のUnityやURPで同じ手順が動く証拠にはしません。

開く・閉じると、交互の切り替えの違い

目的・症状	設定・確認先
開くボタンと閉じるボタンを別に作る	On Click()にGameObject.SetActive(bool)を登録。開くはtrue、閉じるはfalse
一つのボタンでOFF→ON→OFF	常時有効な親のAnimatorとON/OFFのクリップ、Triggerで交互に遷移
画像だけを一時的に隠す	ImageのEnabledを制御する方法なら、GameObjectや他のコンポーネントは有効のまま
パネル配下の機能も止める	GameObjectの非アクティブ化。ただし制御ボタン・Animatorを一緒に無効化しない

方法1：On Click()でパネルを開く・閉じる

Canvasの子にTargetPanelとOpenButtonを作ります。OpenButtonはTargetPanelの外に置き、パネルを閉じても操作できるようにします。
OpenButtonのButtonコンポーネントでOn Click()の「+」を押し、TargetPanelをObject欄へドラッグします。
関数はGameObject → SetActive(bool)、boolのチェックはONに設定します。これは常に開く処理であり、一回ごとに反転する処理ではありません。
閉じるボタンにもTargetPanelを登録し、SetActive(bool)のチェックをOFFにします。閉じるボタンはパネル内に置いても、外に残したOpenButtonで再度開ける構成です。
必要なら再生前にTargetPanelを非アクティブにします。OpenButtonとCanvas/EventSystemは有効なまま残し、開く→閉じる→再度開くことを確認します。

SetActiveは対象のローカル状態を変更します。親が非アクティブなら子だけtrueにしても表示されません。表示対象のImageだけでなく、配下のスクリプト・入力・コルーチン等も止まる条件があるため、見た目だけの変更と区別してください。

方法2：一つのボタンでAnimatorの状態を交互に切り替える

まず一枚のImageだけを隠す最小例にします。Canvasの子に常時有効なDisplayRootを作り、その子にTargetImage、DisplayRootの外にSwitchButtonを配置します。AnimatorはDisplayRootへ追加し、TargetImageのImageコンポーネントのEnabledだけを記録します。親やAnimator自身の有効状態は記録しません。

OFF/ONクリップの記録

DisplayRootを選択してAnimationウィンドウを開き、CreateでDisplayOff.animを保存します。作られたAnimator ControllerがDisplayRootのAnimatorへ割り当てられていることを確認します。
DisplayOffの0フレームで録画をONにし、TargetImageのImageコンポーネントのチェックをOFFにします。GameObject名の左側にあるアクティブチェックとは別です。Add PropertyでTargetImageのImageのEnabledを追加する方法でもかまいません。
1フレームにも同じOFF値のキーを置き、録画を解除します。クリップをPreviewして、そのImageが隠れることを確認します。
Animationのクリップ一覧からCreate New ClipでDisplayOn.animを作ります。同じEnabledプロパティに0フレーム/1フレームともON値を記録して、録画を解除します。
両クリップで記録したプロパティが同じImageのEnabledだけであることを確認します。Transformや親のアクティブ状態を誤って記録したキーがあれば外します。

Image.EnabledをOFFにしても、子の文字や別のImageまで一括で隠れるわけではありません。パネル全体を隠す目的では方法1、または常時有効な親から子のアクティブ状態を制御する別構成を選びます。

ステート・Trigger・両方向の遷移

AnimatorにOffとOnの2ステートを用意し、Motionへ対応するDisplayOff/DisplayOnを割り当てます。最初の状態をOffにするならSet as Layer Default StateでOffを既定にします。
ParametersへTrigger型のSwitchを追加します。名前は大文字小文字も含めてボタン側と一致させます。
OffからOn、OnからOffへそれぞれTransitionを接続します。両方のConditionsにSwitchを設定します。
両方のTransitionでHas Exit TimeをOFF、Transition Durationを0に設定します。時間待ちやブレンドを使わない切り替え例です。
自動遷移やAny Stateからの追加遷移はこの最小例には作りません。Controllerを確認し、再生前にはAnimationの録画・Previewを終了します。

Triggerは遷移条件を発火させるパラメーターです。boolのON/OFF値を保存するものとは役割が違います。Has Exit Timeが有効な場合は終了時刻の条件も加わるため、クリック後に即時の切り替えを期待する例では外します。

ButtonからAnimator.SetTriggerを呼ぶ

SwitchButtonのOn Click()に、AnimatorのあるDisplayRootを登録します。非表示にするTargetImageそのものを登録する設定とは区別します。
関数にAnimator → SetTrigger(string)を選び、引数へSwitchを入力します。クリップ名DisplayOnやステート名Onを入力する欄ではありません。
再生し、初期Off→クリック後On→再クリック後Offという順でImageのEnabledとAnimatorの現在ステートを確認します。
一回のOn Click()に同じSetTriggerが二重登録されていないことを確認します。高速連打の挙動は別条件として確認してください。

動かない・戻せない場合の確認順

目的・症状	設定・確認先
ボタンが反応しない	ButtonのInteractable、CanvasのGraphic Raycaster、EventSystemと入力モジュール、前面のRaycast Targetを確認
SetActive(true)でも出ない	親のactiveInHierarchy、対象参照、Canvas、ImageのEnabled/Alphaを確認
閉じると再表示できない	開くボタンや制御するAnimatorが非表示対象の子になっていないか確認
Triggerが見つからない	On Click()のObject、Controller、ParametersのSwitchと型を確認
クリック後に待つ・勝手に切り替わる	両TransitionのHas Exit Time、Duration、Conditions、追加遷移を確認
ステートは変わるが画像は同じ	Motion、子への相対パス、両クリップのEnabledのON/OFFキーを確認

入力の前提はuGUIの基本設定、スクロール内の入力はScrollViewの確認順で補足しています。色やぼかしといった見た目の変更は、オブジェクトを非アクティブにする操作と分けて考えます。

旧版資料：EffectsとSepiaToneのON/OFF

以下は旧記事にあったMain CameraのSepiaToneを切り替える作例です。Assets → Import Package → Effectsというメニューと旧イメージエフェクトを前提にしています。撮影した正確なUnity版は未確認で、現在の新規プロジェクトの導入手順としては使いません。Unity6/URPでは対応する描画方式とポストプロセスを別に確認します。