Unity本の作例改造-Chapter3-14:BGMを追加する

Unityの入門書で通称”ヒヨコ本”として親しまれている”Unity5入門最新開発環境による簡単3D&2Dゲーム制作 “の作例に色々とゲーム要素を追加してオリジナルゲームに仕上げる内容を連載中。

Chapter1：Unityの概要と基礎知識
Chapter2：インターフェイスと使い方
Chapter3：Unityを使ってみよう！
Chapter4：キャラクターを動かしてみよう！
Chapter5：ゲームのUIを作ってみよう！
Chapter6：ゲームを作ろう！（1）
Chapter7：ゲームを作ろう！（2）
Chapter8：2D機能を使ってみよう！

ゲームのBGMを設定する

タイトル画面、ゲームプレイ中、ゲームオーバー画面のそれぞれにBGMを設定してみたいと思います。

管理オブジェクトとスクリプトの作成

[Hierarchy]ウィンドウ > [Create]ボタン > Cretate > Create Emptyを選択。名前を”SoundManager”に変更します。

[Inspector]ウィンドウ > [Add Component]ボタン > New Scriptを選択して下記の通り入力。[Create and Add]ボタンをクリック。
Name: SoundManager / Language: C Sharp

オーディオファイルを再生する条件を考える

まずは今回使用する3種類のBGM再生を切り替える処理と条件を整理。

タイトルBGMはゲームスタートと同時に再生すればいいのでStart()関数で実行。そしてプレイ中BGMはボタンクリックで再生すればいいので新しい関数PlayBGM()処理を用意しました。

ゲームオーバーBGMはプレイヤーの操作に関係なく再生処理条件が発生するのでUpdate()処理で実行することにしました。

ただし、オーディオファイル再生処理がループしないよう、Update() 関数でオーディオファイル再生処理を一度だけ実行するためのフラグを用意します。

下記のようになりますね。

タイトルBGM: ゲームがスタートしたら（Start()関数で実行）; タイトルBGM再生する
プレイ中BGM: スタートボタンがクリックされたら（関数を作成してボタンに割り当て）; プレイ中BGMを再生する; 再生処理ループ防止の変数の値をリセット
ゲームオーバーBGM: ゲームオーバー画面が表示されたら（Update() 関数で実行）; 再生処理ループ防止の変数の値を参照; ゲームオーバーBGMを再生する; 再生処理ループ防止の変数の値を変更

スクリプトの編集

[Hierarchy]ウィンドウ > SoundManagerを選択。[Inspector]ウィンドウ > “Sound Manager (Script)”コンポーネントパネルの右上にある歯車アイコンをクリック > Edit Script を選択してエディタを起動。

下記の通りコードを入力します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SoundManager : MonoBehaviour
{
    // "AudioSource"コンポーネントを格納する変数
    private AudioSource audioSource;
    // 効果音の"AudioSource"コンポーネントを格納する変数
    //public AudioSource SEAudioSource;
    // Update() 処理内でオーディオファイル再生処理を一度だけ実行するためのフラグ
    private bool audioPlay;

    // タイトル画面で再生するオーディオクリップを格納する変数
    public AudioClip titleBGM;
    // ゲームプレイ中に再生するオーディオクリップを格納する変数
    public AudioClip playBGM;
    // ゲームオーバー画面で再生するオーディオクリップを格納する変数
    public AudioClip gameOverBGM;
    // スタートボタンをクリックした時に再生するオーディオクリップを格納する変数
    //public AudioClip startClick;
    // リトライボタンをクリックした時に再生するオーディオクリップを格納する変数
    //public AudioClip retryClick;

    // ゲームの初期化
    void Start()
    {
        // オーディオファイル再生処理のフラグを設定
        audioPlay = false;
        // "AudioSource"コンポーネントを変数"audioSource"に格納する
        audioSource = GetComponent();
        // "AudioSource"コンポーネントにオーディオクリップ"titleBGM"を
        // 割り当てる
        audioSource.clip = titleBGM;
        // オーディオファイルを再生する
        audioSource.Play();
    }

    // ゲーム実行中の繰り返し処理
    void Update()
    {
        // ゲームオーバー画面が表示されていれば
        //（スクリプト"Manager"の変数"gameOve"の値を参照）
        if (Manager.gameOver
            // オーディオファイル再生処理フラグの値が"false"であれば
            && !audioPlay)
        {
            // "AudioSource"コンポーネントにオーディオクリップ"gameOverBGM"を
            // 割り当てる
            audioSource.clip = gameOverBGM;
            // オーディオファイルを再生する
            audioSource.Play();
            // オーディオファイル再生処理フラグの値を"true"に設定
            audioPlay = true;
        }
    }

    // ボタンクリックでオーディオファイルを再生する処理
    public void PlayBGM()
    {
        // "AudioSource"コンポーネントにオーディオクリップ"playBGM"を
        // 割り当てる
        audioSource.clip = playBGM;
        // オーディオファイルを再生する
        audioSource.Play();
        // オーディオファイル再生処理フラグの値を"false"に設定
        audioPlay = false;
    }
}

BGMアセットのダウンロード

スクリプトが用意出来たので割り当てるBGMをアセットストアから無料のアセットを探します。今回はMega Game Music Collection FREE を使用しました。

ダウンロードしたアセットMega Game Music Collection FREE は有料アセットのデモ版という形でゲームのジャンルに合わせていくつかのBGMが用意されています。

スクリプトコンポーネントにオーディオファイルを割り当て

[Project]ウィンドウからオーディオファイルをドラッグ&ドロップでコンポーネントの変数フィールドに割り当てます。今回はカジュアルジャンルのBGMを使用しました。

Audio Sourceコンポーネントを追加

オーディオファイルを再生するためのAudio Sourceコンポーネントを追加します。 [Hierarchy]ウィンドウ > SoundManagerを選択。[Inspector]ウィンドウ > [Add Component]ボタン > Audio > Audio Source を選択。

再生するBGMはループ再生するので、追加したコンポーネントのLoop にチェックを入れておきます。

スタートボタンにオーディオファイル再生処理を割り当てる

[Hierarchy]ウィンドウ > Canvas > Title > Button Start を選択。[Inspector]ウィンドウで Button (Script)コンポーネント > On Clock() パネルの [＋]ボタンをクリック。オブジェクト”SoundManager”を割り当て、関数は SoundManager > PlayBGM を選択します。

リトライボタンにオーディオファイル再生処理を割り当てる

[Hierarchy]ウィンドウ > Canvas > GameOver > Button Retry を選択。[Inspector]ウィンドウで Button (Script)コンポーネント > On Clock() パネルの [＋]ボタンをクリック。オブジェクト”SoundManager”を割り当て、関数は SoundManager > PlayBGM を選択します。

動作確認

ここでいったん動作確認をしておきましょう。[Hierarchy]ウィンドウでオブジェクト”SoundManager”を選択しておきましょう。
[Inspector]ウィンドウで”AudioClip”フィールドのオーディオファイル名が切り替わっていればOKです。

ミュートボタンの配置

WebGLでビルドしたゲームをWebページに掲載する場合、ゲームがロードされていきなりBGMが鳴るのはよろしくないので、音量のミュートボタンを設置してゲームスタート時はミュートしておきたいと思います。

トグルボタンオブジェクトの配置

音量のミュートボタンはトグルボタンを使用します。[Hierarchy]ウィンドウ > [Create]ボタン > UI > Toggle を選択。名前を”Toggle BGM”に変更します。Toggleボタンオブジェクトの階層は下図のようになっています。

それぞれのオブジェクトを下記の通り調整しました。

Togge BGM

Background

Checkmark

Label

ラベルにはUIエフェクトの”Outline”コンポーネントを追加しています。

トグルボタンオブジェクトの設定

[Hierarchy]ウィンドウ > Canvas > Toggle BGM を選択。[Inspector]ウィンドウ > Toggle (Script)コンポーネント > On Value Changed (Boolean)パネルの [＋]ボタンをクリック。オブジェクト”SoundManager”を割り当て、関数は AudioSource > enabled を選択します。

それからIs On のチェックを外しておきます。

最後にSoundManagerのAudioSourceコンポーネントを無効化しておきましょう。
[Hierarchy]ウィンドウ > SoundManager を選択。[Inspector]ウィンドウ > AudioSourceコンポーネントパネルの左上にあるチェックボックスを外します。

WebGLビルド

ここまでの内容をWebGLビルドしてみました。マウスクリックでボールが発生するのに合わせてBGMのチェックボックスを切り替えた場合もボールが発生してしまうのはまた改めて修正が必要ですね。

unityroomのゲーム更新

unityroom で公開しているゲームファイルもあわせて更新しました。