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

はじめに

作例

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

サンプル

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

 

Timelineアセットの実体化

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

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

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

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

 

音を鳴らす

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

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

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

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

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

Timelineはロックしておく

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

シェーダーの作成

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

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

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

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が黒くなります。

 

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

TimelineにCubeを登録

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

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

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

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

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

Timelineにクリップを追加

TimelineをRecording状態にする

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

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

 

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

次にCubeを選択します。

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

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

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

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

Clip Trackへ変換

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

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

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

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

 

Clip Trackを複製

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

 

 

クリップ名の変更

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

スナップを解除する

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

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

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

 

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

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

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

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

 

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

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

アセット名の設定

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

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

 

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

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

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

 

AnimationClipのアセット化

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

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

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

AnimationClipをTimelineに並べる

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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