テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】Timeline上でビデオクリップを再生したりフェードで切り替えたりする方法

f:id:tsubaki_t1:20180830000154j:plain

今回はTimeline上でビデオクリップ(mp4やwebmといったフォーマット)を再生してみます。

 

 

Unityでビデオを再生

UnityはUnity 5.6辺りでVideo Playerという機能が新しく追加されました。今回はそのVideo PlayerをTimeline上から制御するアプローチになります。

tsubakit1.hateblo.jp

Timelineでビデオを再生

Timelineでビデオを再生するトラックは初期機能には含まれていないので、Default Playableから入手します。

assetstore.unity.com

利用するのはVideo Script Playable Trackです。

f:id:tsubaki_t1:20180829224253j:plain

 

手順

まずVideo Playerを用意します。

  • メニュー>Create >Video > Video Player

これでVideoPlayerが作成されます。
基本的にTimeline側では再生するアニメーションクリップやアルファ等は指定出来ますが、それ以外の項目…例えば”どういった方法で再生するのか”といった再生の根底にある項目はVideo Player側で制御します

f:id:tsubaki_t1:20180829224500j:plain

 

Video Player側の設定ではレンダリングの方法を指定します。

  • Render ModeはCamera Near Plane
  • CameraにMainCamera

ソースやビデオクリップの指定はココではしません。

f:id:tsubaki_t1:20180829224838j:plain

 

Timeline側の設定です。
まずはVideo Script PlayableTrackを作成します。

  1. Assets > Create > Timeline
    作成したTimelineアセットをシーンへドラッグ&ドロップ
  2. Window > Sequencing > TimelineでTimelineウィンドウを開く
    1で作成したGameObject(PlayableDirector入)を選択
  3. Add > Video Script Playable Track
  4. クリップリストを右クリックし、Add From Video Player
  5. 作成したクリップを選択し、Video Clipに再生したいビデオクリップを登録

f:id:tsubaki_t1:20180829230347g:plain

これでTimelineを再生させると動画が再生されるようになります。
うまく再生されない場合はPreviewボタンを一旦OFFにして再度ONにすると再生されるようになることがあります。

f:id:tsubaki_t1:20180829230436j:plain

各項目の説明はこんな感じです

  • Video Player : 再生に使用するビデオプレイヤー
    1クリップにつき1ビデオプレイヤーが必要
  • Video Clip : 再生するビデオクリップ。URLは指定できない
  • Mute : ミュートするかどうか
  • Loop : ループするかどうか
  • Preload Time : 事前にある程度、動画のバッファを読み込んでおく時間です
  • Clip In Time : 開始時間を少しずらす設定みたいです。但しループ時は0秒からスタートです

f:id:tsubaki_t1:20180829231028j:plain

なお、ビデオプレイヤーは基本的に使い回し出来ません。同じトラックに複数のクリップを置けるので、ビデオプレイヤーを複数のクリップで使いまわしたくなりますが、どうもそれは出来ないみたいです。

 

ビデオのフェード

表現の仕方にも依るのですが、ビデオを即座に出したり消したりするのではなく、フェードしながら出したり複数のカメラをフェードしながら切り替えるといった事をしたくなる事があるかもしれません。例えば演出とかで。

そのやり方を見ていきます。

f:id:tsubaki_t1:20180829233046g:plain

まず大前提として、ビデオプレイヤーのRender ModeがCamera Near PlaneもしくはCamera Far Planeである必要があります。動画で半透明を使うために必要な措置です。

f:id:tsubaki_t1:20180829233757j:plain

まずビデオのフェードを見ていきます。
これはEase In DurationやEase out Durationの設定と一致します。この時間の分だけ、アニメーションクリップがフェードしながら入ります。
なお半分以上の時間を指定することは出来ません。

  • フェードイン・フェードアウトの時間だけEase In DurationやEase out Durationを設定する。

f:id:tsubaki_t1:20180829233531j:plain

f:id:tsubaki_t1:20180829234245g:plain

ビデオのブレンドも似たような設定です。ただし、1クリップ1ビデオプレイヤーの原則に従い複数のVideo Playerを用意する必要があります。

クリップ毎にVideo Playerを設定すれば、あとはアニメーションでやっているようにクリップ同士をブレンドします。これでアニメーションがブレンドされます。

f:id:tsubaki_t1:20180829234458j:plain

 

問題

  • Timelineで指定したVideo Clipが登録しっぱなしになります
  • スクラブで動かす時、「進む(右にヘッドを動かす)」は兎も角「戻る(左にヘッドを動かす)」はマトモに動きません。その場合は一度クリップ外にヘッドを動かさないと動かいかもしれません。
    そういった意味では、動画も含めて動きを調整したい場合はゲームを再生しながらの方が良いかもしれません。
  • 音はゲームを再生しながらでないと出ない印象です

【Unity】知っていると少し幸せになれる、Timelineの21の小技集

f:id:tsubaki_t1:20180829013819j:plain

知っているとTimelineを操作する上で少しだけ幸せになれるTimelineエディター操作の小技集です。
動作確認:バージョン Unity 2018.2f5

 

 

Tips

PlayableDirectorをサクっと追加する

Timeline AssetをHierarchyビューへドラッグ&ドロップするとPlayable Directorが自動的に追加されます。Timeline AssetはPlayableDirectorに最初から設定済みです。

なおHierarchyビューではなく任意のオブジェクトに追加すると、オブジェクトにPlayableDirectorが追加されます。

f:id:tsubaki_t1:20180828215759g:plain

 

シーンの中にあるTimelineを開く

Timelineウィンドウ中央付近のトグルから、シーンに配置されているPlayableDirectorを切り替える事が出来ます。これはロックしていた場合も同様に切り替えられます。

サンプルシーンを開いてPlayableDirectorを探したり、Timelineの階層化等で複数のTimelineを制御している場合に特に有益です。

f:id:tsubaki_t1:20180829001604g:plain

自分の場合、大抵はTimelineウィンドウを開いたら「ウィンドウのロック」→「上の操作」でTimelineを切り替えてからエディターの編集を開始します。
また、ついうっかりTimeline Assetに参照が切り替わってしまっていた場合も、この操作を行えば「シーン内のTimeline」に切り替わるので、混乱なく通常の操作に戻る事ができます。

 

アニメーションクリップの一部をスローモーション再生にする

f:id:tsubaki_t1:20180828223214g:plain

やり方は単純で、アニメーションクリップをSplit(分割)して、間のアニメーションの速度を少しゆっくり目にしてやるだけです。
加減速が明確に分かれるので、段々加速したいといった場合には少しスカイがッテが悪い手法ですが、ゲーム全体の時間をゆっくりにしないという点で使えます。
ゲーム全体をゆっくりにしても良いならDefault Playableのモノを使えば良いです。そちらは加減速をゆっくりと切り替えられます。

f:id:tsubaki_t1:20180828223758g:plain

tsubakit1.hateblo.jp

 

アニメーションカーブビューの大きさを変える

アニメーションカーブの大きさは縁をドラッグすれば変更出来ます
特に細かいカーブを調整する場合には大きめに設定しておくと、色々と調整が楽にできて良いです。

f:id:tsubaki_t1:20180828224240g:plain

 

トラックの高さを変える

Ctrlを押しながらマウスのホィールを回すと、トラックの高さを変更することが出来ます。そんなことより縦にスクロールさせて欲しい(マジレス)

f:id:tsubaki_t1:20180828231032g:plain

 

Timelineの表示範囲を「全体」と「選択中のクリップ」で切り替える

Timelineの表示する範囲は、Aキーを押すと全体に、Fキーを押すと選択中のクリップに切り替わります(選択は複数選択も可)。

なお、この「全体」はスタート地点から最終地点ではなく、クリップが存在する範囲での全体です(つまり頭にクリップがない場合、最初は含まれない)

f:id:tsubaki_t1:20180828224827g:plain

 

Timelineの再生をキーから行う

「スペースキー」でTimelineの再生が始まります。停止もスペースキーです。
これは主に、Timelineの動作を確認する上で「指定する場所から再生」というのを速やかに行う際に便利です。

慣れると大丈夫なのかもしれませんが、スクラブで動作を確認すると少しアニメーションが早すぎたりするので、こういった形で確認するのは結構有益です。

f:id:tsubaki_t1:20180828225525g:plain

 

指定範囲を繰り返し再生する

再生範囲を有効にすると、その範囲を繰り返し再生するようになります。上と同じように特定の範囲の動作を集中して確認したい場合に使えます。

f:id:tsubaki_t1:20180828225719j:plain

特に、初期設定だとTimelineは再生終了時に自動的に停止してしまうので、動作を繰り返し確認したい場合にコレを使うのは結構良いです。
一方Wrap ModeをLoopに設定すれば、プレビューでも繰り返し再生されるようになります。最初と最後のつなぎを確認したい場合はこちら。

f:id:tsubaki_t1:20180828230244j:plain

 

ヘッドの位置より前 / 後のクリップを一括選択

ヘッドを右クリックすると、ヘッドの位置を基準に幾つかの条件でクリップを選択出来ます。例えば選択中以降のクリップとか。

f:id:tsubaki_t1:20180828230607g:plain

すこし厄介な挙動(バグ?)が、ロックしたクリップも選択対象に含まれる点です。そのためコレで選択後に動かしても元の位置に戻ってしまう事があります。

 

クリップがない場所もアニメーションを継続させる

アニメーションがない場所でもアニメーションを継続して再生したい場合は、Pre-ExrapolateやPost-ExtrapolateをLoopに設定します。

これで、動かないモブキャラ(もしくは陰の実力者)に一々Timeline全体と一致する長さのクリップを作らなくても良くなります。

f:id:tsubaki_t1:20180829002553g:plain

これ少し応用すると、少しずつアニメーション再生タイミングがずれた状態で走らせる等も簡単に出来ます。同じタイミング出歩いてるのが気持ち悪い場合に使えそうです

(ただし後続のアニメーションとブレンドする事が出来ないので、アニメーションが変化する予定があるなら使い所は注意が必要です)

f:id:tsubaki_t1:20180829003206g:plain

 

アニメーションビューのキーを、値を変更せず時間だけズラす

キーを横に動かした直後にShiftを押しっぱなしにすると、横軸にしか動かなくなります。カーブの情報は維持されるので、動かした直後に調整が必要になるかもしれません。
個人的な意見では、とっととアニメーションクリップにしてアニメーションウィンドウで修正した方が良いです。

f:id:tsubaki_t1:20180828231447g:plain

 

その場にキーを打つ

アニメーションでキーフレームを設定する際、レコード中のオブジェクトであればコンポーネントを右クリックしてAdd Keyでその場にキーを打てます。

f:id:tsubaki_t1:20180828231857g:plain

 

次のキーの位置へヘッドを動かす

キーフレームで値を変更しているコンポーネントのフィールドを右クリックしてGo To next Keyで、次のキーフレームまでヘッドを動かします。
指定のキーを調整したい場合に便利です。

f:id:tsubaki_t1:20180828232315g:plain

 

アニメーションカーブをClipに変換し、カーブ同士をブレンドする

TimelineのアニメーションカーブをAnimationClipへ変換するのは、主にAnimationWindowを使えるという点で非常に便利なのですが、他にも「タイミングを調整しやすくなる」や「ブレンドしやすくなる」といった利点があります。

Convert To Clip Track実行後、アニメーションクリップが既にある場所にヘッドを合わせるとクリップを編集しますが、クリップがない場所を編集すると新しいクリップが作られるようになります。

f:id:tsubaki_t1:20180829011443g:plain

なお、2つ以上クリップを作るとカーブに戻すことは出来なくなります。アニメーションカーブに戻したい場合はカーブを一旦トラックから外す必要があります。
これは以前は一つのカーブに統合されてしまっていたのですが、こちらの方が自然な感じです。

 

Control Trackにオブジェクトを登録

Control Trackが既にあるなら、Control Trackにドラッグ&ドロップすればオブジェクトを登録してくれます。その際、操作する対象の長さでオブジェクトの長さも調整してくれます。

Control TrackはTimelineの階層化する際に使うので、こういった形でサクっと登録出来るのは便利です。

f:id:tsubaki_t1:20180828233255g:plain

(階層化しない非常に長くトラックも多いTimelineは負荷が高くなる傾向があるらしいので、Timeline使うなら階層化はオススメです)

tsubakit1.hateblo.jp

表示するTimelineを子Timelineに切り替える

Timelineを階層化したとき、呼び出すControl Playableをダブルクリックすれば子Timelineに切り替わります。
階層化していた場合の必須テクニックです(※Unity 2018.2までは無かった)

f:id:tsubaki_t1:20180828234039g:plain

このアプローチで子Timelineに切り替えた場合、子Timelineをプレビューすると、一緒に親Timelineも動作するようになります。つまり全体の動きの確認が楽になります。

f:id:tsubaki_t1:20180829010306g:plain

 

Control Playableの長さを、子Timelineの長さに合わせる

Timelineの階層化を行った時、子Timelineの長さがControl Playableの長さと一致しない場合があります。子Timelineが短い場合は余り問題にならないのですが、子Timelineが長くControl Playableが十分出ない場合には、Timelineが途中で停止してしまう現象が発生するかもしれません。

f:id:tsubaki_t1:20180828234308j:plain

Control PlayableのClipを右クリックしMatch Controlで良い感じの長さに調整してくれます。

f:id:tsubaki_t1:20180828234600j:plain

なお親Timelineが使用するControl Playableの長さは、色で判別出来ます。この範囲を超えないようにTimelineを作るか、超えたら親も調整するといった事が必要です。

f:id:tsubaki_t1:20180829000405j:plain

 

数の子Timelineを一気に管理する

TImelineの親子関係を編集する際、一つのTimelineが複数のTimelineを一斉に操作するケースが発生します。例えば「キャラクター」と「ステージ周辺」と「音楽」と…といった感じに複数人で各々が担当するTimelineを編集し、最終的に統合するといった場合です。

そういった場合Control Playableを大量に用意するのではなく、特定のオブジェクトの下にTimelineを配置するのが一番手っ取り早いです。
下の例では、GameObjectの下に配置したTimelineが自動的に動作するようになります。

f:id:tsubaki_t1:20180829005158g:plain

この方法で親子関係を構築した場合、Control Playableでダブルクリックするのではなく、Edit Sub-Timelinesで切り替えます。

f:id:tsubaki_t1:20180829005631j:plain

 

Timelineがロックされてるか確認する

Timelineはウィンドウがロックされていないとマトモに操作出来ませんが、ロックボタンのUIは小さすぎて確認するのが困難です。
特に色合い的に視認性が高い訳ではなく、しかもドット絵単位で小さいとなれば尚更。

f:id:tsubaki_t1:20180828235019j:plain

Timelineウィンドウのタブを右クリックすると、楽に確認出来ます。

f:id:tsubaki_t1:20180828235114j:plain

 

クリップをブレンドする、押し出す、削り取る

Addボタンの右にあるボタン郡で、クリップを動かしたときの動きが変化します。
例えば一番左はクリップ同士のブレンド(可能なものなら)ですが、真ん中にするとクリップが可能なら押出、一番右にするとクリップが動いた分だけ他のクリップの長さが削られるようになります。

主にクリップの位置調整に使い勝手が良いです。

f:id:tsubaki_t1:20180828235915g:plain

 

音楽に合わせて調整したい場合

音楽にあわせて調整したい場合、TImelineは外部アセットなので普通に再生しながら調整等も出来るのですが、Enable Audio Scrubbingでゲームを再生せずともオーディオ再生させることが可能です。

逆を言えば再生されてしまうので、音が出てウザい場合は外します。地味に負荷が高いのでなんとなく重い場合も外します。

f:id:tsubaki_t1:20180829000911j:plain

 

感想

結構ふんいきで利用している機能ですが、探してみると色々なTipsがありました。
「コレ知らんかった」や「他にもこんなのあるよ!」といった物があれば、つぶやいてくれると嬉しいです。

 

© UTJ/UCL

【Unity】Timeline上で親オブジェクトを切り替える

以前紹介したサンプルですが、これが割と使うケースが多いのでちゃんと紹介しようと思います。

 

 

Timelineで親オブジェクトを切り替えたい

Timelineは親オブジェクトを差し替えられると結構色々なところで楽が出来ます。
例えばカートでキャラクターを動かす場合、カートの下に動かしたい対象を載せて運べば簡単に動かすことが出来ます。Tweenも同様です。

例えばゲームからカットシーンへ移動する場合、キャラクターの載せ替えを行わないならば取れる手段は2つです。キャラクターを2体用意して事前に乗せておくか、載せなくても動かせるようにするかです。
アニメーションのオーバーライドは後者、作りやすいのは前者(ただし結構高いコストを払うと思われ)です。

https://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubaki_t1/20180826/20180826182044.gif

とにかく、Timelineで親オブジェクトの差し替えが出来ると何かと楽が出来ます。なので、Timelineで親オブジェクトを差し替えるサンプルを作りました。

上のGIFアニメは、キャラクターをカートで動かしていますが、途中でキャラクターが乗るカートが切り替わっています。

 

Timelineで親オブジェクトを差し替える

 

gist.github.com

使い方は単純、まずトラック(TransformParentTrack)で親オブジェクトを切り替えたいTransformを指定します。今回の場合はキャラクターを指定します。

  1. Addボタンを押す
  2. TransformParentTrackを指定
  3. Transformにキャラクターを指定

後はクリップを作成し、Parentに親オブジェクトを指定します。今回の場合は赤と白のCubeを行ったり来たりしています。

  1. クリップビューを右クリックし、Add From Transformを指定
  2. 一覧からCubeを選択
  3. 1と同じ動作でCube(1)も登録

f:id:tsubaki_t1:20180828021054j:plain

 

f:id:tsubaki_t1:20180828020815g:plain

なお、Timelineのプレビューが終わったら「プレビュー直前」の状態に戻ります。

 

関連

本来はコレ用のサンプル

tsubakit1.hateblo.jp主な用途

tsubakit1.hateblo.jp

【Unity】Timelineで、指定したパスを想定した速度で歩かせる

Timelineを用いて、キャラクターを歩かせる(走らせる)方法についてです。以前の移動と異なり、歩行・走行に限りますが複雑な経路を走らせる場合はコチラの方が便利です。

 

 

キャラクターを移動させたい

UnityのTimelineの場合、基本的にルートモーションでの移動が前提担っているように思います。ただ、このアプローチはThe Phantom KnowladgeやADAMといった一点モノのムービーなら兎も角、ゲームによく使うようなモーション使い回し前提の簡単なカットシーンには使い勝手が悪いです。

そこでルートモーションを上書きして好きなように移動させる方法を紹介しましたが、今回は少し異なるアプローチ…パスを決めて走らせる方法を紹介します。

f:id:tsubaki_t1:20180827234808g:plain

 

パスを決めて、その上を走らせる

パスの作成を考えてみます。
今回はCinemachineのDolly Track With Cartを使用してみます。他にもTimelineから進行速度を制御できる機能があれば代用が可能です。

f:id:tsubaki_t1:20180827235042j:plain

  1. Cinemachine > Create Dolly Track With Cartを選択
    DollyTrack1とDollyCart1が作られる
  2. Dolly Track1の+ボタンを押し、パスを作っていく
  3. パスを作り終わったら、動かしたいキャラクターをDolly Cart 1の子オブジェクトとして配置する

後はDolly CartのPositionを動かせば、キャラクターの座標が動きます。

f:id:tsubaki_t1:20180827235534g:plain

 

移動をTimelineで制御する

キャラクターの移動移動制御を考えてみます。
アニメーションカーブでキャラクターを動かしていた時は、指定フレームで何処にいて欲しいか…という形で、複雑な経路を考えるのが色々と面倒でした。

パスベースで移動する場合は、移動速度を考えることも出来るようになります。Cinemachine Dolly CartでPosition UnitsがDistanceの場合、移動距離とPositionの数値が一致します。つまり、移動速度×距離何秒後に到達するのが自然かといった値を求めることが可能という事です。
秒速4mで歩いている場合、20m先に到達するのは5秒後という話です。

f:id:tsubaki_t1:20180828010607g:plain

到着想定位置はCinemachine Dolly CartのPositionを動かして探しても良いのですが、それがパスのスタートからゴールの場合は、Path Lengthから取得することも出来ます。

f:id:tsubaki_t1:20180828004216j:plain

後はTimelineで到着予定時刻のフレームに、到着予定場所のPositionをセットしてやれば、無理のない移動速度で目標地点に到達してくれます。
その他、移動中に少し停止する…といった事も座標のみを制御している今回のアプローチでは割と簡単に実現出来ます。

f:id:tsubaki_t1:20180828011050g:plain

なお、Cinemachine Dolly CartでPosition UnitsがDistanceではなくPathUnitsの場合、Waypointsの距離で速度が決まります。Normalizedの場合は全体を通して0~1の範囲になります。
大抵の場合はDistanceが良いと思いますが、パス側で速度を決めたいといった場合にはPathUnitsを使うのもアリかもしれません。

 

坂道の問題

今回のアプローチで一番問題になるのが、坂道やジャンプを行う場合です。つまりパスにY方向の傾きがつく場合、非常に不自然な絵になります。
これはパスの移動先を見てしまうというCinemachine Dolly Cartの機能によるものです。

f:id:tsubaki_t1:20180828011920j:plain

なのでCineamchine Dolly Cartの挙動を少し書き換えてみます。やることは単純で、上下を向いてしまうのを無効にするだけです。

f:id:tsubaki_t1:20180828012045j:plain

gist.github.com

パスをもっと自由に設定したい

Create Dolly Cart with trackで作るオブジェクトが利用しているコンポーネントはCinemachineSmoothPathです。
このコンポーネントは制御が楽で良いのですが、パスをもっと細かく制御しようとすると結構面倒な事になります。

もっと細かくパスの動きを指定したい場合は、CinemachinePathを使用します。
こちらのパスエディターの場合、Tangentが使用できます。

f:id:tsubaki_t1:20180828012841g:plain

ただ急激なカーブや前パスを無視した動き(例えば跳ねる等)の動きを作るのは大変なので、そういったものは素直にアニメーションで動かしたほうが良いように感じています。

 

ルートモーション付きアニメーションを使いたい

ルートモーションが含まれるアニメーション、例えばEthanの歩行アニメーション等はコレに該当します。これが厄介で、厄介なのがCartで運ぶ場合、子オブジェクトの中で移動してしまうため、座標が想定と全く違う位置に移動してしまいます。とは言えClip Root Motion Offsetで座標を少しずつ調整するのはちょっとした拷問なので使いたくありません。

そこで、キャラクターのルートモーションを止めてしまいます。

f:id:tsubaki_t1:20180828014031j:plain

やり方は単純、OverrideしてPositionとRotationに適当にキーを打っておくだけです。これでルートモーションが常に上書きされ無効になります。
少し注意すべき点は、ルートモーションをオーバーライドした場合、ルートモーションが使えなくなるという点です。
どうしてもルートモーションと組み合わせたい場合は、Ease out durationでウェイトを0にしてやると、反映されるようになります。

f:id:tsubaki_t1:20180828014604j:plain

 

感想

パスを作って歩かせる方法についてでした。
DollyCart改造の方法が無い場合、歩かせるしか使えない(しかもパス切替が出来ないので制御が非常に難しい)と微妙な立ち位置でしたが、「パスが斜めになっても傾かない」と「親オブジェクトのTimelineからの差し替え」、それと「タンジェントを使えるスプライン的なやつ」のおかげで使い方が見えた感じです。

 

関連

このサンプルにて、Timelineから親オブジェクトを差し替えるコードを紹介しています。

tsubakit1.hateblo.jp

座標をオーバーライドして動かす方法です。個人的にはコチラの方が作りたい動きが作れて好きですが、手間ががが

tsubakit1.hateblo.jp

座標が異なる場合はコレを使うと良いです。また縦軸に唐突に動くような場合も、コレで移動したほうが安定して動かしやすいです。
その際には親オブジェクトの差し替えをTimeline側でやっておくと、色々と楽で良いです。

tsubakit1.hateblo.jp