TimeLineでBGMに合わせた動きを作ろう!

この記事ではclusterクリエイター・W@さんがUnityの機能Timelineを使ってBGMに合わせた表現のつくり方を紹介。音楽イベントなどさまざまな場面で使えそうなTipsになっております!

こんにちはW@です!

本記事ではTimeLineの機能を使用して、ワールドのBGMに合わせて動くオブジェクトの作り方を説明します。
そもそもTimeLineがなにかわからない方は以下の記事を先に読むことをおすすめします。

これから作るもの

この記事では以下のようなものを作成していきます。

また、以下のワールドでも確認する事ができます。

使いこなせるようになると、下記のように音と連動したアスレチックワールドなどもつくれるようになるので、ぜひ記事を読んで試してみてください!

BPMについて

これからBGMに合わせて動くオブジェクトを作っていくのですが、

作る上でBPMという考え方が重要になるので、まずはその説明をします。ある程度理解しているという場合は、【基本】BPMに合わせた動きを作るまで飛ばしてください。

BPMとは

BPMとは「Beat Per Minute」の略で、1分間あたりの拍数を示した数字です。
例えばBPMが120だった場合は、1分間に120拍あるということです。

言葉で説明するとわかりにくいですが、曲に合わせて手拍子してもらえばわかりやすいと思います。
今回は、オブジェクトの動きをこの拍に合わせることでBGMに合わせた動きを作っていきます。

BPMの測り方

BPMを測る方法はいくつかありますが、今回は、私がよく利用しているBPMカウンター 人力テンポ測定器のサイトを使用します。

使用方法は簡単で、サイトに移動し音楽を流しながらボタンをクリックするだけです。
するとクリックした時間の平均からBPMを計算しその曲の大体のBPMが表示されます。

動画ではサンプルに使用するCCKテンプレート「Progression」のBGMのBPMを測定しています。

TimeLineでBPMに合わせる方法

では、曲のBPMがわかったところで、
今回どのようにしてTimeLineを使ってBPMに合わせた動きを作るのかを簡単に説明します。

ProgressionのBGMを例に上げると、BPMが160なので1拍あたり0.375秒となるため、0.375秒でループするアニメーションを用意することでBGMに合った動きを作ることができます。

ただし、この方法では他のBGMに合わせたいとなったときアニメーションを作成し直さなければいけません。

そこで、まず1秒のアニメーションを作成し、それを2.66倍速でループ再生することでBPMに合わせるようにします。
このようにすることで、BGMを変更しても再生速度を変更するだけで対応することができます。

【基本】BPMに合わせた動きを作る

まず、基本となるBPMに合わせてスケールが変化するオブジェクトを作ります。

1:TimeLineを準備する

  • 1.1:Emptyを作成し、わかりやすいように名前を「BeatTimeLine」に変更します。
  • 1.2:Window>Sequencing>TimeLineを選択し、TimeLineウインドウを開きます。
  • 1.3:先程作成した「BeatTimeLine」を選択し、TimeLineウィンドウの「Create」ボタンを押し、新規でTimeLineを作成します。

2:対象となるGameObjectを作成する

  • 2.1:新規でSphereを生成します。他のオブジェクトでも問題ありません。

3:アニメーションを作成する

  • 3.1:「BeatTimeLine」を選択し、すでにあるトラックを消します。
  • 3.2:2で作成したGameObjectをTimeLineウィンドウの左側にドラッグ&ドロップし、AddAnimationTrackを選択します。
  • 3.3:先程追加したトラックの録画ボタンを押します。
  • 3.4:Sphereを選択し、スケール(1,1,1)を記録します。
  • 3.5:TimeLineの時間を60フレーム(1秒)に合わせ、Sphereのスケールを(0,0,0)に変更します。

4:アニメーションの設定を変更する

  • 4.1:TimeLineのトラックの右側で右クリックし、Convert To Clip Trackを選択し、記録したフレームを1秒のアニメーションに変換します。
  • 4.2:変換したアニメーションを選択します。
  • 4.3:AnimationPlayableAssetのLoopをOnにします。
  • 4.4:ClipTimingのSpeedMuitiplierの値にBPM/60(今回はBPMが160なので、160/60)を入力します。

5:BGMを設定する

  • 5.1:新規でAudioSourceを生成します。
  • 5.2:「BeatTimeLine」を選択し、TimeLineを表示します。
  • 5.3:生成したAudioSourceをTimeLineウィンドウ左側にドラッグ&ドロップし、Add Audio Trackを選択します。
  • 5.4:ProjectウィンドウでBGMを探し、追加したトラックの右側にドラッグ&ドロップします。(今回はCCKテンプレート「Progression」のBGMを使用します)

6:クリップの長さを調整する

6.1:アニメーションクリップの右端をドラッグし、曲の長さに合わせます。

7:TimeLineの設定を変更する

  • 7.1:「BeatTimeLine」を選択します。
  • 7.2:Playerable DirectorのWarpModeをLoopに設定します。(BGMがループするようになります)
  • 7.3:UpdateMethodをDSPClockに設定します。(音ズレが発生しにくくなります)

※Playable Directorの設定項目の詳細についてはこちらを参照してください。

8:完成

以上でBPMに合わせて動くオブジェクトは完成です。

【応用①】動きを変更する(難易度:☆)

では、次にアニメーションを編集し、動き方を変えてみましょう。
例として次のような拡大縮小と回転を繰り返す動きに変更します。

1:別オブジェクトに動きを複製する

  • 1.1:新しい動きをさせるオブジェクトを生成します。(今回はCubeを使用します)
  • 1.2:TimeLineのSphereのトラック左側を右クリックし、Duplicateでトラックを複製します。
  • 1.3:複製したトラックのNone(Animator)と書かれているところに生成したCubeをドラッグ&ドロップします。
  • 1.4:ドロップするとCreateAnimator on Cube と出てくるので選択します。

2:アニメーションを編集する

  • 2.1:TimeLineの複製したトラックのクリップをダブルクリックし、アニメーション編集画面を開きます。
  • 2.2:すでにあるキーフレームを削除します。
  • 2.3:録画ボタンを押し、Cubeが拡大→Y回転→縮小→X回転となるように1秒毎にキーフレームを記録し、4秒のアニメーションにします。

3:完成

このように、1周分のアニメーションを編集することで簡単に動きを変える事が可能になります。

【応用②】パーティクルを制御する(難易度:☆☆☆)

続いて、BPMに合わせてパーティクルを制御してみましょう。
ここでは、SignalTrackとControlTrackを使用します。
作業が多いので少しむずかしいかもしれません。

1:パーティクルを準備する

  • 1.1:Effect>ParticleSystemから新規で対象となるパーティクルを生成します。
  • 1.2:生成したパーティクルを選択します。
  • 1.3:インスペクタからParticleSystemのLoopingのチェックを外します。(繰り返し再生をしないようにします)
  • 1.4:Emmisionを開き、RateOverTimeを0に設定します。(時間で生成しないようにします)

2:繰り返し用のTimeLineを準備する

  • 2.1:パーティクルを選択し、TimeLineウィンドウのCreateボタンを押します。
  • 2.2:既存のトラックは使用しないので削除します。
  • 2.3:TimeLineウィンドウ左側で右クリックし、ActivationTrackを選択し、空のトラックを作成します。
  • 2.4:作成したトラックの右端をドラッグし、再生時間を60フレーム(1秒)に変更します。
  • 2.5:パーティクルをTimeLineウィンドウにドラッグ&ドロップし、AddSignalTrackを選択します。
  • 2.6:作成したトラックの0フレーム目で右クリックを押し、AddSignalEmitterを選択します。
  • 2.7:インスペクタのCreateSignalボタンを押し、シグナルファイルを保存します。
  • 2.8:SignalReceiverのNoFunctionと書かれたところをクリックし、ParticleSystem>Emit(int)を選択します。
  • 2.9:その下の数字を50に設定します。(TimeLineがここを再生するとパーティクルが50個生成されます)
  • 2.10:パーティクルを選択し、PlayerableDirectorのPlayOnAwakeのチェックを外します。(勝手にTimeLineが再生されるのを防ぎます)
  • 2.11:WrapModeをLoopに設定します。

3:TimeLineに追加する

  • 3.1:「BeatTimeLine」を選択し、TimeLineウィンドウ左側で右クリックをし、ControlTrackを選択します。
  • 3.2:パーティクルを作成したトラックにドラッグ&ドロップします。
  • 3.3:ClipTimingのSpeedMuitiplierにBPM/60(今回は160BPMなので160/60)を入力します。
  • 3.4:ControlActivationのチェックを外します。(有効/無効を制御しないようにします)
  • 3.5:AdvancedのControl Playable Directors以外のチェックを外します。(今回は繰り返し用TimeLineだけを制御します)
  • 3.6:ControlTrackのクリップの右端をドラッグし、曲の長さに合わせます。

4:完成

これでBGMに合わせてパーティクルを生成できるようになりました。

最後に

いかがだったでしょうか?
今回は説明のためにシンプルなモデルを使用しましたが、オブジェクトがBGMに合わせて動くだけでも楽しくなれるので、ゲームワールドやクラブワールドなどにオススメです!

みなさんも是非チャレンジしてみてください!

記事をシェアしてワールド制作を盛り上げよう!
ABOUT US
W@(㍗)
clusterで好きなようにワールド作ったりイベント立てたりしてます。