> 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="/files/Xk1KCJyAAkGe7s7IsFFS" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/lPP5RPtA6PnODQiV0xyI" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Bxj9otfoTdiYYKzOTt4c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/LA9SzgezR2aXCUQeFJkb" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/2t7uRUTJO5MKi8KtSyB6" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/QJRSm1whTIbxlVmgZbBx" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://portalgraphvr.gitbook.io/portalgraphdokyumento/kedokyumento/ui-creation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.