【初心者向け】VCIでテキストを扱う

VCIを触りはじめて1ヶ月程度が経ちましたが、テキスト（文字列）を扱おうとしたいときにどこから始めればよいかわかりづらかったので、その補完をしたいという気持ちで書きます。

# 参考情報

https://virtualcast.jp/wiki/vci/component/sdk/text

本記事の内容はほぼ上記公式リファレンスの焼き直しです。

# 開発環境の構築とプロジェクトの作成

プロジェクトの作成が完了している場合は読み飛ばしてください。

## 開発環境

### インストールするもの

- Unity 2021.3.6f1

Unity Hub経由でインストールします。

https://unity.com/ja/download

### ダウンロードしておくもの

- UniVRM-0.101.1.unitypackage

https://github.com/vrm-c/UniVRM/releases/tag/v0.101.1

- UniVCI-0.35.0.unitypackage
- TMP_NotoSansCJK.unitypackage

https://github.com/virtual-cast/VCI/releases/tag/v0.35.0


執筆時点で最新の開発環境を揃えると上記のようになります。基本的には[最新のUniVCIのリリース](https://github.com/virtual-cast/VCI/releases)を確認し、そこで推奨されている記載されているバージョンのUnityおよびUniVCIを使用すると良いと思います。TMP_NotoSansCJK.unitypackage は必須ではありませんがテキストを扱う際には導入しておいたほうがのちのち都合がよいです。

## プロジェクトの作成

Unity Hubの画面上 **[New Project]** をクリックし、**[3D]** を選択、Editor Versionが2021.3.6f1になっていることを確認します。

![Screenshot_2022-12-12 21_07_31-Unity Hub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/a13c0b97-55aa-fdc0-0d9e-6483dec82a98.png)

Project nameは適当につけます。

## パッケージのインポート

![Screenshot_2022-12-12 21_22_11-VCITextTest - SampleScene - Windows, Mac, Linux - Unity 2021.3.6f1 Personal _DX1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/cefd0b86-7506-cc39-1890-2c12fa87e360.png)

**[Assets]** → **[Import Package]** → **[Custom Package...]** でダウンロードしたUniVRM-0.101.1.unitypackage、UniVCI-0.35.0.unitypackage、TMP_NotoSansCJK.unitypackage を順番にインポートします。

![Screenshot_2022-12-12 21_39_39-UniGLTF.EditorSettingsValidator.UnityEditorSettingsValidatorWindow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/0839498a-3e75-25f6-4ea6-1eccf34fac4f.png)

インポート時にこのような確認メッセージが表示されたら**Accept All**をクリックします（よくわかっていない）。

# VCIの作成

https://virtualcast.jp/wiki/vci/make

上記記事の焼き直しですが念のため。

## VCIObject と VCI Sub Item

まず空のGameObjectを作成し、 **[Add Component]** でVCIObjectを追加します。個のオブジェクトの名前を *VCITextTest* とします。

*VCITextTest* のLayerを **VCIPickUp** にします。この設定はアバターや他のVCI等との接触時の挙動に関係します。詳細については以下の記事が詳しいです。

https://qiita.com/johnny-um/items/57c509bb1592c6d22f2f

![Screenshot_2022-12-13 14_07_34-VirtualCast.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/1e236632-e87f-dd4a-6a7c-de161e8e3000.png)

Hierarchy上で *VCITextTest* を右クリックし **[3D Object]** → **[Cube]** を選択します。このCubeの名前は *Cube* のままにしておきます。

*Cube* のTransformで **Position** のYを1にしておきます。Scaleは **X: 0.5, Y: 0.5, Z: 0.001** にします。

*Cube* のInspectorで **[Add Component]** → **[VCI Sub Item]** を選択します。

追加されたVCI Sub Itemでは **Grabbable**, **Scalable**, **Attractable** にチェックを入れ、同じく追加されたRigidbodyでは **Use Gravity** のチェックを外し **is Kinematic** のチェックを入れます。

![Screenshot_2022-12-13 13_13_09-VCITextTest - SampleScene - Windows, Mac, Linux - Unity 2021.3.6f1 Personal _DX1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/c53d5a25-0df4-d559-26ae-8d24f7735cc1.png)

## VCI Text

ようやく本題に入っていきます。

*Cube* を右クリックし **[VCI]** → **[Text]** を選択します。

![Screenshot_2022-12-13 14_23_02-VCITextTest - SampleScene - Windows, Mac, Linux - Unity 2021.3.6f1 Personal_ _DX.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/92ae3fca-9984-587c-4a45-0326b9499e8d.png)

以下のようなダイアログが表示されたら **[Import TMP Essentials]** をクリックして必要なパッケージをインポートします。

![Screenshot_2022-12-13 10_21_02-TMP Importer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/ceb3bef7-9403-00cb-a6d9-b739e0a26342.png)

## テキストの編集

文字が *Cube* の中に入って見えなくなっている場合は、Z軸（青色の軸）を動かして見える状態にします。

![Screenshot_2022-12-13 13_45_59-VCITextTest - SampleScene - Windows, Mac, Linux - Unity 2021.3.6f1 Personal _DX1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/89727d15-bc3b-38ae-5dbb-f7b995f6c1d2.png)

**TextMeshPro-Text** で一般的なテキスト編集ができます。ただし多少クセがあります。

![Screenshot_2022-12-13 11_41_05-VCITextTest - SampleScene - Windows, Mac, Linux - Unity 2021.3.6f1 Personal_ _DX.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/99d58681-3c11-3f5d-641f-7e438c8d4385.png)

- **VCIで使用できるフォントは [Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP) のみです** 。Font Assetでフォントを選択できるように見えますが、ここでの選択はあくまでUnity上でしか反映されません。
- **Font Asset** が初期設定 LiberationSans SDF のままだとUnity上で日本語が潰れて見えてしまいます。TMP_NotoSansCJK.unitypackage をあらかじめインポートしたことにより **NotoSansCJK-Bold_SDF** が選べるようになっていますので変更しておきます。
- **Font Size** の初期値5はかなり大きいので、いったん1くらいにしておきます。**Auto Size** はVCIでは機能しません。
- **Wrapping** をEnabledにするとテキストが枠内で折り返されます。

## VCIのエクスポート

![Screenshot_2022-12-13 12_08_06-VCITextTest - SampleScene - Windows, Mac, Linux - Unity 2021.3.6f1 Personal_ _DX.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/87f10286-4b3d-fbf1-9bdb-cd4b8ea16767.png)

**VCI Object** のTitle, Version, Authorを適当に入力し **[VCIをエクスポート]** をクリックします。

エクスポートしたVCIを [THE SEED ONLINE](https://seed.online/upload) にアップロードし、VirtualCast上で展開します。ルーム・スタジオのどちらでも同じ挙動になるかと思います。

![2022121313570921_作業ルーム_桜町しいた.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/c40b17da-1a52-75c1-315d-5b94715b4bac.png)

問題なくVCIが表示されたらVCIが勝手に移動しないか、それを掴めるか、リサイズ可能か、文字( *Text* )と背景( *Cube* )が別々に動いてしまわないか確認します。

![2022121313572755_作業ルーム_桜町しいた.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78561/9548ba4a-d2b7-67a1-77b8-3bd480a0dc3b.png)

ここまで来たら本記事で扱う内容は終了です。

文字を表示するという単純な動きを実現するだけでも、初学者にとってはハードルになる要素がたくさんあるものだと感じました。とはいえ、VR空間内で使えるアイテムを短時間で作って簡単に持ち込めるのはやはりVirtualCastの優れたポイントだと思います。

VCIで楽しいことをしていきたいですね。