【Unity uGUI】Toggleを用いたスイッチON/OFF切り替え方法

チェックボックスイメージ改

ゲーム内において「機能の切り替えを簡単に行いたい」と思うことがあるのではないでしょうか？

ゲームキャラクターのスキル開放、オプション画面のUI設定など使用用途は様々です。

この機能を実現する際に用いられるのが「Toggle」機能です。

Contents

1 チェックボックスとは
2 Toggle構成紹介
3 使用方法
4 まとめ

チェックボックスとは

「Toggle」は「ユーザー側がオプション機能のオンとオフを切り替えるための仕組み」です。（公式マニュアルより）

簡単に言うとチェックボックスのことです。

ゲーム以外でも、様々なところでチェックボックスを目にする機会は多いように思います。

例：Googleフォームのアンケート等

この「Toggle」を用いてチェックボックスのON/OFF切り替え識別方法についてご紹介していきます。

Toggle構成紹介

最初に「Toggle」のプロパティについてご説明していきます。

プロパティ	機能
Interactable	コンポーネントが入力を受け付けるかどうかの設定。
Transition	ユーザーがアクションした際にチェックボックスがどのように遷移していくかどうかの設定。
Navigation	制御の一連の流れを設定する。
Is On	チェックボックスのスイッチがデフォルトで“ON”になっているかどうかの設定。
Toggle Transition	値が変更されたときのチェックボックスの視覚的な反応の仕方。
Graphic	チェックマークで使用する画像
Group	そのToggleが属するグループ。（複数のToggleをGroupに分類して一斉に制御することが可能）

続いて「Toggle」に組み込まれているオブジェクトについてです。

Hierarchyウィンドウで「Toggle」横の三角形をクリックしてみましょう。「Toggle」が複数のオブジェクトで構成されていることが確認できると思います。

「Toggle」のなかには「Background」と「Label」という項目が組み込まれています。

前者はチェックボックスの背景を扱うオブジェクトで、この中にはさらに「Checkmark」が組み込まれています。「Checkmark」はチェックボックスがONの時に表示されるチェックマークに関するものです。

後者はチェックボックスの右側に表示されているテキストに関するオブジェクトです。

このオブジェクトを設定することでチェックボックス右側に表示されているテキストを変更することが可能です。

使用方法

まず初めにSceneウィンドウの表示形式を「２D」にしておきましょう。そうするとチェックボックスの配置や大きさの調整がしやすくなります。

「Toggle」をシーン上に表示します。手順は[GameObject]->[UI]->[Toggle]です

「Toggle」がキャンバス上に表示されます。

「Toggle」が表示されたらチェックボックスの配置や大きさを調整していきます。Inspectorを確認していきます。

Rect Transformでチェックボックスの大きさや配置を調整できます。他のUIとの兼ね合いを見て値を設定してください。

Rect Transformの解説はこちら

Hierarchyウィンドウで「Label」を選択したら以下の「Text」内に任意の文字を入力します。

フォントの大きさや色を変更したい場合は以下の赤枠部分を変更します。

*もしフォントサイズを大きくした際に文字が見えなくなった場合は「Toggle」のRect TransformのWidth・Hightの値を大きくしてみてください。

ではスクリプトで「Toggle」の制御を行っていきます。Projectウィンドウで[Assets]->[Create]->[C# Script]の手順でスクリプトを作成します。

スクリプトを作成したら以下の内容に書き換えます。

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";
    }
}