📚

【VCI入門】初めてのVCI作成チュートリアル

2021/07/12に公開

Unity

VCI

メタバース

tech

はじめに

VCIはVR SNS/メタバースの一つであるVirtual Castにおける 「持ち込めるアイテム」 の仕様です。The Seed Onlineに登録することで誰でも簡単にアイテムをVR内に持ち込むことが出来ます。今注目のメタバースでも言われている 相互運用性(Interoperability) を実現できる非常に面白い機能です。色々触っているうちに自分も作ってみたくなり挑戦してみました。

公式Wikiなどにチュートリアルは既にあるのですが、私は 「Unity？あー、あれね。うん。知ってる知ってる。おいしいよね」 って感じの状態だったので、VCI以前にUnityの基本操作すらおぼつかず3Dの知識は皆無でした...

正直チュートリアルを見ながらでも基礎知識が無さ過ぎて結構手間取りました。なので、自分に定着させるには自分でドキュメント書いた方が良いなと思いUnity初心者向けのVCI作成チュートリアル、と言う観点で記事を書いてみました。

「当時私が読みたかった記事」 というコンセプトなのでUnity/VCI初心者だけどWebアプリケーションなど他の開発なら経験ある人成分が多めです。この記事では以下のような超シンプルなHello World VCIを作成を通して 「UnityインストールからTSOへの連携、ついでにGit管理」 までを解説します。

作成したコードは以下のGithubに置いてあります。

私自身がUnityもVCIも初心者なので、普通に間違った部分、適切ではない部分、あるいはより良く書ける部分などがあると思うので、気になるところがあればコメント等を頂けると助かります。

UnityHubとUnityのインストール

まずはUnityのインストールですが一番重要なことは 「Unity公式で推奨になっている最新版を入れてはいけない」 という事です。2021/07/06現在では2019.04.xxをVCIの作成には使います。
Unity界隈はUnityの進化が激しく非互換が発生することもあるせいかメジャーバージョンを固定して利用する傾向があるようです。結構、既存プロジェクトの移行とかも大変っぽいです。

ここからダウンロード出来ますがUnity単体のインストールではなくUnityHubのインストールが推奨、との事です。UnityHubは複数のバージョンのUnityを管理するためのツールです。コンパイラ/実行環境だとRubyのrenvとかJavaのsdkmanとかありますが、IDE自体の管理は珍しいですね。しかも公式から提供。VRChatとかはまた違うUnityのメジャーバージョンを要求してきたり、マイナーバージョンはちょこちょこ上がっているのでいずれにしてもUnityHub経由が無難な気はします。

UnityHubをインストールしたら、下記より最新の2019.04.xxを選択してUnityのインストールを行います。

プロジェクトの作成とVCIのUnityPackageの導入

UnityPackageのダウンロード

プロジェクトを作成してVCIのUnityPackageをインストールします。UnityではDLLベースのプラグインという機能拡張の仕組みもありますがUnityPackageを使って機能を拡張する事が多いようです（少なくともVRChatやVキャス関連ではそうっぽい）。これはソースコードやAssetなどをtarで固めたもので、プロジェクトにインポートする事で機能を拡張に使う事もできます。Javaで言えばjarファイルをMavenプロジェクトの依存に入れるような感じですね。
面白いのはエディタの拡張もUnityPackageを使うので、エディタ側の機能拡張もプロジェクト単位 って事ですね。この辺は今までに触ったことのある開発環境では珍しいので少し戸惑いました。

上記のリンクより以下のVCI開発に必要なパッケージをダウンロードしておきます。

TMP_NotoSansCJK.unitypackage
UniVCI-x.xx.unitypackage
UniVRM-xxx.unitypackage

プロジェクトの作成

続いてプロジェクトの作成を行います。テンプレートは3Dを選択します。

以下のようにプロジェクトが出来ればOKです。

UniVCIのインポート

メニューから 「Assest -> Import Package -> Custom Package」 で先ほどダウンロードしておいたUniVCI等をインポートします。こちらのリリースノートによるとUniVRM-xxx.unitypackageを最初にインストール する必要があるようなので、UniVRM -> UniBVCI -> TMP_NotoSansCJK.unitypackage の順で取り込みました。

以下のようなインポートダイアログが出てくるのでそのままインポートします。

Uni-VCIのインポートでは下記のようなダイアログも出ますがそのままAcceptでOK

３つともインポートしたところで以下のようにVCIのメニューが追加されていればインポート成功です。

フォルダの構成

どこに何を保存するかというフォルダ構成というのはどんな開発環境でも重要ですよね。残念ながらUnityには標準と呼べるものは無いようですが、いくつかの記事を見た限りだと{Project}/Assets配下に独自のAssetsフォルダを切ってそこにScenesやMaterialsと言った名前で各種リソース名のフォルダを作り入れていくのが良さそうです。こうする事でAssetsStoreなどからインポートした名前と衝突しなくて良いとか。

独自のAssetsフォルダは組織名とかプロダクト名とかいろんな方針があるようですが、私は大規模なものは作らないので汎用的に使えるMyAssetsとかの名前にしておきます。作成したフォルダは以下のようになります。必要に応じてリソースフォルダは随時増やしていきます。

Gitでのバージョン管理設定をする

さて、それではUnityを使った開発をしましょう！と言う前にGitの設定をしてGithubあたりにコードを連携しておきます。
もちろんしなくても動きますが、やはり継続して開発するならバージョン管理してないと何かと面倒ですからね。個人であっても。コードの公開も出来ないですし。

何をバージョン管理するかってのが一つのポイントなのですが、Unityはバージョン管理の対象をプロジェクトでやれば良さそうです。普通にコマンドでやっても良いのですがGithub for Unityと言うツールが評判良さそうだったので入れてみました。git-lfの設定や.gitignoreの設定も諸々してくれるようなのでとても便利。
https://unity.github.com/

まずは設定タブからCommitするユーザ情報を入れます。

次にchangesのタブを開き、すぐその下のAllを押します。その後、右下のコミットを押し、画面上部のPushを実施します。

Hello World VCIを作る

Hello World VCIの仕様

準備が終わったのでいよいよVCIの作成です。とりあえずHello World的にシンプルにオブジェクトを表示するだけのものを作ってみます。

Sceneの保存とフォルダ構成

まずは 「File -> Save as..」 でScene をunityファイルとして適当な名前で保存します。保存先はどこでも良いですがバージョン管理の都合もありますし先ほど作成したプロジェクト配下の 「Assets/MyAssets/Scenes」 に保存します。ファイル名は 「HelloWorld.unity」 にしました。
Sceneはオブジェクトの位置や各種コンポーネントの設定が保存されたUnity上でのおそらくもっとも基本的な単位です。1つのプロジェクトに複数のScenesを作れます。VCI作成に関するコンポーネントの情報もScenes毎に独立してるので、UniVCIなど拡張機能など環境的要素もプロジェクト単位と言う事を考えると、1VCI/1プロジェクトでは無く1VCI/1Sceneで作ることも出来そうです。ただ、バージョン管理の単位どうする？って問題が出てくるのできますし、この辺はコミュニティの文化に依存しますね。UnityやVCI/VRMの有識者のコメントが欲しいところ。

Root Objectの作成

UnityはGame Objectの単位で各種情報を管理するようです。キャラクター、アイテム、背景、照明、カメラ、そのすべてがオブジェクト。これに振舞いや属性を定義したコンポーネントを紐づける事で機能するようです。またツリー構造にして一つのオブジェクトに複数のオブジェクトが格納できる模様。まずは最上位のルートになるroot Objectを作成します。

Hierarchyの中で右クリックを押してメニューを表示。
CreateEmpty で空のGameObjectを作成。
適当な名前に変更。なんでも良いのですが出力するVCIのデフォルトファイル名になるのでわかりやすくhelloworldにしました。
transformのPosition,Rotationは(0,0,0) scaleは(1,1,1)に設定

続いてrootオブジェクトのコンポーネントにVCIオブジェクトを追加します。VCI Object ComponentはVCIの作者、ライセンス、VCIスクリプト等の情報などVCIに関するメタデータを格納するための必須のコンポーネントとなっています。

まず、Hierarchyの root を選択した状態でInspectorでAdd Compornentをして、VCIObjectを選択します。

つづいて、必要な情報を入れていきます。今回はTitle, Version, Author, Descriptionのみを変更しました。それ以外はデフォルトです。必要に応じてサムネイルを追加したり、モデルやスクリプトのライセンスも変更する事が出来ます。

文字の背景になる板状の3Dオブジェクトを作成

それではUnityらしく3Dオブジェクトを作成します。まずは背景になる板から。VCIでは3DオブジェクトはSubItemとして先ほど作ったRoot Objectの配下に作ります。SubItemはVCIが持てるかどうか、縮尺可能かどうかなどの、基礎的なふるまいを定義するコンポーネントです。これをオブジェクトにアタッチする事でVCI上で操作をする事が出来ます。

今回、板状のものに文字を出したいのでまず「3Dオブジェクト -> Quad」を作成します。

いくつかパラメータを設定します。

名前: TextBord
PositionのY値: 0.5
Scaleの全ての値: 0.25

続いてVCISubItemのコンポーネントを紐づけます。

以下のパラメータを設定します

VCI SubItemのGrabbableを有効 => VCIが掴めるようになる
VCI SubItemのScalableを有効 => 拡大縮小が出来るようになる
RigidbodyのUse Gravityを無効 => VCIが重力落下しない
RigidbodyのUse Kinematicを無効 => 掴んだりスクリプト以外での影響を受けない。有効にしないとGravity無効時に空中に無重力状態で飛んでいく

最後に当たり判定を決めるColliderを追加します。Colliderは当たり判定を決めるための仕組みで、Unityでは当たり判定は実際の3D Objectの大きさではなく、この緑枠のようにColliderで指定された範囲になるようです。

ref: https://miyagame.net/collider/

今回はBoxColliderを付けておきました。Add CompornentからBoxColliderを選択します。

とりあえずパラメータは特に変えないでおきました。

また、VCIではMeshColiderをサポートしていないのでデフォルトで付いているそれを削除しておきます。

マテリアルを作ってQuartに色を付ける

先ほど作ったTextBoardにとりあえず適当な色を背景として付けてみます。Unityではマテリアルというリソースで色やテクスチャへの参照の管理を行うようです。先ほど作成したMyAssets/Materials配下で右クリックをしてマテリアルを作成します。名前はBackgroundにしておきました。

次のようにマテリアルからオブジェクト、今回の場合であればBackgroundからTextBoardにドラグ＆ドロップをする事でオブジェクトとマテリアルを紐づける事が出来ます。

以下のようにTextBoardのインスペクタからBackgroundが確認できます。

Main Maps -> Albedoを選択する事でカラーピッカーが現れ任意の色を付けることが出来ます。今回はとりあえず緑にしておきます。

ボードに文字を表示する

次は文字をボードに表示しましょう。とはいえQuartに文字を表示する機能があるわけではないので実際にはテキストオブジェクトを作って Quartで表示して見える用に近接させて重ねる という事を行う必要があります。まずはVCI Textオブジェクトを作成しましょう。TextBoardで右クリックをしてメニューより VCI -> Text を選択します。

初回は以下のようなインポートダイアログが出るのでインポートします。

以下のように表示されました。

テキストインプットを任意のメッセージに変えたり、Postion、Widith/Height、Scale、フォントサイズ等を任意のものに変更します。

ポイントはPositionのZ軸をTextBoardと同じにしない事です。例えば今回同じ値の0を設置するとオブジェクトが重なってしまい中途半端に沈んだりチラつく表示になりました。かといって離し過ぎると文字が表示されているというよりは飛び出て見えるので -0.001 が今回はちょうどよかったです。

VCIをエクスポートする

さて、いよいよVCIファイルとしてエクスポートしましょう。Rootオブジェクトのhelloworldを選択して、検証を押してみましょう。

以下のようにエラーが出てなければOKです。この時点でVCI出力として不備があれば指摘してくれます。

続いてVCIのエクスポートを選んでVCIを出力します。出力先はMyAssets/VCIにしました。

以下のようにファイルが出来ました。あわせて色んなメタ情報系のファイルが生成されていますがVCIとして直接利用するのはhelloworld.vciだけです。

Virtual CastでHello World VCIを動かす

The Seed Onlineに登録する

それでは作ったVCIをVキャスで動かしてみましょう。まずはTSOに登録します。
https://seed.online/home

ページ右上のアップロードメニューを選択します。

以下のような画面になるのでVCIを選択し、先ほど作成したhellowrold.vciを設定し 「アップロードする」 を押します。

アップロードが完了し、アセット情報の編集ページに移動します。

ここでアセットの状態を確認したり、タイトルやサムネイル、公開レベルの設定を変更できます。また 「ライセンス詳細を見る」 をクリックするとVCI側で設定しているライセンスの情報を確認する事が出来ます。

今回は特に変更はしないのでこのままでOKです。

Vキャス上での確認

さて、それではVCIをVキャス上で確認します。もちろん普通にこのままVキャスを起動して全く問題は無いのですが、ちょっとした小技として最近Vキャスに追加されたプロファイルを利用します。こちらを使う事で普段の自分の配信用の設定などを壊さずに作業用のスタジオを作る事が出来るので個人的にはお勧めです。以下のようにSteam上のVirtualCastを選択してプロパティを選んだのち起動オプションを指定します。Profile名はwork4vciとしていますがなんでも大丈夫です。

Vキャスを起動したら普通に カスタムアイテム から先ほど作成したHello Worldを選択します。

ちゃんと表示されていますね！

VCIの更新

続いてVCIの更新を行ってみましょう。まずUnity上で適当な変更を加えます。今回は背景の色を緑から赤に変えてみました。

その後 Rootオブジェクト -> VCIのエクスポート を選択してVCIファイルを上書き保存します。

今度はTSOにアクセスし ライブラリ から目的のアイテムの編集を選択します。

編集画面で先ほど出力したVCIを選ぶと以下のように更新内容の確認ダイアログが出ます。今回はメタ情報を何も変えてないので同一ですが分かりやすくするためにはバージョン番号などを上げていくのもテックニックだと思います。

更新が終わったら再びVキャスに戻ります。この時Vキャスの再起動は不要です。ただ、そのままでは更新したVCIを読むことは出来ないので、リングメニューよりインベントリ更新 を選択します。

これによって以下のように更新したVCIを同じカスタムアイテムから利用する事が出来ます。

まとめ

以上、Unity初心者が作ってみたVCI作成チュートリアルでした。Unityが3Dのゲームエンジンと言う事もありますがエディタやプロジェクトの考え方が少しNetBeansとかEclipseとかJavaのIDE等とは違う部分も多かったので最初はかなり戸惑いましたね。チュートリアル動画のSuika VCIもやること多くて作るの意外に大変だったし…

とはいえ、Unity怖い、とずっと避けてたのですがせっかくだしVCIは作りたいしチャレンジしてみたのですが、とっつきにくかったのは事実ですが、分かってしまえば意外といけそう？という感じになったのは大きな収穫です。もちろん文字通りHello Worldしかしてないので当たり前なのですが何を勉強すれば良いかが少しだけ分かってきた感じ。Unityというか3Dやゲームエンジン初心者なので、たぶんどこかで一度、Unityチュートリアルをしっかりやるか本を買って読んだ方が良い気はしてますが、当面はやりたいことベースでつまみ食いしながらのんびりやっていこうかな。

あと、今回のHelloWorld VCIの時点で想定より分量が増えてしまったので、Luaスクリプトとか使ったホワイトボード作成もチュートリアルの続きとして作成しようと思います。

続編はこちら

それではHappy Hacking!