
マイケル
みなさんこんにちは!
マイケルです!

エレキベア
こんにちクマ〜〜〜

マイケル
今回、急遽スライドショーの動画を作ることになったのですが、
写真の数が何百枚もあり、一つずつ配置、調整していっては時間がいくらあっても足りない・・・!
といった状況に陥っていました。

エレキベア
スライドショー作成はあるあるクマね・・・

マイケル
制作方法として、よくあるスライドショー制作アプリでは自由度が少ないし、
PremireやFinalCutPro用のツールを作ろうにも学習している時間もない!
そういうわけで、Unityを使用して効率よく動画作成が行えないか?ということでTimelineを使用した動画制作にトライしてみました。

エレキベア
そこでUnityを使うとは思い切ったクマね・・・
まあ確かにシステムさえ作ってしまえば制御は自由に行えそうクマ

マイケル
今回使用したUnityのバージョン、GitHubリポジトリについては下記になります!
同じようにTimelineを活用して動画作成したい方は、よければご参考ください!
[Unityバージョン]
6000.0.25f1
GitHub - unity-photo-movie-maker / plasmo310

エレキベア
解説が楽しみクマ〜〜〜
スライドショーの作成イメージ

マイケル
実際には5分程度の動画を作成したのですが、今回のサンプルでは下記のようなショートムービーを用意しています。

▲サンプル用に作成したスライドショー

エレキベア
家のネコクマ・・・

マイケル
入力データとしてExcelを使用して、どの画像を使用するかなどの情報も全てここから指定できるようにしています。
こちらはUnity Excel Importer Makerというライブラリを使用して、ExcelからScriptableObjectに変換することで使用しています!

▲入力データはExcelを使用してパラメータ調整する

エレキベア
なるほどクマ
これなら調整やパターンの複製もやりやすそうクマね

マイケル
そしてこのデータを元に、最終的にはUnityのTimeline上にキーフレームを生成して動画を制作するという流れです!

▲最終的にはUnityのTimeline形式で出力する

マイケル
アニメーションはDOTweenを使用して作っています。
今回はフェード、移動しか実装していないですが、工夫によって様々なアニメーションも追加できると思います!

エレキベア
DOTweenがあれば何でも出来たようなもんクマね
ScriptableObjectを使用したTimeline制御

マイケル
まずExcelを使用する前に、ScriptableObjectからデータを読み込んで指定フレームにキーを打ってスライド表示出来るようにしてみます。

エレキベア
ScriptableObjectからスライドを制御する方法になるクマね
スライド制御用データの準備

マイケル
まずはスライド制御用のデータをScriptableObjectとして用意します。
こちらは後ほど Unity Excel Importer Marker の使用で自動で作成されますが、その前に手動で用意して試してみるのもよいでしょう。
▲スライド制御用データ
パラメータ名 | 概要 |
---|---|
Frame | キーフレームを生成するフレーム(sec) |
TexturePath | 表示するテクスチャパス |
Message | (テクスチャを使用しない場合)表示するテキスト |
PositionX、PositionY | 表示する位置(スクリーン座標) |
MoveSpeedX、MoveSpeedY | 移動速度 |
Scale | テクスチャ、テキストの大きさ |
ShowDuration | 表示時間(sec) |
FadeInDuration | フェードイン時間(sec) |
FadeOutDuration | フェードアウト時間(sec) |

エレキベア
最低限のパラメータという感じクマね
このデータを使用してスライドを制御するということクマか
データからスライドを制御する

マイケル
それでは用意したデータを使用してスライドの制御処理を実装してみます。
スライド画像用のUIのImageコンポーネントを用意して、下記のようなスクリプトをアタッチします。

▲Imageコンポーネントを用意
▲スライド画像用のUI制御クラス

マイケル
初めは非表示にしておき、Show関数を呼び出した際にデータ設定、アニメーションを行うといった内容になっています。

エレキベア
まあシンプルな実装クマね
フェード等のDOTweenでのアニメーション制御はここで行なっているクマね

マイケル
こちらはスライド画像用の処理になりますが、今回はテキスト表示用の処理も別途用意しました。

エレキベア
これでスライド画像、テキストの2種類のUIが出来たクマね
Timelineのキーフレームからデータを渡す

マイケル
そしてTimelineからUIにデータを渡すはにどうすればよいかというと、
PlayableBehaviour、PlayableAssetクラスをoverrideして専用のクラスを作成する必要があります。
PlayableBehaviourはトラック再生時などの挙動を実装するクラスで、PlayableAssetはTimeline上にトラックとして生成するクラスです。
今回実装した内容は下記のようになっています。
参考:
Playables.PlayableBehaviour - Unity Documentation
▲トラック再生時の挙動を実装
▲Timeline上にトラックとして生成するクラス

マイケル
今回はPlayableAssetに設定したデータをPlayableBehaviour側で受け取り
再生時にスライド用オブジェクトを取得して設定する処理になっています。

マイケル
ここまででPlayableTrack上で右クリックすると作成したPlayableAssetを追加できるようになっているはずです。

▲PlayableTrack上で作成したPlayableAssetを追加できるようになっている

▲パラメータも編集可能

エレキベア
やったクマ〜〜〜
これで土台が整ったクマね
Excelからのキーフレーム自動生成

マイケル
それではここから制作効率化のために
・ExcelからのScriptableObjectデータ生成
・データからのキーフレーム自動生成
の仕組みを用意していきます。

エレキベア
効率よく進めるためにはここが重要クマね
Excelからデータを生成する

マイケル
ExcelからScriptableObjectに変換する処理に関しては、今回は外部ライブラリの
Unity Excel Importer Maker を使用させていただきました。
導入、使用方法については下記記事にまとめてありますので、こちらをご参照ください!

【Unity】「Unity Excel Importer Maker」を使ってExcelからScriptableObjectに変換する
2022-08-25

エレキベア
いつもお世話になってるクマ〜〜〜

マイケル
データ作成、変換に関しては、下記のようにExcel上にデータを用意し
Unity上で 右クリック > XLS Import Settings を選択することで
ScriptableObjectが生成されるといった流れになっています。

▲Excelデータを用意する

▲右クリックから生成

▲ScriptableObjectが生成される

エレキベア
これでパラメータ調整がだいぶ楽になるクマね
データからキーフレームを自動生成する

マイケル
最後に今回の肝となる仕組みとして、データからキーフレームを自動生成する処理を実装します。
下記のようにTimelineアセットのInspector内に生成用の項目をエディタ拡張で追加しました。

▲TimelineアセットのInspector内に生成用の項目を追加

エレキベア
ここに設定したデータからスライド用のキーフレームを生成するクマね

マイケル
実装内容は下記のようになっています。
CreateTrack関数でPlayableTrack、CreateInstance関数でPlayableAssetを生成し、
CreateClip関数で生成したクリップにPlayableAssetを設定するといった内容になっています。
▲データからキーフレームを生成する

エレキベア
いろいろ生成しているクマが、まあやっていることは分かるクマ

マイケル
今回の実装の注意点として、
・ObjectFieldとして表示しているため、設定したScriptableObjectが毎回外れてしまう
・表示中のTimelineの内容が動的に更新されない
といった問題がありました。

マイケル
Timelineの更新については、DummyのTimelineアセットを用意して選択し直すことで無理やり更新させることができましたがもっと上手い方法もあるかもしれません。
今回は時間の都合上、深く調査していないですが気になる方はこの辺りの改善にもトライしてみてください!

エレキベア
まあ使う上で最低限の部分だけ実装した感じクマね
おわりに

マイケル
というわけで今回はTimelineを使用したスライドショー作成についてでした!
どうだったかな?

エレキベア
ゲーム開発に使うイメージだったクマが、案外動画編集にも使えるクマね

マイケル
凝った動画演出はやはり専用のソフトの方がいいかもしれないけど、
無料で使えるかつ最低限の機能が揃っている & スクリプトが書ければ自由に制御できる
というのは大きなメリットだと思いました!
そして今回は5分程度の動画を作ったのですが、普通に作るよりも圧倒的に早く思い描いたものを作れたので成功だったと思います!

マイケル
またExcelベースで作る手法に関しては、Premiere等の動画編集ソフトでも同様にツールが作れると思うのでぜひトライしてみたいですね!

マイケル
それでは今回はこの辺で・・・

エレキベア
アデュークマ〜〜〜〜
【Unity】Timeline × Excelでスライドショーを効率よく制作する 〜完〜