初めに
オン/オフを切り替える機能であるToggle(トグル)についてまとめます。
Index
Toggle コンポーネント
Interactable | 有効/無効の切り替え |
---|---|
Transition | 遷移に関する設定 |
Navigation | UIへのフォーカスの切り替えの制御 |
IsOn | Toggle のチェックの On/Off |
Toggle Transition | チェック切り替え時の視覚的な表現の設定 |
Graphic | チェックマークに該当する画像の設定 |
Group | Toggle のグループ化の設定 |
Interactable
Toggle の有効、無効の切り替えになります。チェックが入っている場合は 有効(Toggle を押すことができる)、チェックが入っていない場合は無効(Toggle を押すことができない)になります。
(有効時)
(無効時)
Transition
Transition はクリック時、無効の時、マウスを乗せているときなど Toggle の状態に合わせて、Toggle の見え方を遷移させる設定です。
- None
何も変化しません。
- Color Tint
Toggle の状態で色を変化させます。デフォルトの設定はこれになります。
- Sprite Swap
Toggle の状態ごとに Sprite を設定できます。
- Animation
Toggle の状態ごとに Animaton を設定できます。
別途、Animator が必要になります。Auto Generate Animation をクリックすると、Animator、Animation Clip を自動生成します。
Navigation
UI オブジェクトは方向キーで選択を遷移させることができます。Navigation はその遷移の仕方を確認、設定することができます。
Visualize ボタンを押すと、Scene ビューで遷移の仕方を確認することができます。黄色い矢印のところへ遷移することができます。
遷移のさせ方は次のようになっています。
- Everything:すべて
- None:遷移できない
- Horizontal:左右キーによる水平方向の遷移のみ可能
- Vertical:上下キーによる垂直方向の遷移のみ可能
- Automatic:自動
- Explicit:上下左右キーそれぞれ個別に遷移先のUIオブジェクトを設定できる
IsOn
Toggle がチェックされている場合は、IsOn にもチェックが入ります。
Toggle Transition
チェック切り替え時の視覚的な表現の設定できます。
- None:On/Off を即座に切り替える
- Fade:On/Off をフェードイン、フェードアウトで切り替える
Graphic
デフォルトだとチェックマークにあたる画像が割り当てられています。こちらの画像を変えることでチェックマークに使用する画像を変更できます。
また、Toggle の子オブジェクト、孫オブジェクトを確認すると Background、Checkmark があることがわかります。こちらの画像を直接変更することで、チェックマークや Toggle の背景に使用する画像を変更できます。
Group
Toggle のグループ化の設定ができます。グループ化をした Toggle はどれか1つしかチェックをいれることができなくなります。
(グループ化の方法)
- 複数の Toggle を用意する
- グループ化したい Toggle の共通の親オブジェクトに Toggle Group コンポーネントをつける
今回は Canvas につけました。Toggle Group の Arrow Switch Off にチェックを入れると、すべての Toggle を Off にすることを認めます。
- Toggle の Group に Toggle Group コンポーネントをつけたオブジェクトをドラッグ&ドロップする
(実行)
スクリプトから Toggle を扱う
Toggle の操作をスクリプトから取得する方法は下記の通りです。
- Toggle が押されたときの処理を書いたスクリプトを用意する
今回は Toggle にチェックが入った時、外れたときにログを出力するスクリプトを用意しました。
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; //ToggleはUIのため追加 public class ToggleScript : MonoBehaviour { //Toggleを取得する [SerializeField] Toggle toggle; //Toggleの値が変更されたときに呼び出される関数 //関数名はなんでもよい public void onValueChanged() { if(toggle.isOn) //Toggleにチェックが入っていたら { Debug.Log("ToggleがOnになった"); } else //Toggleにチェックが入っていなかったら { Debug.Log("ToggleがOffになった"); } } }
- ゲームオブジェクトに先ほどのスクリプトをアタッチする
どのゲームオブジェクトに付けても問題ありません。本記事では、Toggle そのものにつけました。
これで Toggle の操作を取得することができました。基本的な操作は Button と同じです。
最後に
Toggle の使い方をまとめました。個人的には、グループ化とスクリプトの isOn だけ覚えていればなんとかなると思います。