UnityでVRChat用のワールドを作るときに、何かボタンなどのギミックを作りたいと思ったことはありませんか？VRChatによくあるのがミラーを表示・非表示するためのスイッチ・ボタンですが、こういうギミックを作れるようになりたいですよね。
自分は最終的にはドアの開閉とかほかにもワールドの中でいろいろなギミックを仕込みたいと思っているので、今回は手始めにUdonなどのスクリプトを使わず、おそらく一番シンプルで簡単な方法でミラーの表示非表示スイッチの作り方を解説してみようと思います。
スイッチの基本みたいな感じなんで、これを応用すれば結構いろんなスイッチが作れるようになると思います！トグルボタンと普通のボタンについて解説します。
久しぶりにUnity触るのでいろいろと忘れてますが、忘れてるしほぼ初心者なので初心者目線で記事を書けることが自分の強みだと思ってます…（以前作ったけど、完全に忘却してました。）
この記事は、UnityのVRChatワールド作成用に、簡単なスイッチギミックの設置方法を書いた初級者向けの記事です。
難易度
Unityのバージョンは、2022.3.22f1 2025／4月現在、VRCワールド作成用の最新のバージョンです。結構古い解説のだと全然メニューが違ったりしますので。
Toggleスイッチ
①ミラーを設置する
準備
VCCでプロジェクトを作成して開く前に、Manage Projectの画面で、VRWorld Toolkitを入れておいてください。
Projectsの画面で、プロジェクトを開くのではなく一旦Manage Projectsを押し、
VRWorld Toolkitの右側の＋ボタンを押して、このツールを入れておきます。
ミラーの設定とかで便利なのと、いろいろワールド作成に便利機能が入っているツールなので、VRC関連プロジェクト作成のときは入れた方がいいと思います。
ミラー作成
適当にVRCMirrorを設置します。
VRCMirrorは画面下のProjectファイルの中のAll Prefabsの中にあります。
これをドラッグ＆ドロップでSceneの中に配置します。
Mirrorは裏表があります。Sceneに何もないとどっちがどっちかわからないので、Cubeとか出してCubeが映る方が表という感じで判断するといいんじゃないかと思います
オブジェクトの名前をHQMirrorにします。（ハイクオリティミラー：いろんなものが映る鏡。）LQMirror（ロークオリティミラー：キャラクターしか映らない鏡）もありますが、とりあえずHQMirrorだけ作っておきます。
なんで二種類あるのかっていうと、いろんなものが映る鏡は処理が重くなるので、軽くしたい方のためにキャラクターだけが映る鏡も大体用意されてるっていう感じです。
ミラーの設定
HQMirrorを選択して右側のInspector画面を見るとVRC Mirror Reflectionというセクションがあります。鏡が何を映すかとか設定できるところ。
この下側にVRWorld Toolkit Additionsという項目があり、Show only Players か Show Players/World か選べるようになっています。（プロジェクト作成のときにVRWorld Toolkitを入れてないとこの項目は存在しません）
HQMirrorの場合は右側のShow Players/Worldを選択してください。ワールドもちゃんと映してくれるモードです。
すると、Reflect Layersという、何を映すか選択できる部分が、Mixed…という内容に変わったと思います。
このメニューを開けて、さらに、
- Pickup(ペンとか持てるもの)
- Walkthrough（イスとか座ったりできるもの）
もチェックを入れると、より不足なくワールドのオブジェクトが映るようになります。
イスとかペンとかそういうの置かないよ、って人は別にチェックしなくてもいいです。
ミラーのオンオフ
HQMirrorのinspectorの一番上のチェックをオンオフして見ましょう。
チェックがついてオンになっているときはアクティブ状態。
鏡が見えています。
チェックを外し、オフにすると鏡は非アクティブ状態になり、見えなくなります。
非アクティブ状態は、物自体は存在しているのですが、スクリプトも動作せず、表示もされません。
スイッチでここをオンオフさせて鏡の表示・非表示をしようというわけです。
スイッチでのオンオフのギミックは、大体オブジェクトのアクティブ状態／非アクティブ状態の切り替えだと思いますので、この概念を覚えておくと良いと思います。
②キャンバスとUIのスイッチなどを設置
キャンバス設置
スイッチをおくためにはCanvasに設置しないといけないらしいのでCanvasを出します。（他にもスイッチの作り方はあるかもしれないが、簡易スイッチの場合）
Hierarchyの上にカーソルをおいて、右クリックし、UIのCanvasを出します。
出てくるCanvasはめちゃくちゃ巨大です。（画面を引いて見ると、白いフチのある四角形がCanvasです）最初はRender ModeがScreen Spaceにあり、サイズ調整できないので、World Spaceに変更します。
サイズ調整できるようになったら、大体1/1000くらいにスケールして小さくします（リンクボタンをオンにするとXYZ全てに値を入れられて便利）。あとはPosX,Y,Zを0にしてから場所を移動させて鏡の近くにおきます。
Toggleスイッチ設置
まずはToggleスイッチを作ってみます
Canvasを選択した状態でHierarchy上で右クリック、UI ＞ Toggle を選択し追加します。
すると、Canvasの子要素としてToggleスイッチが追加されます。
外に出てる場合は、Canvasの中にToggleをドラッグしていくと中に入ります。
ToggleはCanvasの子要素なのでPosX,Y,Zを0にすると真ん中にきます。サイズとか位置をお好みで決めましょう
スイッチを押せるように準備
Canvas
Canvasを選択した状態で、VRC UI ShapeをAdd Componentします。
さらに、CanvasのLayerをUIからDefaltに変更します。そのとき、子要素もDefaultに変えるか聞いてくるのでYESを選択。
これでVRChat内でキャラクターが青いビームみたいなのでスイッチを押せるようになります。
Toggle
Toggleの設定です。
Navigation…ゲーム内で、スイッチ間をどう移動するか。デフォルトはAutomaticで、キーの移動で周囲にあるスイッチを自動でいい感じに移動できるようにしてくれるけど、予期しない動作にもつながる。基本的にはAutomaticでいいですが、マウス移動しかしない場合Noneでいいです。
Is On…チェックが入ってるとスイッチが入ってる状態がデフォルトになります。
スイッチのデザイン
こんな感じに、canvasの中のToggleのスペースの中にチェックボックスとラベルをいい感じに大きさ調整、デザインしていきます。
Toggleの子要素を開くと左図のようになっていて、
Background…チェックボックスの白いボックス
Checmark…チェックマークそのものです（Is Onをオンにしないと見えないのでオンにして表示させて調整してください）
Label…文字の部分
Label
Textセクションでラベルの文字を変更しデザインできます。
Text…テキスト内容文
Font…フォントを変えます（右の〇を押すとフォントの種類が出てくるけど、デフォルトだと何も入ってないので後述します）
Font Size…サイズ変更します
Color…文字の色を変更します
ここで、文字が反転している方は、Canvas自体をY軸に180度回転などして直してください。
フォントを変える
フォントを変えたいときはPCに入ってるフォントの入ってるフォルダを開いて、そこから書体をアセットの中にドラッグ＆ドロップで入れます。
これでフォントの部分をクリックすると選べるようになります。
Checkmark
チェックマークの部分も最初は小さいので、サイズ調整します。
- Backgroundの白背景のサイズを大きくし、位置を調整
- Checkmarkもサイズを大きくする（じゃないとチェックだけが小さいままになります）
③Toggleのギミックをつける
HQMirror１枚のオンオフのギミック
まずはトグルスイッチをオンオフして、HQMirrorを表示、非表示させてみましょう。
Toggleを選択して、右のメニューを見ると、On Value Changedっていう項目があります。
最初は空で何も入ってないので、右下の＋を押してください。
Toggleボタンに関数をいれてギミックをつけるために、まず対象のオブジェクトであるHQMirrorをドラッグしてもってきます。
Tggleをオンオフするたびに、このオブジェクトの状態がどう変わるかを設定していきます。
No Functionの部分をクリックし、メニューを開いて、
GameObject > SetActive
を選択します。
SetActiveの関数を入れると、トグルボタンにチェックが入るとミラーがアクティブ化し、チェックが外れると非アクティブ化します。
ここでUdonのスクリプトを書く人もいますが、別に書かなくても動きます。
初期状態を設定する
チェックが入った状態が鏡が表示された状態ですので、デフォルトで鏡が表示されていてほしいという方は、ToggleのIs On にチェックを入れておいてください。逆に鏡を非表示の状態でスタートしたいという方はIs Onをオフにしてください。
これで完成です。トグルスイッチをオンオフすると鏡が表示されたり非表示になります。
VRCにアップロードしなくてもテストプレイができます。詳しくは↓の記事の「作ったワールドをその場で簡易テスト」をご覧ください。
Buttonスイッチ
では今度はキャラクターしか映らないLQMirrorも作ってみます。
HQ MirrorとLQ MirrorをHQ MirrorボタンとLQ Mirrorボタンで切り替えます。
Toggleスイッチで作ると、関数の呼び出されるタイミングなどのせいでうまくいきません。複数のボタンを連動させて作るときは、（コードを書かないなら）Buttonを使います
鏡を作る
Toggleスイッチで作ったときのようにHQ Mirrorを作ります。
今回は二枚作るので、HierarchyでHQMirrorを右クリックし、Duplicateで複製します。名前をLQMirrorに変えます。
LQ Mirrorの設定
複製したままだとHQ Mirrorの設定が残っているので、鏡に映るものをキャラクターだけに設定します。
VRC Mirror Reflectionで、Show only Playersを押します。
現段階では同じ位置に鏡が二枚あることになっています。
面が同じ位置にあると、Z-fightingという現象がおこり、どっちを表示するか決められないのでちらちらしたり表示がおかしくなるので、どちらかの鏡を、ちょっと前後方向にずらしてください。
スイッチを作る
またCanvasの子要素として作るので、Canvasを出してから（詳しくはToggleスイッチを作ったときにCanvasを作ったところに書いてあります）、右クリックでUI ＞ButtonーTextMeshPro を選択します。
TextMeshProはTextの新しいUIのコンポーネントで、以前のものより表示が綺麗だったり機能が豊富です。こちらがあればこちらを使いましょう
後で複製するので今は一つだけ出します
スイッチのデザイン
左図のように入っているかと思いますので、まずButtonの位置をPosX,Y,Zを0にして、サイズを好きなサイズに調整します。
次はTextです。表示する文字を入力し、フォントサイズを大きくします。
まだフォントが入ってない、と言う方は、ウィンドウのどこかに（２画面使ってる方は別の画面のどこかに）以下のようなウィンドウが開いてますので、Import TMP Essentialsをクリックします。（TextMeshProを使うのに必要なリソースをインポートします。）
これでフォントもちゃんとはいり、文字が表示されるようになります。
左図のようにボタンを作ります。
ボタンを複製する
ボタンのデザインができたら、ボタンを複製します。複製したらわかりやすいように名前をHQMirrorButton, LQMirrorButtonなどと名前を変えます。
ボタンの位置も重なっているので上下にずらして見えるようにします。テキストの内容文も変えておきます。
スイッチを押せるように準備
Canvas
Canvasを選択した状態で、VRC UI ShapeをAdd Componentします。
さらに、CanvasのLayerをUIからDefaltに変更します。そのとき、子要素もDefaultに変えるか聞いてくるのでYESを選択。
これでVRChat内でキャラクターが青いビームみたいなのでスイッチを押せるようになります。
ボタンのギミックをつける
ボタンにギミックをつけていきます。今回つける関数はGameObject > SetActive(bool)になります。
Toggleのときとは若干違うので間違わないようにしてください。（選択できる関数が違います）
HQMIrrorButtonのギミック
ボタンを押したとき、HQMirrorがアクティブになり、LQMirrorが非アクティブになるよう、設定していきます。
LQMirrorButtonのギミック
ボタンを押したとき、LQMirrorがアクティブになり、HQMirrorが非アクティブになるよう、設定していきます。
これでHQMirrorとLQMirrorを切り替えるボタンが完成しました！テストモードで確認してみてください。
※以前はLQMirrorは真っ黒背景だったんですけど、最近は空と地面がなんとなく映るようになっているようです。
ToggleスイッチもButtonスイッチも、テストモードでうまくいったらVRChat SDKでBuild&Testをしてみましょう。
うまくいかなかったら
いろいろ設定しているうちにミラーの設定が変化していることがあります。もう一度Quick set Reflect Layersを押して再設定してみましょう
●Canvasの中にButtonやToggleが入っているか確認しましょう。Canvasの中の子要素になってないといけません。
●CanvasのLayerがDefault、スイッチ（Button,Toggle）もLayerがdefaultになっているか確認しましょう
●CanvasにVRC UI Shapeのコンポーネントが入っているか確認しましょう
●初期状態を確認しましょう。Toggleボタンを使うとき、最初に表示されたままにしたい場合はIs Onにチェックをしておきましょう。最初に非表示にしたい場合はIs On のチェックを外しましょう
●オブジェクトを入れる項目に、間違ったオブジェクトを入れてないか確認しましょう。
●入れる関数がSetActiveかSetActive(bool)か、きちんと確認しましょう。似てるけど違う関数があるので間違えているかもしれません。
●鏡がぴったり重なっていると表示がおかしくなります。少しずらしましょう
