【cluster向け】BGM切り替えギミックを作ろう！

作るもの

今回作るものは以下のようなギミックです。

機能としては、

• 3つのBGMを切り替える

• ボタンを押すとBGMが切り替わる

• 5秒かけてフェードする

のようになっています。
それでは早速作っていきましょう！

BGM設定

---

1.BGM用のAudioSourceを作成する

• ヒエラルキーの左上+ボタン＞Audio＞AudioSource
  を選択し、BGMを流す用のAudioSourceを作成します。

AudioSourceを追加

• 作成したAudioSourceを複製し、3つ用意します。

• わかりやすいように名前をBGM1/2/3に変更します。

複製は 右クリック＞Duplicate or ショートカット Ctrl+D でできる

2.BGMの設定を行う

• 作成したAudioSourceにBGMを設定し、
  それぞれに対して音量調整やLoop設定などを行います。

• すべてのBGMがだいたい同じくらいの音量になるように
  設定してください。

すべてのBGMに対して設定する

• 詳しい設定については以下のページで詳しく解説されています。

自分だけに聴こえるローカルBGMをつくる

アニメーション設定

---

1.制御用の親オブジェクトを作成する

• 空オブジェクトを作成し、
  3つのAudioSourceを子に移動します。

• わかりやすいように名前をBGMControlに変更します。

このオブジェクトから3つのBGMを制御する

2.アニメーションファイルを作成する

• 先程作成したBGMControlを選択した状態で
  Animationウィンドウを表示します。

• Animationウィンドウが見当たらない場合はWindow>Animation>Animation
  を選択してウィンドウを表示してください。

Window＞Animation＞Animation

• AnimationウィンドウのCreateボタンを押します。

BGMControl選択＞Createボタン

• Createボタンを押すと保存先と名前を聞かれるので、
  わかりやすいようにBGMフォルダを作り、BGM1という名前で保存します。

アニメーションを保存

3.アニメーションを編集する

まず、BGM1が再生されている状態のアニメーションを作成します。

• BGMControlを選択し、Animationウィンドウの録画ボタンを押します。

BGMControl選択＞録画ボタン

• BGM1を選択し、
  チェックボックス右クリック＞AddKeyを選択します。

• AudioSourceのVolumeも同じようにしてAddKeyを選択します。

チェックボックス右クリック＞AddKey

Volume右クリック＞AddKey

• BGM2とBGM3を選択し、Volumeの値を0に設定します。

Volumeが赤くなればOK

• Animationウィンドウが以下のようになっていればBGM1の
  アニメーションは完成です。

アニメーションが設定されている状態

4.アニメーションを追加する

BGM1の編集が終わったので、BGM2のアニメーションを追加します。

• Animationウィンドウ左上のBGM1をクリックし、
  CreateNewClip…を選択します。

アニメーション追加

• また保存場所が聞かれるので、
  先ほどと同じ場所にBGM2という名前で保存します。

アニメーションを保存

• BGM1と同じようにしてBGM2とBGM3のアニメーションを設定します。

BGM2のアニメーション

BGM3のアニメーション

• ここまでに設定が終わったら、
  BGM1/BGM2/BGM3を選択し、非アクティブにします。

BGM1/2/3を非アクティブに設定する

Animator設定

---

1.AnimatorのStateをつなげる

• BGMControlを選択した状態でAnimatorウィンドウを開きます。

• Aniamtorウィンドウが見当たらない場合はWindow>Animation>Animator
  を選択してウィンドウを表示してください。

Window>Animation>Animator

• AnyStateを右クリックし、MakeTransitionを選択したあと
  それぞれのStateに接続してください。

AnyStateからすべてのStateへつなぐ

2.AnimatorParameterを追加する

現在再生されているBGMを管理するためにパラメータを追加します。

• Aniamtorの左上にある+ボタンを押し、Intを選択します。

• わかりやすいようにCurrentBGMという名前に変更します。

Intパラメータを追加

3.Transition(矢印)の設定を行う

アニメーションの遷移条件などの設定を行います。

• 矢印を選択し、設定を開きます。

AnyStateからBGM1につながる矢印を選択

• Settingsを開き、
  TransitionDuration(s)を5秒、
  CanTransition(s)のチェックをOFFに設定します。

• Conditionsの+ボタンを押して条件を追加し、
  CurrentBGM Equals 0
  に設定します。

CurrentBGMが1のとき移動するように

• 他の矢印についても同じように設定します。

AnyState>BGM2の設定

AnyState＞BGM3の設定

4.動作確認してみる

CCKを使用する前に、動作が正常かどうかを確認しましょう。

• 再生ボタンを押します。

• 最初にBGM1が流れれば成功です。

• エラーが出る場合はCCKに必要なオブジェクトが存在するかを
  確認しましょう(SpawnPoint/DespawnHeight)

再生ボタン/一時停止ボタン

• CurrentBGMの数字を1～3に変更して
  BGMが変わるか確認しましょう。

正常に動作していればBGMがゆっくりと変化するはず

ギミック作成

1.ロジック用アイテムを作成する

処理を管理するアイテムを作成します。

• 空のGameObjectを作成し、
  わかりやすいように名前をBGMLogicにしておきます。

• OnCreateItemLogicを追加します。

• OnCreateItemLogicの+ボタンを押し、
  TargetをCurrentBGM、
  ValueをInteger/1
  に設定します。

最初に流れるBGMを設定

2.スイッチ用アイテム作成する

BGM切り替え用のスイッチとなるアイテムを作成します。

• Cubeを作成し、
  わかりやすいように名前をBGM1Switchにしておきます。

• InteractItemTriggerを追加します。

Cubeを作成→InteractItemTriggerを作成

• InteractItemTriggerの+ボタンを押し、以下のように設定します。

このような表示になっていればOK

• 同じようにしてBGM2Switch/BGM3Switchを作成します。

• InteactItemTriggerの数字は設定するBGMによって変更します。

BGM2Switchの設定

BGM3Switchの設定

3.ギミックを設定する

• BGMControlを選択し、SetAnimatorValueGimmickを追加します。

SetAnimatorGimmickを追加

• SetAnimatorValueGimmickを以下のような設定にします。

このような表示になっていればOK

• 最後にBGMSwitchをいい感じの位置に移動させます。

押しやすい位置に移動させる

完成

これで、BGM切り替えギミックは完成です！

もし、BGMを増やしたい場合は最初の手順から同じように行えば
簡単に追加できます。

よったらぜひ作ってみてください！

～サンプル動画使用BGM～
カナリアスキップ written by まんぼう二等兵
情動カタルシス written by まんぼう二等兵
ワスレナグサ written by まんぼう二等兵