【Unity uGUI】Toggleを用いたスイッチON/OFF切り替え方法
ゲーム内において「機能の切り替えを簡単に行いたい」と思うことがあるのではないでしょうか?
ゲームキャラクターのスキル開放、オプション画面のUI設定など使用用途は様々です。
この機能を実現する際に用いられるのが「Toggle」機能です。
チェックボックスとは
「Toggle」は「ユーザー側がオプション機能のオンとオフを切り替えるための仕組み」です。(公式マニュアルより)
簡単に言うとチェックボックスのことです。
![チェックボックス_デフォルト_参考](https://xr-hub.com/wp-content/uploads/2019/03/チェックボックス_デフォルト_参考.gif)
ゲーム以外でも、様々なところでチェックボックスを目にする機会は多いように思います。
例:Googleフォームのアンケート等
この「Toggle」を用いてチェックボックスのON/OFF切り替え識別方法についてご紹介していきます。
Toggle構成紹介
最初に「Toggle」のプロパティについてご説明していきます。
![Toggle_プロパティ](https://xr-hub.com/wp-content/uploads/2019/03/Toggl_プロパティ.png)
プロパティ | 機能 |
Interactable | コンポーネントが入力を受け付けるかどうかの設定。 |
Transition | ユーザーがアクションした際にチェックボックスがどのように遷移していくかどうかの設定。 |
Navigation | 制御の一連の流れを設定する。 |
Is On | チェックボックスのスイッチがデフォルトで“ON”になっているかどうかの設定。 |
Toggle Transition | 値が変更されたときのチェックボックスの視覚的な反応の仕方。 |
Graphic | チェックマークで使用する画像 |
Group | そのToggleが属するグループ。(複数のToggleをGroupに分類して一斉に制御することが可能) |
続いて「Toggle」に組み込まれているオブジェクトについてです。
Hierarchyウィンドウで「Toggle」横の三角形をクリックしてみましょう。「Toggle」が複数のオブジェクトで構成されていることが確認できると思います。
「Toggle」のなかには「Background」と「Label」という項目が組み込まれています。
![Toggle_中身](https://xr-hub.com/wp-content/uploads/2019/03/Toggle_中身.png)
前者はチェックボックスの背景を扱うオブジェクトで、この中にはさらに「Checkmark」が組み込まれています。「Checkmark」はチェックボックスがONの時に表示されるチェックマークに関するものです。
後者はチェックボックスの右側に表示されているテキストに関するオブジェクトです。
![text_設定箇所](https://xr-hub.com/wp-content/uploads/2019/03/text_設定箇所.png)
このオブジェクトを設定することでチェックボックス右側に表示されているテキストを変更することが可能です。
使用方法
まず初めにSceneウィンドウの表示形式を「2D」にしておきましょう。そうするとチェックボックスの配置や大きさの調整がしやすくなります。
![シーン_2D化](https://xr-hub.com/wp-content/uploads/2019/03/シーン_2D化.gif)
「Toggle」をシーン上に表示します。手順は[GameObject]->[UI]->[Toggle]です
![Toggle作成手順](https://xr-hub.com/wp-content/uploads/2019/03/Toggle作成手順.png)
「Toggle」がキャンバス上に表示されます。
「Toggle」が表示されたらチェックボックスの配置や大きさを調整していきます。Inspectorを確認していきます。
Rect Transformでチェックボックスの大きさや配置を調整できます。他のUIとの兼ね合いを見て値を設定してください。
![RectTransform_調整](https://xr-hub.com/wp-content/uploads/2019/03/RectTransform_調整.png)
Hierarchyウィンドウで「Label」を選択したら以下の「Text」内に任意の文字を入力します。
![Toggle_Label_入力](https://xr-hub.com/wp-content/uploads/2019/03/Toggle_Label_入力.gif)
フォントの大きさや色を変更したい場合は以下の赤枠部分を変更します。
![Label_変更箇所](https://xr-hub.com/wp-content/uploads/2019/03/Label_変更箇所.png)
*もしフォントサイズを大きくした際に文字が見えなくなった場合は「Toggle」のRect TransformのWidth・Hightの値を大きくしてみてください。
![Toggle_Hight_変更](https://xr-hub.com/wp-content/uploads/2019/03/Toggle_Hight_変更.gif)
ではスクリプトで「Toggle」の制御を行っていきます。Projectウィンドウで[Assets]->[Create]->[C# Script]の手順でスクリプトを作成します。
スクリプトを作成したら以下の内容に書き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
using System.Collections; using System.Collections.Generic; using UnityEngine; //UI系のスクリプトを組むときは以下の追記を忘れずに using UnityEngine.UI; public class Toggle_uGUI : MonoBehaviour { //Text用のフィールド public Text text; //Toggle用のフィールド public Toggle toggle; public void OnToggleChanged(){ //「isOn」はチェックの状態を表すモノ。trueなら「ON」、falseなら「OFF」を表す。 text.text = toggle.isOn ? "ON" : "OFF"; } } |
次にスクリプトで制御する際の受取先として、別のUI、「Text」を作成していきます。手順は「Toggle」とほぼ同様です。[GameObject]->[UI]->[Text]の手順で作成してください。
![Text作成](https://xr-hub.com/wp-content/uploads/2019/03/Text作成.gif)
*「Toggle」と同じ「Canvas」内に作成してください。
「Text」の配置、フォントの設定は任意の値で設定してください。
![Text_ON_理由](https://xr-hub.com/wp-content/uploads/2019/03/Text_ON_理由.gif)
*今回はシーンが「Toggle」の「Is On」プロパティをデフォルトのままにしているため「Text」内容は「ON」に書き換えています。
一通り「Text」の設定が終わったら先ほど作成したスクリプトを「Text」にアタッチします。続いてスクリプト動作させるための設定を施します。
「Text」のInspectorウィンドウのスクリプトコンポーネント部分を確認します。そして「Text」と「Toggle」右側の◎をクリックし、それぞれ「Text」、「Toggle」と設定します。
![Toggle_Script_設定](https://xr-hub.com/wp-content/uploads/2019/03/Toggle_Script_設定.gif)
次に「Toggle」の設定です。Inspectorウィンドウで「On Value Changed」にある「+」ボタンをクリックし項目を追加します。
![OnValueChanged_項目追加](https://xr-hub.com/wp-content/uploads/2019/03/OnValueChanged_項目追加.gif)
項目が追加できたらNoneと表示されているタブ右側の◎をクリックし先ほど追加したUIオブジェクトの「Text」を選択します。
![OnValueChanged_改](https://xr-hub.com/wp-content/uploads/2019/03/OnValueChanged_改.gif)
*Label内のTextではありません。
また、「No Function」と表示されているタブをクリックし[Toggle_uGUI]->[OnToggleChanged()]の手順で「Toggle」がクリックされたときに実行されるイベントを選択します。
![OnValueChanged_スクリプト選択](https://xr-hub.com/wp-content/uploads/2019/03/OnValueChanged_スクリプト選択.png)
*今回実行されるイベントはON/OFF切り替えの表示
ゲームを実行してみましょう
![Toggle_ON_OFF切り替え](https://xr-hub.com/wp-content/uploads/2019/03/Toggle_ON_OFF切り替え.gif)
「Toggle」をクリックすることによってON/OFF切り替えが可能になりました。
まとめ
いかがでしたでしょうか。今回はUIの1つである「Toggle」についてご紹介してきました。
今回は「Text」という別のUIとの組み合わせでしたが、冒頭でもご紹介したように様々な用途でこの「Toggle」機能は利用可能です。
「Toggle」をうまく組み合わせて、ゲームの幅を広げていきましょう。
![](https://xr-hub.com/wp-content/uploads/2019/03/アイキャッチ_Toggle-300x169.png)
この記事はいかがでしたか?
もし「参考になった」「面白かった」という場合は、応援シェアお願いします!