投稿者 tel | 2015年3月31日

uGUIでラジオボタンを作る

uGUIで複数の中から一つだけ選択されるような、ラジオボタンを作るにはToggleとToggleGroupを使う。

h_ss

こんな風にパネルの下にトグルボタンを配置して、PanelにToggleGroupコンポーネントをつけた。(ToggleGroupのコンポーネントをつけるのはどこでもいいみたい)

インスペクタから、それぞれのToggleのGroupにToggleGroupをつけたオブジェクトを指定する。これで1つが選択されたら他のボタンが解除される様になる。

toggle_ins_ss

選択された時のイベントのスクリプトを各ボタンにつける。

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class RadioButton : MonoBehaviour
{
    public Color color = Color.white;

    void Start()
    {
        var toggle = GetComponent<Toggle>();
        toggle.onValueChanged.AddListener(OnValueChanged);
    }

    void OnValueChanged(bool value)
    {
        if (value)
        {
            Camera.main.backgroundColor = color;
        }
    }
}

デフォルトの見た目だとチェックボックスっぽいのでラジオボタン用のスプライトを作って設定してみた。

backgroudcheck

Toggleの下のBackgroundとCheckmarkにそれぞれスプライトを設定する。

radio_ss2

https://dl.dropboxusercontent.com/u/43049781/Unity/RadioButton/WebPlayer/WebPlayer.html

ボタンを選択すると背景の色が変わる。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。