UnityのTimelineを使って、音楽とシェーダーを同期させる方法

はじめに

UnityのTimelineを利用して、音楽とシェーダーを同期させる方法を解説します。
 

作例

以下はノイズ系シェーダーをノイズ系の音楽に同期させた表現になります。

 

GitHubサンプル

https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/NoiseMusicSync_Sample

サンプルアセットをWebEditorで確認する

サンプルアセットをWebEditorで確認するLaunch the WebEditor

※STYLYに登録していれば、本TIPSで作成したサンプルアセットをWebEditorで確認することができます。 アカウント未登録の場合、新規登録を行ってから再度、本ボタンをクリックしてください。

アカウント登録はこちらから Click here

 

Timelineで音を鳴らす

ここではTimelineを作成し、音を再生するまでの手順を解説します。  

Timeline作成

まずはTimelineを作成します。 Projectウィンドウ上で右クリックし、 Create -> Timeline を選択します。

Timelineの作成

Timelineの作成

 
作成されるTimelineアセット

作成されるTimelineアセット

Timelineアセットの実体化

次にTimelineアセットを実体化させましょう。 先ほど作成したTimelineアセットをHierarchyウィンドウへドラッグ&ドロップします。

TimelineアセットをHierarchyへD&D

TimelineアセットをHierarchyへD&D

  PlayableDirector付きのGameObjectが作成されます。 PlayableDirectorはTimelineを動すために必要となるものです。

作成されたPlayableDirectory付きのGameObject

作成されたPlayableDirectory付きのGameObject

Timelineアセットをダブルクリックすると、Timelineウィンドウを開くことができます。

Timelineアセットをダブルクリック

Timelineアセットをダブルクリック

Timelineウィンドウ上ではTimelineの編集や再生を行うことができます。 Timelineを編集するときには基本的にはこのウィンドウ上で作業を行うことになります。

Timelineウィンドウ

Timelineウィンドウ

 

音を鳴らす

今回はサイン波が一定間隔で鳴っている音を利用します。

サンプル音源のダウンロードはこちら(リンク)   まずは音データ(AudioClip)をTimelineへドラッグ&ドロップします。

  AudioTrackが作成され、AudioClipが登録されました。

AudioClipがTimelineに登録される

AudioClipがTimelineに登録される

  sin_C5クリップをつかんで左へドラッグし、左端を0に合わせておきます。

Clipの開始位置を0に合わせる

Clipの開始位置を0に合わせる

この状態でUnityの再生ボタンを押すと、音が再生されます。  

Timelineはロックしておく

他のオブジェクトを選択したときにTimelineの表示が外れないよう、ウィンドウの右上の鍵アイコンをクリックしてロック状態にしておきます。

Timelineをロック

Timelineをロック

シェーダーの作成

次に、Timeline側でコントロールするためのシェーダーを作成します。 Projectウィンドウの右クリックメニューからCreate -> Shader -> Unlit Shader を選択し、シェーダーを作成します。

シェーダー作成

シェーダー作成

名前はSimpleColorとしておきます。

SimpleColor.shader

SimpleColor.shader

  シェーダーは以下のように編集します。

Shader "Unlit/SimpleColor"
{
	Properties
	{
		_MainTex("Texture", 2D) = "white" {}
		_Color("Color", Color) = (0, 0, 0, 1) // color
	}
		SubShader
		{
			Tags { "RenderType" = "Opaque" }
			LOD 100

			Pass
			{
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag
				// make fog work
				#pragma multi_compile_fog

				#include "UnityCG.cginc"

				struct appdata
				{
					float4 vertex : POSITION;
					float2 uv : TEXCOORD0;
				};

				struct v2f
				{
					float2 uv : TEXCOORD0;
					UNITY_FOG_COORDS(1)
					float4 vertex : SV_POSITION;
				};

				sampler2D _MainTex;
				float4 _MainTex_ST;
				float4 _Color; // color

				v2f vert(appdata v)
				{
					v2f o;
					o.vertex = UnityObjectToClipPos(v.vertex);
					o.uv = TRANSFORM_TEX(v.uv, _MainTex);
					UNITY_TRANSFER_FOG(o,o.vertex);
					return o;
				}

				fixed4 frag(v2f i) : SV_Target
				{
					return tex2D(_MainTex, i.uv) * _Color;
				}
				ENDCG
			}
		}
}

 

マテリアルの作成

上記のSimpleColorシェーダーからマテリアルを作成します。

マテリアルの作成

マテリアルの作成

作成されたマテリアル

作成されたマテリアル

 
 

Cubeを作成

HierarchyのCreateボタンを押し、3D Object -> Cubeを選択するとCubeが作成されます。

Cubeを作成

Cubeを作成

 

Cubeにマテリアルをアタッチ

マテリアルをドラッグ&ドロップして作成したCubeにマテリアルを登録します。

Cubeにマテリアルを登録

Cubeにマテリアルを登録

  マテリアルを登録するとCubeが黒くなります。

マテリアルの登録結果

マテリアルの登録結果

 

Timelineでシェーダーを変化させる

TimelineにCubeを登録

TimelineにCubeをドラッグアンドドロップし、CubeをTimelineへ登録します。

CubeをTimelineへドラッグ&ドロップ

CubeをTimelineへドラッグ&ドロップ

  メニューが表示されるので、Animation Trackをクリックします。

Animation Track を選択

Animation Track を選択

  TimelineにCubeオブジェクトのAnimationTrackが作成されます。

作成されたAnimationTrack

作成されたAnimationTrack

  以上でTimelineへのCubeオブジェクトの登録は完了となります。 次にこのAnimationTrackを編集していきます。   シークバーの位置は時間0に合わせておきます。

シークバーを0の位置に合わせる

シークバーを0の位置に合わせる

  TImeline左上の|<<マークをクリックすることでシークバーを0の位置に合わせることができます。

シークバー位置を0に合わせる

シークバー位置を0に合わせる

Timelineにクリップを追加

TimelineをRecording状態にする

Timelineウィンドウの左上にある赤い丸アイコンをクリックし、Recording状態にします

Recording開始

Recording開始

  AnimationTrackが赤くなりRecording状態となり、編集状態になります。

Recording状態のTimeline

Recording状態のTimeline

 

黒色のキーフレームを追加

次にCubeを選択します。

Cubeをクリック選択

Cubeをクリック選択

  Inspectorウィンドウ上のマテリアル欄でColorの部分を右クリックします。

InspetorのColorの部分を右クリック

InspetorのColorの部分を右クリック

  メニューが表示されるので、”Add Key”を選択します。

Add Keyを選択

Add Keyを選択

  現在のColorの情報がキーフレームとしてTimelineへ追加されました。

Timelineのシークバーの位置にキーフレームが追加される

Timelineのシークバーの位置にキーフレームが追加される

今回はColor = (0, 0, 0, 1) という黒色のキーフレームがTimelineへ追加されたことになります。  

Clip Trackへ変換

たった今、キーフレームを打ったわけですが、これを扱いやすくるためClip Trackへ変換します。

右クリック

右クリック

  表示されるメニューの中から “Convert to Clip Track” を選択します

ClipTrackへ変換

ClipTrackへ変換

  キーフレームがClip Trackに変化します。

作成されたClip Track

作成されたClip Track

  Clip TrackをダブルクリックするとAnimationのウィンドウが開き、Clip Trackを開くことができます。 今回は Color = (0, 0, 0, 1)のキーフレームが0:00の位置に置かれています。

 

Clip Trackを複製

Clip Trackを右クリックし、表示されるメニューからDuplicateを選択します。

ClipTrackを複製

ClipTrackを複製

 

複製されたClipTrack

複製されたClipTrack

 

クリップ名の変更

クリップの名前が曖昧なので、リネームします。   まずは1番目のRecordedクリップをクリックします。

1番目のRecordedクリップをクリック選択

1番目のRecordedクリップをクリック選択

  Inspectorウィンドウの上のほうに名前入力欄(Recordedと入力されている部分)があるので、ここに Blackを入力します。

Recordedの部分をBlackに変更

Recordedの部分をBlackに変更

  入力するとクリップ上のテキストがBlackに変化します。

クリップのテキストがBlackに変化している

クリップのテキストがBlackに変化している

  同様の手順で2番目のクリップの名前はWhiteに変更します。

リネームした結果

リネームした結果

 

キーフレームを白色にする

Whiteクリップをダブルクリックして開きます。

Whiteクリップをダブルクリックして開く

Whiteクリップをダブルクリックして開く

  中にあるキーフレームを Color = (1, 1, 1, 1)に変更します。

キーフレームをColor = (1, 1, 1, 1)にする

キーフレームをColor = (1, 1, 1, 1)にする

  この状態でTimelineを再生すると、Whiteトラックが開始するタイミングでCubeが白色(Color = (1,1,1,1))に変化します。

Whiteトラックが開始するタイミングでCubeが白くなる

Whiteトラックが開始するタイミングでCubeが白くなる

  Cubeの色が変化するようになりましたが、音の再生タイミングとズレています。

Whiteトラックを音に合わせたい

波形とWhiteトラックを合わせることで音のタイミングと色の変化のタイミングを合わせたいと思います。   波形の表示が小さすぎてタイミングを合わせるのが大変なので、マウスホイールを回転させて拡大させます。

マウスホイールを回転させてウィンドウを拡大する

マウスホイールを回転させてウィンドウを拡大する

  波形が見えるレベルまで拡大します。

波形が見えるレベルまで拡大

波形が見えるレベルまで拡大

  次に音が鳴るタイミング(赤い枠で囲っている部分)にWhiteクリップを合わせたいと思います。

  デフォルトの状態ではスナップが効いているため、トラックを音に合わせようとしても目盛りに合うように移動してしまいます。

トラックを動かそうとすると目盛りの位置に移動してしまう

トラックを動かそうとすると目盛りの位置に移動してしまう

  これを解決するためには スナップをOFFにする必要があります。

スナップを解除する

ウィンドウ右上の歯車アイコンをクリックします。

歯車アイコンをクリック

歯車アイコンをクリック

  表示されるメニューの中に “Snap to Frame” があるので、これのチェックマークを外します。

Snap to Frameのチェックを外す

Snap to Frameのチェックを外す

  スナップをOFFにした場合は自由に動かすことができます。

スナップOFFで移動させた場合

スナップOFFで移動させた場合

 

Whiteトラックを音が鳴るタイミングに合わせる

Whiteトラックを以下のように音に合わせて配置します。

  この状態でシーンを再生すると、音が鳴るタイミングに合わせて箱が白くなります。

  ここでいったんシーンを保存します。 ウィンドウ左上のメニューから File -> Save Scenesを選択することでシーンを保存できます。

シーンの保存

シーンの保存

 

Animatinクリップをアセット化する

Timeline上で作成したクリップはアセット化することで、使いまわせるようになるため利便性が上がります。 ここでは、クリップをアセット化する方法を解説します。  

アセット名の設定

まずはBlackクリップを選択し、Inspectorの Animation Clip Nameの部分に “SetBlack”と入力します。 同様にWhiteクリップを選択し、Inspectorの Animation Clip Nameの部分に “SetWhite”と入力します。

BlackクリップのAnimationNameにSetBlackと入力

BlackクリップのAnimationNameにSetBlackと入力

この状態でシーンをSaveすると、Timelineアセットの中にAnimationClipが作成されます。

Timelineの中にAnimationClipが出現

Timelineの中にAnimationClipが出現

 

トラブルシュート : AnimationClip名の入力欄が表示されない

シーンを保存していない場合、AnimationClip名の入力欄は表示されません。

シーンを保存していない場合、Animationクリップ名入力欄が表示されない

シーンを保存していない場合、Animationクリップ名入力欄が表示されない

  これを解決するためにはシーンを保存する必要があります

シーンの保存

シーンの保存

 

AnimationClipのアセット化

Timelineの中に見えているAnimationClipを選択してDuplicateすることで、AnimationClipをアセットとしてTimelineの外に出すことができます。

AnimationClipを複製

AnimationClipを複製

  SetBlackアニメーションがアセット化されてSetBlack.animファイルが作成されます。

アセット化されたAnimationClip

アセット化されたAnimationClip

  同様の手順でSetWhite.animも作成します。  

AnimationClipをTimelineに並べる

作成したSetWhite.animとSetBlack.animをTimelineへドラッグ&ドロップします。

SetBlack.animをTimelineへ登録

SetBlack.animをTimelineへ登録

  Timeline上にクリップが作成されますが、少し短すぎます。

Timeline上に作成されたSetBlackクリップ

Timeline上に作成されたSetBlackクリップ

 

他のアニメーショントラックの長さをコピペする

Blackトラックがちょうどいい長さなので、SetBlackも同じ長さにしたいと思います。 まずはBlackクリップを選択し、 Inspectorウィンドウ上のDurationという項目にある数値をコピーします。

Durationの数値をコピー

Durationの数値をコピー

  SetBlackクリップを選択し、Durationの部分の数値へペーストします。

Durationの数値ペースト

Durationの数値ペースト

  SetBlackクリップの長さがBlackクリップと同じ長さになりました。

Durationペースト後のSetBlackクリップ

Durationペースト後のSetBlackクリップ

  同様の手順でSetBlackクリップとSetWhiteクリップを隙間なく交互に配置します。

交互に配置したSetBlackとSetWhite

交互に配置したSetBlackとSetWhite

  この状態でシーンを再生すると、音のタイミングに合わせて色が白→黒→白→…と変化します。

  以上で、音とシェーダーの同期は完了となります。  

UnityからSTYLYにアセットをアップロードする方法(シーンの場合)

Timelineオブジェクトが配置されたシーンをアップロードすることでTimelineをSTYLYへアップロードすることができます。 詳細なアップロード方法については下記URLをご覧ください。

UnityからSTYLYにアセットをアップロードする方法(Prefabの場合)

TimelineオブジェクトをPrefabとしてアップロードしたい場合、Timelineオブジェクトが参照しているデータをPrefabの中に入れる必要があります。 今回はTimelineがCubeを参照しているので、Timelineオブジェクトの中にCubeを入れます。

Timelineオブジェクトの中にCubeを入れる

Timelineオブジェクトの中にCubeを入れる

  詳細なアップロード方法については下記URLをご覧ください。

STYLYへアップロードする時のサウンド設定

STYLYへ大きいサウンドデータをアップした場合、 サウンド再生時に遅延が発生してシェーダー変化とサウンド再生にズレが発生してしまう場合があります。   以下のような設定にすることで、遅延を解消することができます。 ・サウンドファイルの形式は.wavにする ・Load in backgroundのチェックマークを入れる(別スレッドでロードさせる) ・Compression FormatPCM(無圧縮)にする