UnityのTimeline機能を使用して、曲に合わせた歌詞の演出を加える方法について解説します。
Timelineを使ってみたい、パーティクルライブを始めてみたい、という方に読んでもらえると嬉しいです!
Timelineを使ってみる
Timelineとは?
UnityにはTimelineと呼ばれる機能があります(公式マニュアル)。
Timelineエディター上では、オブジェクトのon/off、オーディオやアニメーションの再生、パーティクルなど、様々な要素をシーケンスベースでコントロールすることができます。特にオブジェクト間の相互作用のタイミング調整に強く、曲に合わせて演出を加えていくパーティクルライブを作成する際には必須となる機能です。
Timelineを追加する
まずはUnity上にTimelineエディターを表示させます(Window>Timeline)。
![Timeline_unity2 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity2.png)
Timelineエディターの表示
次に、Hierarchy上で空のオブジェクトを作成(Create>Create Empty)し、タイムラインのデータを据えるゲームオブジェクトとします。今回の例では”TLLyrics”という名前にしています。
Hierarchy上で先ほど作成したオブジェクト(TLLyrics)を選択した状態で、Timelineエディターの”Create”をクリックすると準備完了です。自動的に、タイムラインアセット(TLLyricsTimeline)が作成され、TLLyricsにはPlayable DirectorコンポーネントとAnimatorコンポーネントが付与されました。
![Timeline_unity3 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity3.png)
Timelineアセットの作成1
![Timeline_unity4 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity4.png)
Timelineアセットの作成2
Timelineを使ってオブジェクトのアクティブ/非アクティブを切り替える
それでは、実際にTimelineエディターを使ってみましょう。
指定したタイミングでゲームオブジェクトが出現するようにしてみます。Activation Trackを追加して、ゲームオブジェクトのアクティブ/非アクティブをコントロールします。Timelineエディター左上の”Add”からActivation Trackを選択すると、エディター上に新しいトラックが追加されます。
![Timeline_unity5 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity5-1.png)
ActivationTrackの追加1
![Timeline_unity6 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity6.png)
ActivationTrackの追加2
出現させるオブジェクトとして、ひとまずCubeを使ってみます。Hierarchy上にCubeを作成(Create>3D Object>Cube)し、先ほど作成したActivation Trackで指定します。(また、このようなActivation Trackの追加は、出現させたいゲームオブジェクトをTimelineエディター上に直接ドラッグ&ドロップすることでも可能です)
加えて、シーケンス上でActiveの位置も変更してみましょう(今回は60f~180fで指定してみました)。
![Timeline_unity7 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity7.png)
Activation Trackの編集
再生すると、1秒後にCubeが出現する様子が確認できると思います。
このように、タイムラインによるオブジェクトのコントロールはシーケンスベースで視覚的にわかりやすく、いくつものオブジェクトやエフェクトをタイミングを合わせてコントロールしたい場合などに非常に便利になります。
歌詞パーティクルを作成する
曲と画像の準備
今回は八月二雪「アイスクリーム」を例に取り上げます。
曲:https://twitter.com/8gatsu2yuki/status/1141346491992166400
歌詞:http://hachigatsuniyuki.blog.fc2.com/blog-entry-22.html
ここでは、冒頭の「名前呼ばれたら」「見える心の奥底」までを取り扱います。記事内だと見えなくなってしまいますが、背景透過の歌詞画像を準備します。記事に合わせて実際に作ってくださる方は、こちらの画像を使用してみてください。
![1 - STYLY](https://styly.cc/wp-content/uploads/2019/07/1.png)
アイスクリーム歌詞1「名前 呼ばれたら」(※文字色が白で背景透過なので、非常に見えにくいです)
![2 - STYLY](https://styly.cc/wp-content/uploads/2019/07/2.png)
アイスクリーム歌詞2「見える 心の奥底」(※文字色が白で背景透過なので、非常に見えにくいです)
このような画像を用意したい場合、たとえばGIMPといったフリーソフトで作成することもできます。
GIMPで歌詞画像を作る際は、まず「塗りつぶし色:透明」で新規画像を作成します。
![02_Workshop2_0190630ParticleLive (1)_page-0039 - STYLY](https://styly.cc/wp-content/uploads/2019/08/02_Workshop2_0190630ParticleLive-1_page-0039.jpg)
GIMPでの新規画像作成
好きな色で歌詞を入力したら、整列で中央へ寄せることができます。Unity上で位置を合わせやすくするためにも左右・上下で中央へそろえておくことをお勧めします。
![02_Workshop2_0190630ParticleLive (1)_page-0041 - STYLY](https://styly.cc/wp-content/uploads/2019/08/02_Workshop2_0190630ParticleLive-1_page-0041.jpg)
GIMP中央寄せ
PNG画像としてエクスポートすれば準備完了です。
![02_Workshop2_0190630ParticleLive (1)_page-0043 - STYLY](https://styly.cc/wp-content/uploads/2019/08/02_Workshop2_0190630ParticleLive-1_page-0043.jpg)
GIMPでのPNG画像出力
歌詞パーティクル用のマテリアル
上記の画像をUnityのプロジェクトに取り込み、次はパーティクル用のマテリアルの作成です。今回は新しくフォルダ(Lyrics)を作成し、その下で作業することにしました。
プロジェクト上でマテリアルを作成(Create>Material)し、シェーダーを”Particles/Additive”に設定します。Particle Textureに先ほど用意した歌詞画像を設定すると完了です。
![Timeline_unity8 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity8.png)
Material作成
![Timeline_unity9 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity9.png)
シェーダー設定(Particle/Additive)
![Timeline_unity10 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity10.png)
マテリアル作成(テクスチャ)
使う歌詞画像(ここでは”1″と”2″)それぞれにマテリアルを作成すれば準備完了です。
歌詞パーティクルの作成
それでは、実際の歌詞パーティクルの作成に入ります。
まずはHierarchy上で、CreateEmptyより以下のような親子構造を作っておきます。ここではLyrics-rootを親に各歌詞パーティクルを配置していく予定です(上記のTimelineの説明で作成したCubeは消しておきました)。
![Timeline_unity11 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity11.png)
Lyrics-rootを親にして歌詞を配置する
歌詞パーティクルを作成したいゲームオブジェクト(Lyrics-root/1)に、パーティクルコンポーネントを追加し、各パラメーターを設定していきます。
![Timeline_unity12 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity12-1.png)
Particle System Componentの追加
コンポーネントを追加したら、次は各パラメータ―を設定していきます。内容としては、動かさずに1つだけ徐々に現れて徐々に消えていくようにします。
![02_Workshop2_0190630ParticleLive (1)_page-0049 - STYLY](https://styly.cc/wp-content/uploads/2019/07/02_Workshop2_0190630ParticleLive-1_page-0049.jpg)
歌詞パーティクル1
![02_Workshop2_0190630ParticleLive (1)_page-0050 - STYLY](https://styly.cc/wp-content/uploads/2019/07/02_Workshop2_0190630ParticleLive-1_page-0050.jpg)
歌詞パーティクル2
![02_Workshop2_0190630ParticleLive (1)_page-0051 - STYLY](https://styly.cc/wp-content/uploads/2019/07/02_Workshop2_0190630ParticleLive-1_page-0051.jpg)
歌詞パーティクル3
![Timeline_unity13 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity13.png)
歌詞パーティクル3’
![02_Workshop2_0190630ParticleLive (1)_page-0052 - STYLY](https://styly.cc/wp-content/uploads/2019/07/02_Workshop2_0190630ParticleLive-1_page-0052.jpg)
歌詞パーティクル4
このように設定すれば、以下のように歌詞パーティクルが再生できると思います。
![timeline_unity2 - STYLY](https://styly.cc/wp-content/uploads/2019/07/timeline_unity2.gif)
歌詞パーティクル確認
Start Lifetime(消えるまでの時間)とMaterial以外は、どの歌詞パーティクルでも同じ設定で使うことができます。続く歌詞「見える心の奥底」(Lyrics-root/2)も全く同じように設定し、Materialのみを差し替えておきます。作成したLyrics-root/1を複製(ctl+D)して名前を変更する、またはパラメータ―を調整したパーティクルコンポーネントをコピーして貼り付けることができます。
曲に合わせて歌詞パーティクルを出現させる
Timelineエディターで、作成した歌詞パーティクルを曲に合わせて出現させます。
Timelineに曲を読みこむ
Timelineの説明の際に作成したHierarchy上のTLLyricsを選択し、Timelineエディターで確認します(説明に用いたCube用のActivation Trackは削除しました)。
プロジェクトに読み込んだオーディオファイル(”IceCream”)をTielineエディターにドラッグ&ドロップすれば新規トラック(Audio Track)が追加されます。
![Timeline_unity14 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity14.png)
Timelineへの曲の追加
また、わかりやすいように時間表記をFamesからSecondsへ変更しました。
![Timeline_unity15 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity15.png)
Timelineの設定(Frames/Seconds)
Track Groupと歌詞パーティクルの追加
次は歌詞ごとにActivationTrackを追加していくことになるのですが、いくつもの歌詞を管理するため、ここではTrack Groupを利用します。TimelineエディターのAddからTrackGroupを追加します。
![Timeline_unity16 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity16.png)
Track Groupの追加
TrackGroupからActivationTrackを2つ追加し、Lyrics-rootの下に作成した歌詞パーティクルをTimelineへ組み込んでいきます。
![Timeline_unity17 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity17.png)
TrackGroupからActivationTrackを追加する
![Timeline_unity18 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity18.png)
歌詞パーティクルをTimelineに組み込む
曲に合わせて歌詞を出現させる
ここから、曲に合わせて歌詞を出現させるために調整していきます。
シーンを再生(Play)し、曲を聴きながらTimelineエディター上で歌詞パーティクルの出現タイミングを計ることになります。Gameウィンドウで見やすいよう、MainCamera設定を少し変更しました。TransformのPositionを(0,0,-0.5)にし、CameraコンポーネントのClear FragsをSolid Color(BackGroundを黒)に設定しました。
それでは、実際にタイミングを合わせていきます。シーンを再生し、用意した歌詞を歌い始めるタイミングで一時停止、Timeline上のシークバーに合わせてクリップを動かします。オーディオの波形に合わせて微調整することも可能です。次いで、歌い終わるタイミングでクリップが終わるように長さを調整します。
![Timeline_unity19 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity19.png)
歌詞パーティクル、クリップの調整
ただ、このままでは指定したタイミングにパーティクルが現れるものの、指定したタイミングで終わらっていないかと思います。これはクリップの長さとパーティクルの長さが一致していないことによります。
シーンの再生を終了し、クリップを選択、Durationの値をコピーします。その値を対応する歌詞パーティクルのStart LifeTime(パーティクルが発生してから消滅するまでの時間)に設定すれば作成したクリップの長さでパーティクルが発生し消滅します。
![Timeline_unity20 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity20.png)
クリップのDuration(Seconds)をコピー
![Timeline_unity21 - STYLY](https://styly.cc/wp-content/uploads/2019/07/Timeline_unity21.png)
パーティクルのStart LifeTimeに設定
「名前呼ばれた」「見える心の奥底」(1,2)の両方にこの作業をすることで、曲に合わせたタイミングで歌詞パーティクルを出現させることに成功しました。
この歌詞パーティクルに、アバターやパーティクルを合わせて次のようなシーンを作ってみました。
Timelineを利用した歌詞ベースのパーティクルライブの基礎部分は以上になります。
こちらの記事も合わせて読んでいただくと、パーティクルやシェーダーを活用した多様な表現ができるようになると思います!ぜひ、いろいろな表現に挑戦してください!