top of page
検索
10月3日読了時間: 3分

1分間 Unity講座　Toggleの活用３ラジオボタンを作成する方法（選択肢取得編）

このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。


今回はUnityのUIの「Toggleの活用」についての第３回目、

初回「1分間 Unity講座 Toggle活用１ラジオボタンの作成と整列（素材作成編）」

２回目「1分間 Unity講座 Toggleの活用２ラジオボタンを作成する方法（選択肢変換編）」

に続く第三弾、いよいよ選択時のデータを活用する方法についてのご説明です。


Toggleの活用

■ Toggleの活用１ラジオボタンを作成 Grid Layout Group で整列する方法（素材作成編）


下の動画は「ファイブボックス　一分間Unity講座　ラジオボタンの作成（選択肢活用編）」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください！



1、UI素材と変数の用意


今回は選択されたデータをUIのTextに表示させてみます。


UI ⇒ Legacy ⇒ Text で、Canvas の配下に Textを配置、名前を「SelectedText」に指定。

Inspectorで大きさ、座標を任意の値に指定します。

今回はTextの値を確認するだけなので、どのような配置でも結構です。

UnityでUIのTextを作成

作成済みのスクリプトファイルに、上で作成した「SelectedText」のTextコンポーネントを管理する変数を宣言しています。


このスクリプトファイル「SelectedText」の親要素となる「Canvas」にアタッチされています。Start()関数では、Canvasから見て2番目の子要素（indexは1)となるので、transform.GetChild(1) として「SelectedText」オブジェクトを取得、さらにGetComponent<Text>() でTextコンポーネントを取得しています。

テキストの初期値には「選択してください」などの言葉をセットします。


Text selectedText;	//Text型の変数を宣言

void Start()
{
	//Canvasの2番目の子要素のTextコンポーネントを取得し変数に代入
	selectedText = transform.GetChild(1).GetComponent<Text>();
	selectedText.text = "選択してください";	//selectedTextの初期Textを指定
}

2、Toggleのデータ取得関数


下の図のように、Toggleがチェックされたとき、そのToggleコンポーネントの「isOn」プロパティは true の状態に変更されます。

また、「On Value Changed」プロパティには、Toggleのチェックの状態が変化したタイミングで呼び出される関数を登録することができます。

UIのToggleコンポーネントのプロパティ

これらの特性を活用し、Toggleの値が更新されたときに呼び出される関数を作成します。

この関数の実行フローは以下の通りです。 なお、ここで使用する Toggleをまとめる TogglePanel および、変数：togglePanel は前回までの説明資料で作成済みです。

  1. Toggleの数だけ以下の処理を繰り返し実行

  2. i番目のToggleのToggleコンポーネントの isOnプロパティをチェック、trueなら次の処理を実行

    1. SelectedTextの文字を、i番目のToggleの子要素のText（選択肢の文字列）に変更

    2. 以降の処理は必要ないので中断


では関数を作成しします。Toggleコンポーネントにセットするので、アクセス修飾子を public に指定しておきます。関数名は任意ですが、サンプルでは「SelecteToggle()」に指定しました。

public void SelectToggle()
{
    for (int i = 0; i < togglePanel.childCount; i++) //Toggleの数だけ繰り返す
    {
        //i番目のtoggleのToggleコンポーネントのisOnがtrueなら
        if (togglePanel.GetChild(i).GetComponent<Toggle>().isOn)
        {
            //selectedTextのtextをi番目のToggleの選択肢のtextに変更
            selectedText.text =
                togglePanel.GetChild(i).GetComponentInChildren<Text>().text;
            break;  //処理中断
        }
    }
}

3、Toggleに関数セット


作成した関数を各ToggleのToggleコンポーネントにセットします。

「OnValueChange」プロパティで、右下の＋ボタンを押してイベントを追加。

  1. 左下のオブジェクト登録部分に、関数を含むクラスを所有する「Canvas」をAssign

  2. 右上のファンクション登録部分に、UIManager2クラス⇒SelecteToggle()メソッドをセット

UIのToggleのOnValueChangedの設定

これで動かしてみましょう。選択肢を選びなおすたびに、SelectedTextの文字が選択したToggleの選択肢に変更すると思います。


 

ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

Comments

bottom of page