Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VCI(VirtualCast Interactive)Advent Calendar 2023

Day 13
@testexya

これからVCIを作りたい人へ（VirtualCastToolKit）

Last updated at Posted at 2023-12-12

この記事を読んで出来ること
・UnityでのVCI制作環境の構築！
・１クリックでいつでもサイトにVCIをお手軽アップ？(VirtualCastToolKit)
・初めてのキューブのVCIアップロード(＋ちょっとしたアレンジ)

この記事はUnity＆VCI作り 初心者向けです。
・Unity Hub(Unity)、VirtualCast ToolKitの導入
・初めてのVCIアップロード
までに必要な手順をなるべく細かく記載しています。

最初に

どうも、てすてゃ～です。

バチャキャス(Vキャス)で一度はアイテム作ってみたいですよね？
そんな人におススメなのが「VirtualCast ToolKit」という公式が出してるツールです。

スクリーンショット 2023-12-05 024552.png
https://developer.virtualcast.jp/vctk/

・初心者でも扱えるの？
・Unity結局使うんか。。

って、思う方も多いかと思いますが

・制作環境が最初からプロジェクト内に用意されてる
・VR内に手軽にアップロード＆更新ができる

というスタートアップ＆アウトプットの労力を限りなく減らせるので、初心者にもそれ以外の方にもおススメです！（UniVRMも入っているのでVRMデータも編集できます）

では公式の手順通りにさっそく一緒に導入してみましょう！

スクリーンショット 2023-12-05 034606.png

全部先ほどの公式サイトに書いてる通りなのですが、
ちょっとここからUnity初心者向けに細かく見ていきます。

※Unity Hub導入済みの人は「・必要なバージョンのUnityをインストールする」から進めて下さい。

１．UnityHubをインストールする

スクリーンショット 2023-12-05 04.png

サイト内のWindows用ダウンロードをクリックして、
ダウンロードフォルダにできた「UnityHubSetup.exe」を起動します。
スクリーンショット 2023-12-05 040729.png

「同意する」をクリック。
スクリーンショット 2023-12-05 041432.png

「インストール」をクリック
※OSの入ってないドライブがあればそちらのほうがいいかも。
スクリーンショット 2023-12-05 041652.png

「完了」をクリック。
スクリーンショット 2023-12-05 041842.png

・Unityにサインインする

Unity hub起動初回時にサインインがいります。
※アカウントがない人は「アカウント作成」をクリック。
※この時点で日本語表示じゃない人もあとで変更できます。
スクリーンショット 2023-12-05 042004.png

ブラウザで以下のページが出るので、各項目を入力。
※ユーザーネームとフルネームは何か適当に入力。最初の２つのチェックは必須なので入れておきます。
image.png

確認メールのリンクをクリックした後に「続行」をクリック。
image.png

こんな画面になったらOKです。
image.png

あとは先ほど立ち上げたUnityHubの「サインイン」をクリックすると、ブラウザにこんな画面が出るので「UnityHubを開く」をクリック。
image.png

最初にインストールするバージョンを聞いてくることがありますがここはスキップを選択。
image.png

・Unity Hubを日本語化する

左上の歯車マークを押して、「Appearance」のLanguage → 日本語を選択します。
image.png

・ライセンスを取得

初回はライセンス(無料)の取得がいるので「ライセンスの管理」をクリック。
image.png
ライセンスを加える → 「無料のPersonalラインセンスを取得」→ 内容を確認して「同意」をクリック。
image.png

・必要なバージョンのUnityをインストールする

ついにUnityHubの設定が終わりましたね！
ではさっそく必要なバージョンのUnityを入れるので左のタブのインストールをクリック。
image.png

必要なUnityのバージョンは https://developer.virtualcast.jp/vctk/ の最初に書いてあります。
※2023/12/5の時点ではUnity 2022.1.24f1ですね。
初めての人はまだ何のバージョンもインストールされていませんので「エディターをインストール」をクリック。
image.png

欲しいバージョンが見つからない場合、アーカイブの「ダウンロードアーカイブ」をクリック。
image.png

ブラウザが開くのでここから必要なバージョンを選びます。
image.png

UnityHubにインストール画面が出るので「インストール」をクリック。
※日本語で表示させたい人は日本語パックを入れてもいいでしょう。
image.png
インストールはしばらくかかるかと思いますのでその間、次にVirtualCastToolKitのプロジェクトフォルダを落としておきましょう！

２．VirtualCastToolKitを展開しておく

https://developer.virtualcast.jp/vctk/ のダウンロード（プロジェクト版）をクリック。
image.png

ダウンロードしたzipファイルを解凍して適当な場所に、、すると後で消してしまって泣くことになるので、場所はちゃんと決めておきましょう！
※UntyHubで「新しいプロジェクト」を押すと普段のプロジェクトの保存先が分かるので、そこに解凍したフォルダを置いておくと良いかもしれません。私の場合はD:\unity内ですね。
image.png
image.png

また、この時のフォルダ名がプロジェクトの名前になります。
※今回は「VCToolKit_Test」という名前にしました。
image.png
フォルダの中見はこんな感じになってます。
image.png

３．UnityHubでプロジェクトを開く

UnityHubに先ほど設置したものをプロジェクトフォルダと認識させたいので、「追加」をクリック。※英語版だとOpenとかAddとかかな？

image.png

先ほど設置したフォルダを選択して「開く」をクリック。
image.png

これで一覧に追加されました！今後はここからプロジェクトを開くことができます。
※開く際のUnityのバージョンは右側のところから変更できます。
image.png

４．さっそくアイテムをアップロード！

プロジェクトが開けたら、とりあえずVCIをアップしてみましょう。

↑ もろもろのVCIの制作方法はこちらに書いてますが、とにかくアップしたいと思います。

・バーチャルキャストサイトとの連携

まずはツールキット君を入れたので、自動でサーバーにアップしてくれる設定をします。
Unityのタブから「VC ToolKit」ー＞「Setting…」をクリック。
image.png

ログイン情報を保存にチェックを入れ、「ログイン」をクリック
image.png

ブラウザが開くので「連携アプリの許可」をクリック。
image.png

「codeとstateをコピー」をクリック。
image.png

Unity側で「貼り付け」、「認証」をクリック。
image.png

IDと名前が出てくれば成功です！右上の×を押して消しておきましょう。
image.png

・Simple VCI を出してみる。

１からVCIを作ると最初は結構手間なので、今回は最初から用意されているシンプルVCIというキューブのアイテムを作成してアップロードしてみましょう！
Unityメニュータブの「GameObject」→「VCI」→「Simple VCI」をクリック。
image.png

出来上がったオブジェクトを選択して、
・TitleにVCI名を適当に入れて
・「AddCompornent」をクリック。
※この時のTitle名がVR内で表示される名前になります。
image.png

「Tso Item Descriptor」を探して選択。※検索窓にtsとか入れると出ます。
image.png

「VCIをVirtualCastにアップロードする」をクリック
image.png

このウインドウが出れば成功！
Vキャス内で今アップしたアイテムが出せるようになっています！
image.png
１ｍの立方体だからクソでけぇ・・・(あと大きさも変わらない）
2023120601143847_テストｚ_てすてゃ～ (2).jpg

これだけだとちょっと味気ないので、ここからシンプルVCIがどんなものだったかを見ていく＆少しアレンジしていきます。

※また、Unity中央のシーンビューを操作したい人はここを参考にしてみてください。

５．ちょっとアイテムを更新してみる。

まずはVCIの横の▼を押して内部を展開します。Cubeというのが出てきましたね。
image.png

更にCubeを選択してやると、右側のインスペクターと呼ばれる部分に色々と情報が出てきます。

image.png

・キューブのサイズと位置を変える

まずはTransform。これがVCIを出現させた時の位置・回転・スケール表しています。
image.png

デフォルトだと大きい＆地面に埋まってますので、上に上げて、サイズも0.2にしてみます。
※ScaleについてるリンクマークをONにしておくとXYZの比率が固定されて便利。
image.png

これでインスペクターの下の方にある「VCIをVirtualCastにアップロードする」をまた押すと、更新完了です。
Vキャス内でアイテムを新規作成してみましょう。

これでアイテムがいい感じの高さに最初出てきますが、落下しちゃいますね。
2023120601320644_テストｚ_てすてゃ～.jpg

・落下せずにそのまま静止させる設定

落下せずその場で静止して欲しい場合は、Rigidbody内の
・Use Gravityのチェックを外して
・Is kinematicのチェックを入れて下さい。
image.png
※Is kinematicのチェックを入れないと無重力空間をフヨフヨするような挙動にできます。

・拡大縮小させる設定

VCISubItem(Script)項目内のScalableのチェックを入れておくと、両手で拡大縮小できるようになります。（更にUniformScalingもチェックすると比率を変えずに拡縮可能）
image.png

・コライダが干渉しなくなる設定

また、このCubeを人や物にぶつからないようにしたい場合は、Box ColliderのIsTriggerにチェックを入れて下さい。これでスタジオでもルームでもモノに干渉しなくなります。
（スイッチ用のコントローラーにする時はこういう設定にすることが多いですね）
image.png

・キューブにテクスチャを張り付ける

これで実験してみたいですが、せっかくなので見た目も少し変えてみましょう。
unityの下のウインドウ（Projectウインドウ）に適当な画像をD＆Dして下さい。
image.png

さらにその画像を先ほどのCubeにD＆Dします。
image.png

するとCubeに画像が貼れます。
image.png

この状態で再度「VCIをVirtualCastにアップロードする」を押して、Vキャス内でアイテムを新規作成してみましょう！

６．最後に

2023120601353662_テストｚ_てすてゃ～.jpg
いかがだったでしょうか？
普段見ているVCIに少し近づいてきたでしょうか。

ここから例えば
・Cubeを別のモデルに置き換えてみる
・頭に装着できるようにする
・つかむと音が鳴る
・USEするとエフェクトが出る
・特定のものが触れると色が変わる
・etc…
など様々なことができます。
↓　どんなことが出来るのか詳しくはこちら見てみて下さい。

特にモデルを別のものに差し替えたり、装着できるようにしたりは、スクリプトなしでも実装できるので、スクリプトが苦手な人も是非チャレンジしてみてください♪（自分の準備したモデルが頭に装着できるだけでも結構楽しい）

駆け足となりましたが、ここまで御覧いただき有難うございました！！！☺
「これを機にVCIを作ってみた！」という人が出たら嬉しいです。

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?