【Unity uGUI】Toggleを用いたスイッチON/OFF切り替え方法


チェックボックスイメージ改

ゲーム内において「機能の切り替えを簡単に行いたい」と思うことがあるのではないでしょうか?

ゲームキャラクターのスキル開放、オプション画面のUI設定など使用用途は様々です。

この機能を実現する際に用いられるのが「Toggle」機能です。

チェックボックスとは

「Toggle」は「ユーザー側がオプション機能のオンとオフを切り替えるための仕組み」です。(公式マニュアルより

簡単に言うとチェックボックスのことです。

チェックボックス_デフォルト_参考
チェックボックス

ゲーム以外でも、様々なところでチェックボックスを目にする機会は多いように思います。

例:Googleフォームのアンケート等

この「Toggle」を用いてチェックボックスのON/OFF切り替え識別方法についてご紹介していきます。

Toggle構成紹介

最初に「Toggle」のプロパティについてご説明していきます。

Toggle_プロパティ
Toggleプロパティ
プロパティ 機能
Interactable コンポーネントが入力を受け付けるかどうかの設定。
Transition ユーザーがアクションした際にチェックボックスがどのように遷移していくかどうかの設定。
Navigation 制御の一連の流れを設定する。
Is On チェックボックスのスイッチがデフォルトで“ON”になっているかどうかの設定。
Toggle Transition 値が変更されたときのチェックボックスの視覚的な反応の仕方。
Graphic チェックマークで使用する画像
Group そのToggleが属するグループ。(複数のToggleをGroupに分類して一斉に制御することが可能)

 

続いて「Toggle」に組み込まれているオブジェクトについてです。

Hierarchyウィンドウで「Toggle」横の三角形をクリックしてみましょう。「Toggle」が複数のオブジェクトで構成されていることが確認できると思います。

「Toggle」のなかには「Background」と「Label」という項目が組み込まれています。

Toggle_中身
Toggle構成

前者はチェックボックスの背景を扱うオブジェクトで、この中にはさらに「Checkmark」が組み込まれています。「Checkmark」はチェックボックスがONの時に表示されるチェックマークに関するものです。

後者はチェックボックスの右側に表示されているテキストに関するオブジェクトです。

text_設定箇所
Label

このオブジェクトを設定することでチェックボックス右側に表示されているテキストを変更することが可能です。

使用方法

まず初めにSceneウィンドウの表示形式を「2D」にしておきましょう。そうするとチェックボックスの配置や大きさの調整がしやすくなります。

シーン_2D化
2D化

「Toggle」をシーン上に表示します。手順は[GameObject]->[UI]->[Toggle]です

Toggle作成手順
Toggle作成手順

「Toggle」がキャンバス上に表示されます。

「Toggle」が表示されたらチェックボックスの配置や大きさを調整していきます。Inspectorを確認していきます。

Rect Transformでチェックボックスの大きさや配置を調整できます。他のUIとの兼ね合いを見て値を設定してください。

RectTransform_調整
RectTransform

Rect Transformの解説はこちら

Hierarchyウィンドウで「Label」を選択したら以下の「Text」内に任意の文字を入力します。

Toggle_Label_入力
Label入力

フォントの大きさや色を変更したい場合は以下の赤枠部分を変更します。

Label_変更箇所
Label_変更箇所

*もしフォントサイズを大きくした際に文字が見えなくなった場合は「Toggle」のRect TransformのWidth・Hightの値を大きくしてみてください。

Toggle_Hight_変更
Toggle・Hight調整

 

ではスクリプトで「Toggle」の制御を行っていきます。Projectウィンドウで[Assets]->[Create]->[C# Script]の手順でスクリプトを作成します。

スクリプトを作成したら以下の内容に書き換えます。

次にスクリプトで制御する際の受取先として、別のUI、「Text」を作成していきます。手順は「Toggle」とほぼ同様です。[GameObject]->[UI]->[Text]の手順で作成してください。

Text作成
Text作成

*「Toggle」と同じ「Canvas」内に作成してください。

「Text」の配置、フォントの設定は任意の値で設定してください。

Text_ON_理由
TextをONにしている理由

*今回はシーンが「Toggle」の「Is On」プロパティをデフォルトのままにしているため「Text」内容は「ON」に書き換えています。

 

一通り「Text」の設定が終わったら先ほど作成したスクリプトを「Text」にアタッチします。続いてスクリプト動作させるための設定を施します。

「Text」のInspectorウィンドウのスクリプトコンポーネント部分を確認します。そして「Text」と「Toggle」右側の◎をクリックし、それぞれ「Text」、「Toggle」と設定します。

Toggle_Script_設定
オブジェクト設定

次に「Toggle」の設定です。Inspectorウィンドウで「On Value Changed」にある「+」ボタンをクリックし項目を追加します。

OnValueChanged_項目追加
OnValueChanged項目追加

項目が追加できたらNoneと表示されているタブ右側の◎をクリックし先ほど追加したUIオブジェクトの「Text」を選択します。

OnValueChanged_改
OnValueChangedオブジェクト選択

*Label内のTextではありません。

また、「No Function」と表示されているタブをクリックし[Toggle_uGUI]->[OnToggleChanged()]の手順で「Toggle」がクリックされたときに実行されるイベントを選択します。

OnValueChanged_スクリプト選択
OnValueChangedスクリプト選択

*今回実行されるイベントはON/OFF切り替えの表示

ゲームを実行してみましょう

Toggle_ON_OFF切り替え
ON/OFF切り替え

「Toggle」をクリックすることによってON/OFF切り替えが可能になりました。

まとめ

いかがでしたでしょうか。今回はUIの1つである「Toggle」についてご紹介してきました。

今回は「Text」という別のUIとの組み合わせでしたが、冒頭でもご紹介したように様々な用途でこの「Toggle」機能は利用可能です。

「Toggle」をうまく組み合わせて、ゲームの幅を広げていきましょう。


Massuuuu