Element ComponentによるUI作成 - スクロール – PlayCanvas

PlayCanvasでUIを作成するには以下の２点の方法があります。

前者はPlayCanvasに備わっている機能で、画像やテキストなどの2Dコンポーネントで構成されるユーザインターフェイスを構築するために使用されます。

また、後者はHTMLやCSS、ブラウザDOMを追加し作成していく、Web標準の機能を使用します。

後者については、実現方法が複数存在しかつHTMLやCSSの事前知識を前提となります。他ナレッジ記事にてライブラリである「PCUI」の紹介しております。
※PCUIを使ったUI作成のサンプルのナレッジ

サンプルプロジェクトを用意していますので、ご参照ください。
また、このサンプルを使ってゲームや他コンテンツなど自由に役立ててください。

ここでは、前者の「Element Component」を使ったUIの作成方法を紹介します。
各サンプルのナレッジはそれぞれの記事で紹介しておりますので、以下からご参照ください。

3. スクロール（Scroll）

PlayCanvas Editorには、「Scroll View」というElement Componentをスクロールさせるための機能が備わっています。

サンプルプロジェクトのシーン「Scroll」から確認ができます。

このScroll Viewの使用方法について説明します。

Add EntityからScroll Viewを追加すると、以下のEntityが追加されます。

スクロールするコンテンツのEntityを設定します。
この中のContentというEntityに他Image Elementなどを入れてスクロールするコンテンツを作成します。

水平のスクロールバーのEntity。
スクロールバーの色やスクロールバーのハンドルのサイズなどを変更できます。

垂直のスクロールバーのEntity。
スクロールバーの色やスクロールバーのハンドルのサイズなどを変更できます。

---

上記をそれぞれ Scrollview Component の各項目にEntityを設定することで動作します。

ScrollViewはElement ComponentのWidth, Heightによってサイズを変更することができます。

Viewportの入れ子にあるContentというEntityのElement ComponentのWidth, Heightによってスクロールするコンテンツ自体のサイズを変更できます。

これらのサイズを変更することでスクロールできる範囲を決めることができます。

横スクロールや縦スクロールが必要ない場合には、Scrollview ComponentのHorizontal、VerticalのチェックボックスをFalseにすることで解除することができます。