Element ComponentによるUI作成 - リスト並べ

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

• Element Componentで作成
• HTML要素を追加して作成

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

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

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

 

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

Project: https://playcanvas.com/project/1024612/
Publish: https://playcanv.as/p/4oiO5Sat/

 

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

1. リスト並べ（List View）
2. タブ切り替え（Change Tabs）
3. スクロール（Scroll）
4. プルダウン（PullDown）

 

1. リスト並べ（List View）

ボタンや項目、画像などを並べて表示したい場合には、このElement Componentの「Layout Group」を使ってリスト並べを実現しています。

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

水平(Horizontal)、垂直(Vertical)とWrapさせたグリッド表示のLayout GroupのEntityが用意されています。

それらは、「LAYOUTGROUP Component」から設定することができます。
以下から項目ごとに説明しています。

子エレメントはElement ComponentのEntityを入れ子にします。
サンプルではImage Elementを設定しており、Button Elementなどに変えてUIを作成することができます。

Layout GroupのElement Componentから幅(Width)、高さ(Height)を指定してUIのサイズを指定することができます。

 

Orientation

レイアウトの向きを水平(Horizontal)か、垂直(Vertical)のどちらかを選択できます。

Reverse X

水平に並べる向きを「左から右」「右から左」とレイアウトを変更できます。

Reverse Y

垂直に並べる向きを「上から下」「下から上」とレイアウトを変更できます。

Alignment

子エレメントをLayout Groupの端に揃えるのに使います。[0, 0]にすると左下に揃え、[1, 1]にすると右上に揃えられます。
Wrapにチェックを入れてグリッド表示にする場合は、こちらの設定は反映されなくなります。

Padding

Layout Groupと子エレメントとのスペースを指定できます。

Spacing

子エレメント同士のスペースを指定できます。

Width Fitting, Height Fitting

子エレメントがLayout Groupの幅, 高さに合わせてフィットするように調整されるかを指定できます。指定するプロパティは以下の通りです。

• Stretch: 子エレメントに設定した幅, 高さが適用されます。
• Shrink: エレメントグループの幅, 高さに合わせて、子エレメントの幅, 高さが適用されます。
• Both: StretchとShrinkの両方を適用されます。

Wrap

子エレメントがLayout Groupの幅と高さを超えた場合、新しい行や列に移動するか指定できます。
これにチェックを入れることでグリッド表示にすることができます。

 

 

2. タブ切り替え（Change Tabs）へ