見出し画像

Unity UI入門⑨ | Toggleの応用 Toggle Groupでラジオボタンを作る方法

ファイブボックス

前回は、UnityのUIパーツの1つであるToggleについて確認しました。


Toggleは、ONとOFFを切り替えるためのUIです。
BGMのON／OFFや効果音のON／OFFのように、1つの項目を切り替える場合に便利でした。

今回は、そのToggleを複数まとめて使う方法を確認します。
複数のToggleを Toggle Group でまとめると、複数の選択肢の中から1つだけを選択する、いわゆる「ラジオボタン」のようなUIを作ることができます。

今回は、Toggle Groupについての説明を行い、ラジオボタンを使ったサンプルプログラムを作ってみます。


1．ラジオボタンとは

ラジオボタンとは、複数の選択肢の中から、1つだけを選ぶためのUIです。
たとえば、ゲームでは次のような場面で使用できます。

・難易度の選択
・画質設定
・操作方法の選択
・キャラクター選択
・言語選択

Toggleとの違い

通常のToggleは、それぞれを自由にON／OFFできます。
たとえば、次のような設定です。

☑ BGM
☑ 効果音
□ 振動

BGMと効果音を同時にONにできます。
一方、難易度のように、

〇 Easy
〇 Normal
⦿ Hard

の中から1つだけを選びたい場合は、通常のToggleだけでは適していません。
そこで使用するのが Toggle Group です。

2．Toggle Groupとは

Toggle Groupは、複数のToggleを1つのグループとして管理するためのコンポーネントです。
同じToggle Groupに登録されたToggleは、基本的に1つだけONになります。

たとえば、

  • EasyToggle

  • NormalToggle

  • HardToggle

の3つを同じToggle Groupに登録すると、EasyをONにしたときにNormalやHardはOFFになります。

Unityには「Radio Button」という名前のUIはありません。
その代わりに、ToggleとToggle Groupを組み合わせてラジオボタンを作ります。

3．サンプル：難易度選択用のToggle

3-1 Toggleオブジェクトを作成する

今回は、ゲームの難易度を選択するサンプルを作ります。
Canvasの中にToggleを3つ作成します。

Hierarchyウィンドウ上で右クリックし、UI → Toggle を選択します。

3つのToggleを作成し、名前を次のように変更します。

  • EasyToggle

  • NormalToggle

  • HardToggle

Labelの文字も、それぞれ　Easy Normal Hard　に指定し、3つのToggleを縦方向に並べて配置しておきます。

ラベルの変更の方法は、前回の記事をご確認ください。

3-2．Toggle Groupを作成する

次に、Toggle Groupを作成します。
Hierarchyウィンドウ上で右クリックし、Create Empty から空のGameObjectを作成します。

名前を「DifficultyToggleGroup」のように変更します。
※任意で結構です。

DifficultyToggleGroupを選択し、Inspectorの Add Component から、Toggle Group を追加します。

これで、3つのToggleをまとめるためのグループができました。

3-3．各ToggleをGroupに登録する

EasyToggleを選択し、Toggleコンポーネントの中にある Group を確認します。
Group欄に、先ほど作成したDifficultyToggleGroupを設定します。

同じように、

・NormalToggle
・HardToggle

にもDifficultyToggleGroupを設定します。
これで、3つのToggleが同じグループになりました。

ゲームを実行して確認すると、1つのToggleをONにしたとき、ほかのToggleが自動的にOFFになります。

3-4．Allow Switch Off

Toggle Groupには、Allow Switch Offという設定があります。
Allow Switch Offは、グループ内のToggleをすべてOFFにできるかどうかを設定します。

■ Allow Switch Offがオフの場合

グループ内のどれか1つが必ずONになります。
たとえば、Normalが選択されている場合、Normalをもう一度クリックしてOFFにすることはできません。

■ Allow Switch Offがオンの場合

すべてのToggleをOFFにできるようになります。

○ Easy
○ Normal
○ Hard

という状態も作れます。

今回の難易度選択では、Easy・Normal・Hardのどれか1つを必ず選んでほしいため、Allow Switch Offはオフにしておきます。

3-5．初期状態を設定する

次に、ゲーム開始時にどのToggleを選択しておくか設定します。
今回は、Normalを初期選択にします。

各Toggleの Is On を次のように設定します。

これで、ゲーム開始時にはNormalだけが選択された状態になります。

Toggle Groupを使用する場合でも、最初の Is On は自分で設定しておく必要があります。

複数のToggleをONにしたままにすると、ゲーム開始時の状態が分かりにくくなるため、基本的には1つだけONにしておきましょう。

3-6．スクリプトで難易度を取得する

ここまでは、Toggle Groupを使って1つだけ選択できるようにしました。
次は、どの難易度が選択されたのかをスクリプトから取得します。

新しいC#スクリプトを作成し、名前を「DifficultySelector」のように指定します。
作成したスクリプトファイルは、DifficultyToggleGroup オブジェクトにアタッチしておきます。

DifficultySelector を立ち上げて以下のように記述します。

using UnityEngine;

public class DifficultySelector : MonoBehaviour
{
    string selectedDifficulty = "Normal";

    public void SelectEasy(bool isOn)
    {
        if (!isOn) { return; } // 選択済みなら何もしない

        selectedDifficulty = "Easy";
        Debug.Log("選択された難易度：" + selectedDifficulty);
    }

    public void SelectNormal(bool isOn)
    {
         if (!isOn) { return; } // 選択済みなら何もしない

        selectedDifficulty = "Normal";
        Debug.Log("選択された難易度：" + selectedDifficulty);
    }

    public void SelectHard(bool isOn)
    {
         if (!isOn) { return; } // 選択済みなら何もしない

        selectedDifficulty = "Hard";
        Debug.Log("選択された難易度：" + selectedDifficulty);
    }
}

■ コードの解説

最初に、現在選択されている難易度を保存する変数を作っています。

 string selectedDifficulty = "Normal";

今回はNormalを初期選択にしているため、初期値も"Normal"にしています。
Easyが選択された場合は、

selectedDifficulty = "Easy";

Hardが選択された場合は、

selectedDifficulty = "Hard";

のように、変数の内容を変更します。

isOn の確認

各メソッドの最初に、次の処理を入れています。

if (!isOn){ return; }

ここは、Toggle Groupを使ううえで重要なポイントです。

たとえば、Normalが選択されている状態からHardを選択したとします。
このとき、内部では次の2つの変化が発生します。

NormalToggle
ON → OFF

HardToggle
OFF → ON

つまり、NormalToggleとHardToggleの両方でOn Value Changedが実行されます。

NormalToggleにはfalseが渡され、HardToggleにはtrueが渡されます。

そこで、

if (!isOn){ return; }

を入れておくことで、OFFになったToggleでは処理を終了します。
ONになったToggleだけ、難易度の変更処理を行うようになります。

3-7．On Value Changedを設定する

作成したDifficultySelectorを、DifficultyToggleGroupに追加します。
各Toggleの On Value Changed を設定します。

■ EasyToggle

EasyToggleを選択します。

  1. On Value Changedの「＋」ボタンを押して、新たなイベントを追加します。

  2. 左下のオブジェクトには「 DifficultySelectorクラス」をもったDifficultyToggleGroup をセットします。

  3. 右上のメソッドには、DifficultySelector の Dynamicbool の SelectEasy をセットします。

■ NormalToggle

NormalToggleでは、次を設定します。

DifficultySelector
→ SelectNormal

■ HardToggle

HardToggleでは、次を設定します。

DifficultySelector
→ SelectHard

すべて、Dynamic bool側を選択します。

これで、ToggleのON／OFF状態がbool型でスクリプトへ渡されます。

3-8．動作を確認する

ゲームを実行します。
初期状態ではNormalがONになっています。

Easyをクリックすると「Easy」にチェックが入り、「選択された難易度：Easy」と表示されます。

Hardをクリックすると「 Hard」にチェックが入って、「選択された難易度：Hard」と表示されます。

これで、Toggle Groupを使ったラジオボタンの基本が完成しました。

4．実際のゲームではどう使う？

今回は確認しやすいように、選択された難易度をConsoleウィンドウへ表示しました。

実際のゲームでは、selectedDifficultyの値を使って、ゲーム内容を変更できます。
たとえばEasyの場合は、

・敵のHPを少なくする
・敵の数を減らす
・プレイヤーのHPを増やす

Hardの場合は、

・敵のHPを増やす
・敵の数を増やす
・制限時間を短くする

といった使い方ができます。
Toggle Groupは、「どの項目を選択したか」をゲームの設定へつなげるときに便利です。

5．ラジオボタン風の見た目にする

Toggle Groupを設定すると、動作としてはラジオボタンになります。
ただし、初期状態のToggleは四角いチェックボックスです。

一般的なラジオボタンでは、丸いボタンがよく使われます。

○ Easy
● Normal
○ Hard

このような見た目にしたい場合は、Toggle の Background と Checkmark の画像を変更します。

Background

外枠だけの丸い画像に変更します。

Checkmark

塗りつぶされた小さな丸い画像に変更します。

すると、未選択時は、

○

選択時は、

●

のような見た目にできます。
見た目を変更しても、ToggleやToggle Groupの仕組み自体は変わりません。

6．スクリプトから選択状態を変更する

Toggleの状態は、スクリプトから変更できます。
たとえば、NormalToggleを選択状態に戻したい場合は、次のようにします。

normalToggle.isOn = true;

isOnを変更すると、通常はOn Value Changedも実行されます。
イベントを実行せずに状態だけを変更したい場合は、

normalToggle.SetIsOnWithoutNotify(true);

を使用します。
SetIsOnWithoutNotifyは、保存済みの設定をUIへ反映するときなどに便利です。

18．今回のまとめ

今回は、Toggle Groupを使ってラジオボタンを作る方法を確認しました。

「複数から1つだけ選択する」という仕組みを作りたい場合は、Toggle Groupを活用してみましょう。

次回予告

次回は、複数の選択肢を一覧から選択できるDropdownについて解説します。
Dropdownの基本構成や選択肢の追加方法、初期値の設定、On Value Changedを使って選択された項目を取得する方法を確認していきます。

▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。


ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

いいなと思ったら応援しよう！

ファイブボックス よろしければ応援お願いします！ いただいたチップはクリエイターとしての活動費に使わせていただきます！