> For the complete documentation index, see [llms.txt](https://portalgraphvr.gitbook.io/portalgraphdokyumento/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://portalgraphvr.gitbook.io/portalgraphdokyumento/kedokyumento/ui-creation.md).

# UI作成

PortalgraphでUIを表示する方法を解説します。Portalgraphはワールドの縮尺に関わらず必ず同一サイズで画面に表示され、左右分割や上下分割の3Dで正常に表示され、マウス、タッチ操作での入力に対応するUIを提供します。

PortalgraphでUIを表示する際は、通常のCanvasではなく、利用してるレンダリングパイプラインに合わせて以下のプレハブを使用します。

* Built-in……Assets/Portalgraph/Prefab/ScreenCanvas
* URP……Assets/Portalgraph/Prefab/ScreenCanvasURP
* HDRP……Assets/Portalgraph/Prefab/ScreenCanvasHDRP

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FihfVI3UK0XL5tCidqVUS%2Fimage.png?alt=media&amp;token=752820bd-b449-4f7b-b6e8-d4585d4d38c9" alt=""><figcaption></figcaption></figure>

シーン内に配置されたプレハブのPortalgraphCanvasのScreenにシーンに配置したPortalgraphプレハブのScreens/Screenをセットすることで、その画面にフルサイズでこのUIが表示されます。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FNgznens6bVrEqvs72y1M%2Fimage.png?alt=media&amp;token=782dd73c-21db-4706-b2e4-e5c1584a3a45" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FijFckqNhQLSADGoDW5em%2Fimage.png?alt=media&amp;token=1dcc1b00-674b-42ae-ba80-46a08c814faa" alt=""><figcaption></figcaption></figure>

使用するラベルはTextMesh Proのものを使ってください。このCanvasはワールドスペースのため、手前にオブジェクトがあるとラベルが隠されて見えません。これを防ぐためにラベルのフォントアセットのシェーダーはTextMeshPro/Mobile/Distance Field Overlayにしてください。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FG0qWs6Jx8Bjws89OTxSu%2Fimage.png?alt=media&amp;token=0fdc8e8d-6840-4698-b0c6-6dccd7806411" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2FwyhLrtyx5GUTru5gAizB%2Fimage.png?alt=media&amp;token=517c3b1b-9fae-4f06-9d14-e5e76337170a" alt=""><figcaption></figcaption></figure>

PortalgraphのUIは、マウス操作またはタッチ操作に対応しています。マウス操作の場合、左右分割3Dの場合は画面の左半分、上下分割3Dの場合は画面の上半分がクリック可能になっています。タッチ操作の場合は、3D方式にかかわらず、画面全体がタッチ可能で、見た目通りの場所がクリックされます。

マウス操作とタッチ操作の切り替えは各画面の設定画面で行います。Portalgraphアプリの実行中にF12キーを押して設定画面を開き、「次へ」→「Input」からMouseまたはTouchを選択してください。

<figure><img src="https://2416823498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaJCTlOkQcgkhVMLcuHBm%2Fuploads%2F5n7IOx0Mik7COPoka4v3%2Fimage.png?alt=media&amp;token=bff61e98-a477-4f36-bf29-cba179aac9d5" alt=""><figcaption></figcaption></figure>