テラシュールブログ

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

【Unity】Timelineでフェードイン・フェードアウトするTimeline Clipを用意する

f:id:tsubaki_t1:20170406205302g:plain

とある事情で作ったTimeline用のフェードイン・フェードアウト Playableです。

これぐらい最初から用意してくれてもバチは当たらないと思いますが、まぁ。

 

※Unity 2017b5で実装が大幅に変わった為、動作しません。
 新しい実装に修正中

 

使い方

まず、フェードを動作させるためにカメラより最前面に表示される、画面いっぱいに表示されるUIを用意します。

具体的には、ScreenSpace-OverlayのCanvasにImageを設定すれば、そのImageはCameraレンダリング完了後に描画されます。

SortOrderは999とかしとけば、ScreenSpace-OverlayのCanvas内でも多分最前面です。

f:id:tsubaki_t1:20170406205455j:plain

次に下のコードをプロジェクトに入れます。

 

gist.github.com

後はTimelineの設定です。

TimelineにFade Trackを追加

f:id:tsubaki_t1:20170406210302j:plain

追加したトラックのImageを設定する項目に、先ほど作成した最前面に描画されるImageを設定

f:id:tsubaki_t1:20170406210327j:plain

Add Fadeout Clipでクリップを2つ追加。

TypeにFadeIn、FadeOutを設定

f:id:tsubaki_t1:20170406210359j:plain

これでタイムラインに沿ってフェードしてくれます。

トラックの長さを変えるとフェードにかかる時間が伸びます。

f:id:tsubaki_t1:20170406210630g:plain

コードの説明

少しだけコードの説明です。
とは言え、正直Timelineの次のバージョンで変わる可能性があるというか是非とも変わって欲しいと言いますか。

 

まずはトラックの定義です。

TrackAssetクラスを継承している物を指します。ここで中身はあまり意味が無く、重要なのはAttributeの二つです。

  • TrackClipTypeでTrackに載せるPlayableAssetの型を指定
  • Track Binding Typeでバインドする型を指定

ちなみに、態々こんなものを用意させている割にTrackにTrackClipTypeは一つしか登録出来ません。なんでさ

f:id:tsubaki_t1:20170406210825j:plain

バインドする型とは、要するにコレです。

f:id:tsubaki_t1:20170406211028j:plain

 

次にPlayable Asset、シーケンスです。シーケンスは要するにコレです。

f:id:tsubaki_t1:20170406213811j:plain

シーケンス毎のパラメータを保持したい場合はココに書きます。今回はシーンを参照する何かがあるわけでは無いので、Resolverは必要ないです。

f:id:tsubaki_t1:20170406211137j:plain

 

最後にシーケンス中の動きです。

ここで注目すべきはplayerDataをImageにキャストしてる事です。ココでTrackで指定したImageが取れます。というか、ここでしか取れません。なんでさ

タチが悪い事にProcessFrameが呼ばれるのはOnGraphStartやOnPlayStateChangedより後なので、シーケンス起動時やステートが選択された瞬間に初期化が出来ません。設計ミスじゃないのか。

流石に違う手法がありそうな気がしますが、今のところ分かっていません。

 

後はHandle.time / handle.durationで、進行中のPlayableの時間を0~1で取れます。

f:id:tsubaki_t1:20170406211305j:plain

上手く応用すればTween等にも使えるんじゃないかなと思わなくもないです。

感想

もうちょっと、TrackとPlayableAssetのやり取りをシンプルに出来たら良いんですけどね。まぁベータという事で。

あと、もう少し単純な物を事前に用意してくれてもバチは当たらんと思うのですよ。具体的にはTweenとかTweenとかTweenとか。あとTween。

 

あと名前がゴチャゴチャしてますが、お察しください。

関連

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp