![step2](/files/2/tofar/tutorial/images/step2_title.png)
フロントカメラの映像を表示してみよう!
ToF AR の Prefab を配置
Projectウィンドウ にある Prefab を Hierarchyウィンドウ の シーン に配置していきます。
(1) TofArManager を配置します。
- Prefab : (Project) / Assets / TofAr / TofAr / TofArManager
- 配置先 : (Hierarchy) / シーン
Tips
TofArManager は、ToF AR の共通機能を提供するため ToF AR を利用するアプリでは必ず配置が必要です。
(2) TofArColorManager を配置して設定します。
- Prefab : (Project) / Assets / TofAr / TofArColor / TofArColorManager
- 配置先 : (Hierarchy) / シーン
- Inspectorの設定:
Use Front Camera As Default : チェック ※ デフォルトでフロントカメラを使用
Tips
TofArColorManager は、RGBカメラとの接続を管理します。
(3) ColorViewQuad を Main Camera に配置して設定します。
- Prefab: (Project) / Assets / TofAr / TofArColor / V0 / Resources / Prefabs / ColorViewQuad
- 配置先: (Hierarchy) / シーン / Main Camera
- Inspectorの設定:
Color Quad Aspect Fitter / Fix Height: チェック ※ 表示領域の高さに合わせてカメラ映像を表示
Color Quad Aspect Fitter / Auto Rotate: チェック ※ カメラ映像を端末の向きに合わせて表示
Tips
ColorViewQuad をシーンに配置すると TofArColorManager のストリーム開始/終了に連携して自動的にカメラ映像を表示します。
ここまで配置が完了すると、下記の様な配置状態になります。
![step2-1-1](/files/2/tofar/tutorial/images/step2_img1.png)
画面サイズを設定
画面サイズに合わせて、UIを調整していきます。
(1) Gameウィンドウに切り替えて、画面サイズを設定します。
- 設定変更: Free Aspect → iPhone 12 Pro 2532x1170 Portrait
※ 今回の例では「iPhone 12 Pro」としていますが、実際に使用する端末に合わせてください。
(2) ColorViewQuad を 画面サイズに合わせてサイズを調整します。
- Inspectorの設定:
Transform / Position / Z: 0.86 ※ 上下が合うように調整 - Transform / Scale / X: 0.46 ※ 左右が合うように調整
※ Gameウィンドウの ColorViewQuad を見て画面全体に表示されるように調整します。
![step2-2-1](/files/2/tofar/tutorial/images/step2_img2.png)
![](/files/2/tofar/tutorial/images/step2_last.png)
これでフロントカメラの映像が表示されるようになりました。ビルドして確認してみましょう!
TofArColorManager は、様々なカメラ設定を行う事ができます。リファレンスを参考に各設定を試してみましょう!
API references - TofAr.V0.Color.TofArColorManager