ツールを最初から動作確認してみる

今回は雑多な機能を実装したり、「体験版リリース」に向けてこのツールの初回起動からの動作を確認したりしています。

今回実装したこと

バーを描画する処理を共通のコードにして、メッセージ表示に適用した

出力の動画ファイルがデスクトップに出力されるようにした

使っている Evereal.VideoCapture クラスの saveFolder にデスクトップのパスを設定するだけでした。
VideoCapture.saveFolder = System.Environment.GetFolderPath(System.Environment.SpecialFolder.DesktopDirectory);

VRM モデルを取り込むための UniVRM をインポートした

今回は Unity Editor 上で UniVRM を用いて VRM ファイルを prefab に変更して取り込みました。いずれ VRM ファイルを動的に読み込んで変更できるようにします。

保存データをクリアして最初から動作させてみた

とりあえずアプリ起動直後の画面がこれです。

今、このタイトル画面で１番目立っているのが「終わる」なのはなんとかしたいです。

そして、「新しく始める」ボタンを押したのですが、画面が切り替わるまでに 10 秒くらいかかってました。ロードの進捗表示を行わせる必要がありそうです。

そして、ロード直後はこんな画面でした。

いっそのこと、新規開始であってもデモプロジェクトを読み込ませるべきかもしれません。いきなりモデルとボタンがあるだけの画面を見せられても意味不明ですし、何をしていいのかわからないと思います。

上記を踏まえると、新規プロジェクトのときは
・ボタン一つで動画出力できるデモプロジェクトをロードしておく。
・編集の UI を表示した状態にする。
・チュートリアルとしてヘルプを表示する。
・ヘルプを再表示するためのボタンを追加する。
・各ボタンに Tooltip で説明を行う。
などが行われた状態で開始させたいです。

編集のための UI 実装もまだですが、それ以外にもいっぱい実装すべきことがありますね。

次回の予定

今日の記事を書いているのが当日の 19:56 なのは良くないなと思っています。もう少しコツコツ進めたいです。そして次回ですが、体験版リリースに向けて１つずつ編集 UI を実装していったり、VRM モデルを変更する機能のデモなんかを実装したいです。がんばります。

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

モデルの表情を変更する

今回はモデルの表情変更を実装していきます。

表情変更のデモ作成

とりあえず、笑顔にするアニメーションを作成してスクリプトで制御するデモシーンを作っていきます。モデル付属の目パチ用のアニメーションをコピーして笑顔用のアニメーションに変更しました。

そしてスクリプトで笑顔とデフォルトとを切り替えさせてみたのがこれです。

動作してますね。良いです。

表情変更の設定をプロジェクトに保存するあたり

動画の編集 UI から表情を変更できるようにする必要があるのですが、とりあえずはプロジェクトのセーブファイルに笑顔にするデータを直接編集した上で、データを元に再生するあたりを実装します。

そして、動作したものがこれです。首を傾げながら笑顔になると少し怖いのがわかりました。動作テスト用のモーションは記録し直したいと思います。

さて、今回はこれくらいにします。
週３回の更新はめんどいと思うこともあるのですが定期的に「あぁ、開発しなきゃな」という気分になれるのは良いです。こんな感じで今後も実装していきます。

あと、作っていて「時間の幅の箇所を左クリックしたときのみカーソルラインをそこに移動させる」に機能変更しようかと思いました。こうすると左クリックを他の操作に割り当てられるので。

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

字幕を表示できるようにする

今回は動画に字幕（メッセージ）を表示できるようにしていきます。

録画するカメラへの文字列の描画

まず、UI の操作の前にテスト文字列を配置して録画できることを確認します。

動画の出力に使っている Video Capture Pro には「UI を含めて保存できます」あったのですが、方法がわからなかったのでカメラの前に 3D な文字列を配置することにしました。

そして、Unity の TextMesh と TextMesh Pro な文字列を配置した様子がこれ↓です。

今回のツールでは描画する文字には縁取りを行いたいので、TextMesh Pro を使います。文字列の最前面への描画は、カメラの最前面に縮小した文字列を配置することで実現しました。

良いですね。
録画してみて文字列が描画されるのも確認しました。良いです。

文字列の UI での追加

次に文字列を UI から追加するあたりを実装します。

文字の追加は右上のパネルから行い、追加した文字列の編集については左上から行うようにします。描画する文字列で編集する項目としては

・テキスト
・表示秒数
・フォントサイズ
・左寄せ、中央寄せなんかの設定
・縁取りの有無や太さ
・色

にします。メッセージ途中の何文字かのフォントサイズを変更する方法については後でまたどうにかします。
これら項目のうち、メッセージのテキストと表示秒数以外はこの文字列を配置するタイムラインで共通にします。

それでは実装していきます。まずは右上のパネルから文字列を追加する UI の実装です。

↑そして、文字列を入力した後で動画を出力した結果がこれです。

文字列が表示されてて良い感じです。大変良いです。

さて、動作したので今回はここまでにします。
次回は文字列表示の残りをするか、表情やハンドサインを変更するあたりの実装に着手しようと思います。がんばります。

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

動画編集まわりでクリップがある場所にバーを描画する

必要最低限の機能で実装し終えたので、重要そうな要素から順番に修正を行っていきます。

クリップがある位置にバーを描画する

とりあえずでいいので実装します。
そして、実装できたものがこれです。

バーが表示できたので、次はこれを削除できるようにします。
削除はこのバーを右クリックしたら左上のパネルに「削除」ボタンが表示されるようにして、そのボタン押下で削除するようにします。

正直、右クリックをクリップの選択に割り振って良いかは悩ましいです。なぜなら右上のパネルにクリップを表示するための操作も右クリックだからです。まぁ、また後で考えましょう。

そして実装した削除ボタンで２番目のクリップを削除した状態がこれです。

削除後に動画を出力してみたところ、削除したクリップは適切に削除されていました！
いいぞ！

タイトルのシーンで VR 空間に「PC から操作してね」というメッセージを表示する

このツールは PC での操作がメインとなります。そしてアプリ起動後のタイトルシーンのときに VR ヘッドセットを装着してると何も表示されないので、VR 空間にメッセージ表示することにしました。

VR 空間へのメッセージ表示は TextMesh Pro を Steam VR の Camera に追加するだけです。ただ、メッセージを日本語にローカライズしたときに TextMesh Pro で使うフォントに日本語が含まれていなかったので下記記事を参考にして表示されるようにしました。
https://qiita.com/thorikawa/items/03b65b75fa9461b53efd

次回の予定

さて、今回の記事はこのくらいにします。
次は「出力する動画の長さを指定できるようにする」「字幕を表示できるようにする」「表情を変更できるようにする」「プレビューと実際の動画との見た目が異なるのを修正する」のあたりのタスクに取り組みたいと思います。がんばります。

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

動画として保存するあたり

今回は、いよいよモデルを動かしてその様子を動画として保存するあたりです。

RockVR Free を用いた Video Capture の動作確認

まず RockVR Free のデモで音付きで録画できるのを確認しました。使い方としては Unity 内の指定したカメラにプレハブを設定すればオッケーでした。ただ、Rock VR の Free 版だと生成した動画の左下にアイコンが強○的に描画されてしまったのですが、ちょうど良いことに Unity Asset Store がセール中で Pro 版が 50% 引きで $25 なので買っちゃいました。
ほとんどの場合、アセット購入に悩みかけたときは「自分で作るより早いよね？」って言い聞かせれば躊躇なく買えます。

動画ファイルの保存

そしてカメラマンの位置に記録するためのカメラを配置して先ほど購入した Video Capture Pro を適用し、モーションを確認するためのミラーも隠したときのスクリーンショットがこんな感じです。

そして、録画開始のためのボタンを配置して動作するようにしました。
ここまででとりあえずの録画が動作するようになりました。良いです。

録画をキャンセルしたときに生成途中のファイルが残る上に Lock されていて削除できない問題は、また後で考えることにします。そう、後できることは未来の自分に任せたいです。がんばってほしいです。

指定モーションの再生

そして、なんやかんやでクリップを組み合わせたモーションを再生しつつ録画できるようにしました。

↑録画中のアプリ

↑録画された動画

良いです！

ここまでで、本当に最低限の機能で実装し終えることができました。
繰り返します、良いです。
アプリでのプレビュー表示と録画した画像とではモデルとの距離が違ったり暗いのは未来の私が解決してくれるので後回しにして大丈夫です。

さて、リリースするレベルまでにはまだまだ実装に時間がかかるのですが、今回の実装を通して Unity とか VR に少し詳しくなれたので現時点で私は割と満足です。

そして、このツールを作っていて「VR のゲーム作りたいな」と思ってしまったので、今後はそっちのプロジェクトも進めようと思います。具体的には、現状の週３回の更新のうち、２回をこのプロジェクトに割り当てて、残り１回は別プロジェクトのデモの作成を行っていこうと思います。

今後の長期的な開発予定としては、

・週２回の開発（記事更新）は継続して行う。
・他人が使えるレベルになったと思ったら機能不足でよいので体験版をリリースする。
・1か月に１回くらいのペースで体験版のバージョンを上げる。

ということを考えています。

VR で作るゲームとしては「VR スナイプゲーム」「VR ボクシングゲーム」「VR 箱庭ゲーム」なんかを考えています、後は VR とは関係ないですけど日本のお城に籠城するゲーム "Bonsai Castles 2" の企画もそのうち書きたいです。

さて、次回以降は「開発者以外が使えるようにする」を念頭に置いて実装していきます。とりあえずは動画編集のパネルに挿入したクリップ位置にバーを描画するあたりから行います。がんばります。

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