Unity UI入門⑧ | Toggleの基本 BGMのON／OFFを切り替える方法

今回は、UnityのUIパーツの1つである Toggle（トグル）について解説します。
Toggleは、チェックボックスのように、項目のON／OFFを切り替えるためのUIです。

たとえば、次のような設定に使用できます。

・BGMや効果音を鳴らすか
・通知を有効にするか
・利用規約に同意するか
・特定の機能を使用するか

今回は、Toggleの基本構成やInspectorの設定を確認したあと、Toggleを使ってBGMの再生と停止を切り替えるサンプルを作ります。

1．Toggleとは

Toggleは、ON と OFF の2つの状態を切り替えるUIです。
初期状態では、四角いチェックボックスと、その横に説明用の文字が表示されます。

ユーザーがToggleをクリックすると、チェックマークの表示・非表示が切り替わります。

Toggleが現在ONなのかOFFなのかは、isOnという値で管理されています。

ToggleがONの場合は、trueになります。
ToggleがOFFの場合は、falseになります。

2．Toggleを作成する

まずは、Unityの画面にToggleを配置してみます。
Hierarchyウィンドウ上で右クリックし、次の順番に選択します。

UI → Toggle

Canvasが存在しない状態でToggleを作成すると、CanvasとEventSystemも自動的に作成されます。

作成したToggleは、主に次のオブジェクトで構成されています。

Toggle
├ Background
│  └ Checkmark
└ Label

それぞれの役割を確認していきましょう。

Toggleを構成するオブジェクト

■ Toggle

Toggle をまとめるUIオブジェクトです。ImageやTextなどがないので実態が見えませんが、Toggleコンポーネントが付与されており、Toggleの機能を管理するオブジェクトです。

■ Background

Backgroundは、チェックボックスの背景部分です。
初期状態では、四角い画像が設定されています。

BackgroundにはImageコンポーネントが付いているため、Source ImageやColorを変更することで、チェックボックスの見た目を変更できます。

■ Checkmark

Checkmarkは、ToggleがONになったときに表示される画像です。
初期状態では、チェックマークの画像が設定されています。
ToggleがONの場合はCheckmarkが表示され、OFFの場合は表示されなくなります。

CheckmarkにもImageコンポーネントが付いているため、チェックマークの色や画像を変更できます。

■ Label

Labelは、Toggleの横に表示する説明文です。
たとえば、次のような文字を表示します。

・効果音を有効にする
・通知を受け取る
・利用規約に同意する
・〇〇機能を有効にする

Toggleコンポーネントの主な設定

HierarchyウィンドウでToggle本体を選択すると、InspectorウィンドウにToggleコンポーネントが表示されます。

主な設定項目は次のとおりです。

・Interactable
・Transition
・Target Graphic
・Is On
・Toggle Transition
・Graphic
・Group
・On Value Changed

順番に確認していきましょう。

■ Interactable

Interactableでは、ユーザーがToggleを操作できるかどうかを設定します。
オンの場合は、ToggleをクリックしてON／OFFを切り替えられます。
オフにすると、画面には表示されますが、ユーザーは操作できなくなります。

ゲームの進行状況によって、一部の設定を変更できないようにしたい場合などに使用できます。
スクリプトから変更する場合は、次のように記述します。

targetToggle.interactable = false;

再び操作できるようにする場合は、trueを設定します。

targetToggle.interactable = true;

■ Transition

Transitionでは、マウスカーソルを重ねたときや、クリックしたときの見た目の変化を設定します。

主に次の項目から選択できます。

・None
・Color Tint
・Sprite Swap
・Animation

初期状態では、Color Tintが設定されています。
Color Tintでは、通常時、選択時、押下時、無効時などの色を指定できます。
以前の記事でまとめた「Button」のTransition とほぼ同じなので、詳しくはこちらをご参照ください。

今回の記事では、初期設定のまま使用します。

Fade Durationでは、色が切り替わるまでの時間を設定します。

■ Target Graphic

Target Graphicには、Transitionによって色や画像を変化させる対象を設定します。
初期状態では、Backgroundが設定されています。
そのため、マウスカーソルを重ねたときやクリックしたときに、チェックボックスの背景部分の色が変化します。

ToggleがONのときに表示する画像は、Target Graphicではなく、後ほど解説するGraphicに設定します。

■ Is On

Is Onでは、Toggleの初期状態を設定します。

Is Onをオンにすると、ゲーム開始時からToggleがONになり、チェックマークが表示されます。
オフにすると、チェックマークが表示されていない状態から始まります。

Toggleの状態をスクリプトから変更することもできます。

targetToggle.isOn = true;

OFFにする場合は、falseを設定します。

targetToggle.isOn = false;

■ Toggle Transition

Toggle Transitionでは、ToggleがONになったときに、Graphicをどのように表示するかを設定します。
主に次の項目があります。

・None
・Fade

Fadeを選択すると、チェックマークが徐々に表示・非表示になります。
一瞬で切り替えたい場合は、Noneを選択します

■ Graphic

Graphicには、ToggleがONになったときに表示するUIを設定します。
初期状態では、子オブジェクトのCheckmarkが設定されています。

ToggleがONになると、Graphicに指定したUIが表示されます。
ToggleがOFFになると、Graphicに指定したUIが非表示になります。

Checkmark以外のImageを設定すれば、次のような表現もできます。

・ONのときだけランプを点灯する
・選択中の項目に枠を表示する
・選択中のキャラクターにマークを付ける
・スイッチのつまみを表示する

■ Group

Groupは、複数のToggleを1つのグループとして管理するときに使用します。
GroupにToggle Groupを設定すると、グループ内のToggleが常に1つだけONになり、「ラジオボタン」として設定することができます。

BGMのON／OFFのように、Toggleを単独で使用する場合は、何も設定する必要はありません。

Toggle Groupについては、次回の記事で詳しく確認します。

■ On Value Changed

On Value Changedは、Toggleの状態が変化したときに実行されるイベントです。
Slider でもスライダーの値が変化したときに  On Value Changed が呼び出されました。
Toggleでは、ON／OFFの状態が変わったときに On Value Changed が実行されます。

次のサンプルでは、Toggleが押されるたびに、コンソールに現在の状態を表示しています。

[SerializeField] Toggle toggle; // Toggleコンポーネント

public void OnToggleChanged()
{
    Debug.Log("Toggleの状態：" + toggle.isOn);
}

3.サンプル｜BGMのON／OFFを切り替える

ここからは、Toggleを使ってBGMのON／OFFを切り替えるサンプルを作ります。

ToggleがONの場合はBGMを再生し、OFFの場合はBGMを一時停止します。

3-1．BGMを再生する準備

Hierarchyウィンドウ上で右クリックし、空のGameObjectを作成します。
名前「BgmManager」のように変更します。

BgmManagerを選択し、Add ComponentからAudio Sourceコンポーネントを追加します。

Audio SourceのAudio Clipに、使用するBGMを設定します。
今回のサンプルでは、次の項目をオンにしておきます。

Play On Awake

ゲーム開始時からBGMを再生します。

Loop

BGMを繰り返し再生します。

3-2．BGM用のToggleを作成する

Canvasの中にToggleを作成し、名前を「BgmToggle」のように変更します。

Labelの文字は「BGMを再生する」のように変更します。

今回は、ゲーム開始時からBGMを再生するため、BgmToggleのIs Onをオンにしておきます。

3-3．BGMを切り替えるスクリプト

新しいC#スクリプトを作成し、名前を「BgmController」のようにします。

スクリプトの内容を、次のように記述します。

using UnityEngine;

public class BgmController : MonoBehaviour
{
    [SerializeField] AudioSource bgmAudioSource; // BGMのAudioSource

    public void ChangeBgmState(bool isOn)
    {
        if (isOn) //チェックが入っている場合
        {
            if (!bgmAudioSource.isPlaying)   // BGMが再生されていない場合
            {
                bgmAudioSource.Play(); // BGMを再生
            }
        }
        else //チェックが外れた場合
        {
            bgmAudioSource.Pause(); // BGMを停止
        }
    }
}

コードの確認

次の部分では、Audiosource型の変数：bgmAudioSource を宣言しています。
[SerializeField] を指定することで、Inspector からBGMを再生するAudio Sourceをセットできます。

[SerializeField]  AudioSource bgmAudioSource;

次のメソッドでは、Toggleの状態をisOnで受け取ります。

public void ChangeBgmState(bool isOn)

ToggleがONになった場合は、Audio SourceのPlayメソッドを実行します。

if (isOn)
{
    if (!bgmAudioSource.isPlaying)
    {
        bgmAudioSource.Play();
    }
}

isPlayingでは、現在Audio Sourceが再生中かどうかを確認しています。
すでにBGMが再生されている場合は、もう一度Playを実行しません。

ToggleがOFFになった場合は、PauseメソッドでBGMを一時停止します。

else
{
    bgmAudioSource.Pause();
}

Pauseで停止した場合、もう一度再生すると、一時停止した位置から続きが再生されます。

OFFにしたときにBGMを先頭へ戻したい場合は、PauseではなくStopを使用します。

bgmAudioSource.Stop();

Stopを使用すると、次に再生したときはBGMの先頭から始まります。

3-4．スクリプトを設定する

作成したBgmToggleControllerを、BgmManagerにアタッチします。
BgmManagerを選択すると、InspectorウィンドウにBgm Toggle Controllerが表示されます。

Bgm Audio Sourceの欄に、BgmManager の Audio Source を設定します。
同じGameObjectに追加されているAudio Sourceを、ドラッグ＆ドロップして設定できます。

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

次に、BgmToggleを選択します。
Toggleコンポーネントの下部にある On Value Changed を確認します。

1. 「＋」ボタンを押して、イベントを1つ追加します。

2. 追加されたオブジェクト欄に、BgmManagerをドラッグ＆ドロップ

3. 関数の選択欄から、次のメソッドを選びます。

BgmToggleController
→ ChangeBgmState
→ Dynamic bool

ここでは、Dynamic bool側のメソッドを選択します。

Dynamic boolを選ぶことで、Toggleの現在の状態が自動的にメソッドへ渡されます。

3-6．動作を確認する

ゲームを実行します。

BgmToggleがONのときは、BGMが再生されます。
BgmToggleをクリックしてOFFにすると、BGMが一時停止します。
もう一度ONにすると、一時停止した位置からBGMが再生されます。

これで、Toggleを使ったBGMのON／OFF切り替えが完成しました。

4．よくあるトラブル

Toggleをクリックしても反応しない

次の項目を確認します。

・Interactableがオンになっているか
・HierarchyウィンドウにEventSystemがあるか
・CanvasにGraphic Raycasterがあるか
・手前に別のPanelやImageが重なっていないか

透明なPanelやImageがToggleの手前にある場合、そのUIがクリックを受け取っている可能性があります。

操作に使用しないUIのRaycast Targetをオフにすると、改善する場合があります。

5．今回のまとめ

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

Toggleは、項目のON／OFFを切り替えるためのUIです。

Toggleは、ゲームの設定画面を作るときによく使用するUIです。

まずは、単独のToggleを使ってON／OFFを切り替える仕組みを理解しておきましょう。

次回予告

次回は、複数のToggleをまとめて管理できるToggle Groupについて解説します。

Toggle Groupを使うと、複数の選択肢の中から1つだけを選択する、ラジオボタンのようなUIを作成できます。

次回は、Easy・Normal・Hardの3つから、ゲームの難易度を1つだけ選択するサンプルを作ります。

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

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

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

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