【Unity】VRMとVRMAを読み込んで動画エクスポートするソフトの制作記録
目次
はじめに
おはようございます
この記事はUnityでのソフトウェア開発の記録を残すために作成されました。
制作記録を残すことにより、次回制作時のスケジュールを立てやすくする、作業内容を記載し次回の政策をスムーズにする、作業時の課題点を残し次回の改善に繋げる、等の目的があります。
作業記録は作業カテゴリごとに大見出し、日付ごとに小見出しでつけていきます。
また、作業の様子はYoutubeでも配信する予定なので以下に再生リストへのリンクを載せます
概要
今回作成するソフトウェアは以下のような動画を作成するための「動画作成ソフト」となります。
VRMという3Dモデルデータと、VRMAというアニメーションデータ、そしてフレーム用画像と背景用画像を組み合わせて動画ファイルを出力する。といった動作をするソフトとなります。
VRMファイルを使ってショート動画を作るソフトとしては「VARK SHOTS Premium」や「VEAT」といったものがありますが、これらはモーションについてはあらかじめ用意されているものしか使えないので、自前で用意したモーションを自由に使いたいと思い作成することにしました。
また、このソフトを使用するターゲットの想定として「おはようVTuber」というタグを利用しているVTuberを想定しています。そのため毎日の使用が負担にならないように操作は極力簡単にすることを目標としています。
開発環境
今回の開発環境は以下の通りです。
- ・エンジン：Unity(Ver 6000.0.29f1)
- ・ソースコードエディタ：Visual Studio Code(Ver 1.98.1)
- ・ソース管理：GitHub ＆ TortoiseGit
- ・VRMのバージョン：0.128.1
GitHubのリポジトリはこちらとなります。
OhayouVTuberMaker
また、開発にはChatGPTやGitHubCopilotを使用する予定です。
使用したUnityのアセットは以下の通りです。
- ・ここにアセットを記載していく。
使用したVSCodeの拡張機能は以下の通りです。
- ・Japanese Language Pack
- ・Edit CSV
- ・PlantUML
- ・GitHub Copilot
- ・GitHub Copilot Chat
準備
ソフトウェアを作りにあたり、どのような機能が必要なのかを考えます。まずアプリの画面イメージをざっくり作ったので以下に載せます。
※画像はあくまでもイメージで完成品とは異なる可能性があります
画面左上はメイン画面で、VRMモデルやフレーム、背景画像が表示されており、ここで表示されている映像が最終的に動画ファイルとして出力されます。
画面下はタイムラインで一般的な動画制作ソフトのタイムラインと同様の機能を持ちます。
画面右上はタイムラインで選択したアイテムの詳細画面で、たとえばVRMモデルなら位置や回転の調整が出来ます。
また必要になりそうな機能のリストをCSVで作成しました。CSVのリポジトリは以下となります。
OhayouVTuberMaker/Documents/機能要件.csv
こちらのCSVファイルに必要になると思われる機能や優先度、作業ステータスを書き出し作業時にどの機能から作成していくかの管理に使います。
開発
2025/03/20
まず準備としてテストプロジェクトでVRMのサンプルプロジェクトをインポートしてどのような作りになっているのか確認してみる。
ということでサンプルのVRMビューアーでVRMファイルを開いてみたらRollConstraintを設定した箇所が壊れている。
VRMのバージョンを最新の0.128.3から0.128.1に下げたらちゃんと表示されるようになった。ので開発ではVRMバージョン0.128.1を使っていくことにする。
使用するVRMバージョンが確定したのでサンプルコードのソース見ていく。主にカメラ処理とVRMのローディング処理を見ていき、わからない部分はCopilotに解説してもらう。というかほどんどわからないのでほぼ全部解説を丸投げした。
ある程度サンプルプロジェクトを眺めたら新規プロジェクトを作成し、VRMのUnityPackageをプロジェクトへインポートする。その後シーンにキューブを追加して、カメラ制御用のスクリプトファイルを作成する。
カメラ制御スクリプトを開き、Copilotにカメラ制御用のコードを書くように依頼すると一発で動くコードが出てきた。すごい。
次にUI ToolKitでUIの作成に取り掛かる。左上がメイン画面で水色の場所にタイムライン、黄色の場所にプロパティを表示させる予定だ。とはいえこの先何をすればよいのかわからないのでいったんUI ToolKitの使い方をちゃんと調べておく必要がある。
本日の成果。カメラ操作だけ。
次回はUIの作成をしていく予定。
2025/3/23
本日も引き続きUIを作成していく。良さそうなQiitaの記事を見つけたのでこれを参考にしていく。
Unityの最新UIシステム「UI Toolkit」でランタイムUIを作成する方法まとめ
上記の記事で書いてある「動的にUIウィンドウを表示させてイベントを設定する」のをやってみます。
まずヒエラルキーに「UI Document」を作成、アセットにも「UI Document」と「Panel Setting Asset」を作成します。
次にヒエラルキーに作成したUI Documentに今作成したアセットのUI DocumentとPanel Setting Assetをセットします。
アセットのUI DocumentをダブルクリックしてUI Builderを開いて上の画像のようなウィンドウの中にボタンとラベルを配置したUIを作成します。
UIを作成したらヒエラルキーに配置したUI DocumentをPrefab化してヒエラルキーから削除します。
次にPrefab化したUIを呼び出すために、Emptyオブジェクトを作り新規スクリプトをアタッチします。
スクリプトの中身はこのような感じになっている。
8行目のsampleButtonUIは先ほど作成したPrefabをセットするための変数で、14行目でインスタンス化しています。
23行目のQメソッドを使って名前指定でボタンオブジェクトを取得し、26行目でクリック時の処理を設定します。
実行するとこのようなウィンドウが表示され、ボタンを押すと下のテキストが「Clicked!」に変化します。
ここまでやってみた感想としては、スクリプトはシンプルだと思いましたがヒエラルキーにUI Documentを作ってPanel Setting Assetをセットするところ辺りはUnityそのものに慣れていないのもあってすぐにやり方を忘れそうな気がしました。
次回はUI Documentで作成したVisual Elementの中に別のUI Documentの内容を読み込めるか試してみようと思います。
おわりに