タイムライン編集の UI 決め

動画編集 UI の実装を始める前に、このツールで作成する PV 例を１つ定義してしまおうと思います。そして利用する機能のみに注力して実装します。

これは、機能をしぼることでゴールまでの作業を少ないと私に錯覚させる作戦です。ゴールがはるか遠方にあって見通しがきかないよりは、ちょっと道の角を曲がった先にゴールがあると思った方が気持ちが楽なのです。

で、作る PV の案としては

・室内アセットのベッドにモデルが腰掛けている。
・カメラマンとモデルとがインタビューしているかのような流れにする。
　・モデルは上半身を揺らしたり、顔の向きや手を動かしたりする。
　・会話は字幕表示で表現する。

とします。
せっかく作ったスカートをつまむ機能が活かせてないですが、気にしないことにします。ｗ

そして、現状の UI はこんな感じです。

下のパネル： タイムラインで基本ポーズ、クリップ、表情などの項目が並ぶ
左上パネル： 選択した項目の設定を変更する
右上パネル： 選択した項目の部品を表示して、ここからドラッグできるようにする
上のパネル： プレビュー

では、本格的な UI 実装は次回することにして、まずは座るモーションの確認したいと思います。座るモーションは、とりあえず Unity ちゃんアセットにあった座ってるポーズを使うことにしました。そして、そのポーズを適用したものがこれです。

太ももスカートから出てるやん！

落ち着いて少し考えると、このモデルは腰の位置に大きめの Dynamic Bone Collider を配置してスカートを広げているので、このままだと立ったり歩く以外の動作はスカートに向いてないのが今頃になって理解できました。まじか…

今回は基本ポーズを切り替える UI の実装を行う予定でしたが、想定外の壁にぶちあたったのでここまでにします。改めて考え直すと「基本ポーズ」とか言い出したのが良くなかった気もします。座るなんていう高等技術はリリースできるようになってから考えても良さそうです。よし、この件は忘れることにします。

次回はモーションのクリップ部品をドラッグでタイムラインに配置するあたりの実装をします。がんばります。

次回の更新： 月曜日の 20時

モーションをクリップする UI 実装の続き

それでは実装していきます。
今更なんですが、「VR の処理は Unity で作って、動画編集の機能は Qt で実装すれば楽だったのでは」と思っています。 ただ Unity でないと VR 空間のカメラ画像の取得がめんどいのは間違いないので、引き続き Unity で実装していきます。

で、実装したものがこんな感じです。

この UI ではモーションから最終出力の動画に使うクリップ（動画の一部）を切り出すことを目的にしています。そして、以下の動画でやっている操作は、

・左クリック位置にカーソルラインを移動させる。（ポーズも変更させる）
・右クリックでコンテクストメニューを表示して、クリップの始めと終わりの位置を設定する。
・左側のロックボタンを押してクリップを確定する。（右側のリストに表示される）

です。

右側のリストに表示されたクリップを、次に実装する動画編集のときに利用できるようにします。動画編集まわりの UI 実装については、また長い戦いになりそうです。（今までに投稿した UI 以外の記事は１つあたり１日で終わるのですが、UI の記事は３日くらいかかっています）

全体の進捗として終わりが見え始めてきたので、がんばっていきたいと思います。

次回の更新：月曜日の 20時

VR 空間で記録したモーションをクリップするあたり

では、動画編集のときのアニメーション部品として使う「クリップ」を、モーションから切り出す UI まわりを実装していきます。
その前にクリップが何かの解説を兼ねてこの PV 作成ツールの使い方を書き出すと

・VR 空間で動きを記録する。
・記録した動きから使う範囲を切り出す。（クリップ）
・クリップを配置して PV でのモデルの動作を作る。（動画編集）
・字幕、音声、表情やエフェクトをタイムラインに追加する（動画編集）

という感じです。
UI 実装はめんどいですが、いつものことなので大丈夫です。

で、UI 実装は面倒なだけで解説する内容もないので、現在の進捗までを紹介します。

・左上パネルで記録したモーションを表示する → OK
　・選んだモーションをプレビュー再生できる → OK
・中央パネルでモーションからクリップする範囲を指定する → まだ
・右パネルに作成済みのクリップ名を表示する → まだ

マウスカーソルがキャプチャできてなくてわかりにくいですが、左上のモーションを上から順にクリックして、記録したモーションの再生を切り替える様子を記録したのが以下の動画です。

なんというか、思った通りのペースで実装できてなくて少し悔しいです。
多分、UI 実装は細かい挙動を決めながら実装しているのと、整合性のために考えて覚えておくことが多いのが時間がかかる理由だと思います。

とはいえ、実装した範囲はちゃんと動いているのでオッケーです。
次回の記事では、クリップまわりの実装を終わらせて動画編集の実装に着手していたいです。がんばります。

次回の更新: 金曜日の 20時

動画編集 の UI を決めるあたり

正直、UI 決めはいつも心が重いですが、仕方がないのでがんばります。
今回の UI で実現すべきことは

・VR 空間で演じたモーションを切り抜いて「クリップ」を作るための UI
・「クリップ」を「タイムライン」に挿入するための動画編集のUI

です。（カメラマンの UI は、また今度考えます）

そして、考えたものがこれらです。

VR 空間内で記録したモーションが左上に「年月日時刻の名前」でリスト表示され、それらから１つのモーションを選択した上で、左下のパネル状でモーションから複数のクリップの範囲を指定します。で、作ったクリップが右側に表示されます。

これは一般的な動画編集のあれです。

上記説明はわかりにくいと思いますが大丈夫です。私も理解しきっていません。作りながら変更していきます。UI の実装はいつもながらめんどいです。 UI 全然わからない。

次回以降にこれらの UI を必要になった箇所から順に実装していきます。がんばります。

次回の更新: 水曜日の 20時

モーションの記録と再生のあたり

今回は記録と再生のデモを作ります。記録と再生の切り替えは HTC Vive コントローラのパッドの操作で行うようにします。動作が確認できればいいので、記録を終える操作をしたらすぐに記録済みモーションの再生を始めさせます。

で、記録の実装についてですが今の実装ではモデルの手を制御するために手に持ったコントローラの位置と向きとを渡しているだけなので、この渡す情報を記録すればオッケーです。難しくないです。

具体的には OnAnimatorIK() で頭と両手の位置姿勢を更新しているので、そのときに記録も行うようにします。そして再生は「このデータを再生してね」というメソッドを呼び出した後は、実際のコントローラの位置ではなく再生データのコントローラ位置にモデルを追従させます。この実装も難しくないです。

そして、記録して再生した様子はこんな感じになります。

とりあえず動作しているのがわかります。いいですね！

さて、ここまで実装してきたことで残っている技術要素はこんな感じです。

◆必須な機能
・動画を編集する機能（モーションの切り貼り、表情、ハンドサイン、字幕、音声、エフェクト）
・動画を出力する機能

◆あると嬉しい機能
・モデルとカメラマンの移動軌跡を定義する機能
・カメラマンになりきって、カメラ位置を操作する機能
・光源が暗いのをどうにかする
・時刻（夕暮れとか夜とか）を変更する機能

こうやって書き出して眺めてみると、動画編集の UI 決めと実装が大変めんどいです。
まぁ、めんどいですが仕方ありません。次回は実装ではなく動画編集の UI をどうするかを考えて書き出してみようと思います。

次回の更新： 月曜日の 20時