はじめに
今回はクイズに正解するとポータルを表示させる方法を紹介します。
クイズとテレポートを組み合わせて作ります。
![](https://signyamo.blog/wp-content/uploads/2022/05/Animation4.gif)
このようなワールドがある事を前提に進めます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-69.jpg)
ワールドの作り方はこちらをご覧ください。
クイズの導入
こちらのページにアクセス。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/835cdb98dbccbe628abd4c389fc8919b.jpg)
本体の下にある無料ダウンロードを押します。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-01-6.jpg)
DLした.zipを右クリック → すべて展開を選択。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-02-3.jpg)
中にある.unitypackageをワールドのProjectにドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-03-3.jpg)
Importを押して読み込み。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-04-3.jpg)
Import TMP Essentials → Import TMP Examples & Extrasの順に選択して必要な機能を読み込み。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-05-3.jpg)
Project → Assets → ax-item → Quizを開きます。
Quiz.prefabがある事を確認。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-06-3.jpg)
Quiz.prefabをHierarchyにドラッグ&ドロップ。
位置を調整。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-07-3.jpg)
HierarchyのQuizを選択。
Inspectorで下記のように設定
・必須正解数=2
・許容誤答数=0
・解説の表示 → チェックを解除
・最終成績の表示 → チェックを解除
・スコアの表示 → チェックを解除
必須正解数は2が主流なので2にしました。
変えたい方は自由に変えてください。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-08-4.jpg)
HierarchyでQuizを右クリック。
Unpack Prefabを選択。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-09-4.jpg)
『これを複製してQuizItemに入れる』をQuizItemに入れます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-10-3.jpg)
『これを複製してQuizItemに入れる』を選択。
Inspectorより問題文や選択肢を設定。
Answer_indexのSizeを1、Element 0を0に設定。
Element 0の選択肢のみ正しい答えにします。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-11-4.jpg)
Hierarchyで『これを複製してQuizItemに入れる』を選択。
Ctrl+Dで複製。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-12-3.jpg)
新しく問題文や選択肢を設定します。
これを欲しい問題数の数だけ繰り返します。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-13-3.jpg)
Quizを開きfailedを選択。
チェックを入れて表示を有効化。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-14-3.jpg)
failedの中を開きresult-textを選択。
Inspector → TextMeshPro – Textより間違えた場合に表示される文章を入力。
(『再挑戦の際は入りなおしてください』などで大丈夫です)
![](https://signyamo.blog/wp-content/uploads/2022/05/image-15-2.jpg)
failedのチェックを外し非表示化。
succesを選択 → チェックを入れて表示。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-16-2.jpg)
succesの中を開きresult-textを選択。
Inspector → TextMeshPro – Textより正解した場合に表示される文章を入力。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-17-2.jpg)
Bulid & Testで動作を確認。
![](https://signyamo.blog/wp-content/uploads/2022/05/Animation1-3.gif)
これでクイズの導入が完了です。
テレポートの導入
こちらのページにアクセス。
![](https://signyamo.blog/wp-content/uploads/cocoon-resources/blog-card-cache/226d3e3df51e96577748f5e48ef3bfed.jpg)
無料ダウンロードを押します。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-18-2.jpg)
DLした.zipを右クリック → すべて展開を選択。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-19-2.jpg)
Projectに中にある.unitypackageをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-20-2.jpg)
Importを押します。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-21-2.jpg)
ProjectよりAsstes → mmmsys → FaceTeleportを開きます。
中にあるPortal_FadeTeleportPrefab.Prefabを選択。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-22-2.jpg)
HierarchyにPortal_FadeTeleportPrefab.Prefabをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-23-2.jpg)
さらにFT_FadeObjectもドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-49-1.jpg)
Portal_FadeTeleportPrefabを開きます。
Fade ObjectにFT_FadeObjectを設定。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-50-1.jpg)
ここからは双方向か一方向かで行う処理が変わります。
双方向テレポートの場合
Hierarchyで中を開きます。
FT_Portal_BとFT_Point_Bを選択。
この2つをまとめて移動させます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-48-1.jpg)
HierarchyにFT_FaceObjectをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-49-2.jpg)
FT_Portal_Aを選択。
Inspector → Face Objectの所にHierarchyのFT_FaceObjectをドラッグ&ドロップで設定。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-50-2.jpg)
FT_Portal_Bを選択。
同様にFace Objectの所にHierarchyのFT_FaceObjectをドラッグ&ドロップで設定。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-51-1.jpg)
以上で設定が完了です。
一方向テレポートの場合
Hierarchyで中を開きます。
一方通行のポータルにしたい場合FT_Portal_BとFT_Point_Bを選択。
Inspectorでチェックを外し非表示にします。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-24-2.jpg)
FT_Point_Aを選択します。
テレポートしたい位置に移動させます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-25-2.jpg)
FT_Portal_Aを選択。
InspectorでTeleport Pointを確認。
HierarchyよりFT_Point_Aをドラッグ&ドロップで割り当て。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-26-2.jpg)
HierarchyにFT_FaceObjectをドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-27-3.jpg)
FT_Portal_Aを選択。
Inspector → Face Objectの所にHierarchyのFT_FaceObjectをドラッグ&ドロップで設定。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-28-3.jpg)
Disable Objectを開きます。
Element 0の所にFT_Portal_Bが設定されています。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-33-2.jpg)
この状態だと一度ポータルを入った際にFT_Portal_Bが表示される不具合が起こります。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-32-2.jpg)
Element 0の中身を選択。
BackSpaceキーを押してNoneにします。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-34-2.jpg)
以上で設定が完了です。
ポータル表示不具合の修正
ポータルの表示には問題が起こることがあります。
2つ以上配置したり、特定の位置から見ると表示が崩れます。
![](https://signyamo.blog/wp-content/uploads/2022/05/Animation2-1.gif)
こちらを調整します。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-29-2.jpg)
ProjectよりAssets → mmmsys → FaceTeleport → Othersを開きます。
PortalCircleを選択。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-30-2.jpg)
Inspectorを確認。
Enable GPU Instancingにチェックを入れます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-31-2.jpg)
Build & Testで動作確認。
![](https://signyamo.blog/wp-content/uploads/2022/05/Animation3-1.gif)
これでポータル表示不具合の修正が完了です。
クイズとポータルを組み合わせる
HierarchyよりQuizを選択。
“◆結果表示 – 合格下の”有効化オプジェクトの▶を押して開きます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-35-2.jpg)
Sizeを1に設定。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-36-2.jpg)
HierarchyよりFT_Portal_Aをドラッグ&ドロップで割り当て。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-37-1.jpg)
FT_Portal_Aを選択。
チェックを外し初期状態で非表示にします。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-38-1.jpg)
これでクイズに正解するとポータルが表示されるようになりました。
![](https://signyamo.blog/wp-content/uploads/2022/05/Animation4.gif)
不正解の場合は表示されません。
![](https://signyamo.blog/wp-content/uploads/2022/05/Animation5-1.gif)
あとはPortalとPointを離れた位置に配置。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-39-1.jpg)
Box Colliderを設定して浮遊ツールなどで出られないようにします。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-52-1.jpg)
以上でクイズに正解した人しか入れない設定が完了です。
より細かなポータルの設定
ここからはポータルデザイン調整の方法を紹介します。
Project → Asstes → mmmsys → FadeTeleport → Othersを開きます。
PortaltParticleを選択。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-40-1.jpg)
Inspectorを確認。
Albedoでパーティクルの色を変えれます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-41-1.jpg)
PortalCircleを選択。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-42.jpg)
Colorでポータルの色を変えれます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-43.jpg)
Threshold、Speed、Sizeでポータルの形を変えれます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-44.jpg)
HierarchyでFT_Portal_Aを選択。
InspectorでScaleのXとZの値を調整。
するとポータルの大きさを変えれます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-45.jpg)
ポータルの有効範囲はGizmosで確認できます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-46.jpg)
FT_FacceObjectを選択。
ここでポータルのフェード時間などを細かく設定できます。
![](https://signyamo.blog/wp-content/uploads/2022/05/image-47.jpg)
以上でクイズに正解するとポータルを表示させる方法の解説が完了です。
まとめ
今回はクイズに正解するとポータルを表示させる方法を紹介しました。
これは[FREE] Quiz【VRCWorld / U#】と【フェード暗転】やさしいテレポート【VRCSDK3 / U#】の組み合わせで実現できます。
また、頭上にタグ表示させる方法なども解説しています。
ぜひこちらもご覧ください。
コメント