Unityで配置するUI⑪
こんにちは、サメ太郎です。
これまで「トータルクリエイト部のサメ太郎」として登場していましたが、部署名が「クロスメディアラボ」に変わりました。
業務内容は変わらずメタバースや映像に関わるデザインがメインなのですが、ちょっと新しい気分で今回もお届けします！
↓メタバース「バーチャルCOMCOM」リンク↓
https://comfort-inc.co.jp/metaverse/
↓メタバース×HPスターターパック版 リンク↓
https://comfort-inc.co.jp/lp_meta/lp_metaverse_starter-pack.html
今回はトグルボタン・ラジオボタン・チェックボックスといった「選択式UI」の違いや使い分け、Unity上での実装方法をご紹介していきます。
トグルボタン・ラジオボタン・チェックボックスの違いとは？
見た目や操作が似ているこれらの選択式UI ですが、それぞれユーザーに伝える意図や用途に違いがあります。
例えば「通知ON/OFF」がトグル、「色の選択」がラジオボタン、「興味のあるカテゴリの選択」がチェックボックス、というようにユーザーにどのような選択をしてほしいかで使い分ける必要があります。
Unityでトグルボタンを作ってみよう
Unityでトグルボタンを作るには、他のUI同様、ヒエラルキーウィンドウで右クリックして、UI→Toggleで作成することができます。
シーンビューではこのように表示されていれば成功です。
ヒエラルキーウィンドウを確認すると、Toggleの子オブジェクトとしてBackgroundとLabelが一緒に追加されています。さらにBackgroundの子オブジェクトとしてCheckmarkも追加されていると思います。
これらの要素はそれぞれ以下のような役割を持っています。
・Toggle→トグルボタン全体の設定 ON/OFFやイベントの管理などを行うもの
・Background→チェックボックスの背景部分 見た目の枠として使われるもの
・Checkmark→トグルがONの時に表示されるチェックマーク画像
・Label→トグル横に表示されるテキストラベル ユーザーに項目内容を伝えるもの
Toggleを選択してインスペクターを見ると「Is On」という項目があるので、このチェックを切り替えると初期状態でチェックマークを表示するかを設定することができます。
BackgroundやCheckmarkの画像を変えるだけで印象の違うトグルボタンを作成できるので、色々試してみてくださいね。
トグルボタンを応用してラジオボタンを作ろう
Unityには専用の「ラジオボタン」はないため、複数のToggleをToggleGroupでまとめることでラジオボタンと同じ動作を再現します。
実際に作成してみましょう。
今回は3つの選択肢から1つを選ぶ場合を想定して作成していきます。
まずは、先ほど作成したトグルボタンを必要な数だけ作成します。
この状態だと、Canvasの中でToggleがばらばらになっているので、3つのToggleをまとめる親オブジェクトを作成しましょう。
今回は分かりやすくRadioButtonGroupという名前を付けておきました。
このRadioButtonGroupを選択して、インスペクターでAddComponentを押し、ToggleGroupを追加しましょう。下の画像のようになっていれば成功です。
あとはRadioButtonGroupでまとめたそれぞれのToggleのインスペクターでGroupの部分にRadioButtonGroupをアタッチしましょう。
以上が主な設定です。
見た目を整えてゲームを再生してみるとこのようになります。
別のボタンを押すと今まで選択していたものから選択が外れるようになっていれば完成です。
トグルボタンを応用してチェックボックスを作ろう
Unityには専用の「チェックボックス」もないため、複数のToggleを作成して再現します。
チェックボックスとして使用する場合は、ToggleGroupを使用せず各Toggleを独立させることで複数選択が可能になります。
先ほどと同様にToggleを増やして、見た目を整えるとこのようになります。
別のボタンを押しても、反応は押したボタンのみに影響していることを確認出来たら完成です。
今回は、トグル・ラジオボタン・チェックボックスの違いと、それぞれの実装方法について紹介しました。
UIはただ配置するだけでなく、その意味や制限を正しくユーザーに伝えることが重要です。見た目が似ていても、使い方や意味合いを誤ると混乱を招くため、選択肢の性質に応じた適切な部品選びを心がけていきましょう！
次回もUIに関する内容をお話する予定ですので、お楽しみに！