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）

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

タブのボタンを押すことで、該当するコンテンツであるImage ElementのEntityを表示させます。

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

タブと該当するコンテンツを使って切り替えの処理はScriptの「changeTabs.js」を使用しています。

Group ElementでTabs Layout Group(タブ)とContent Group(コンテンツ)を入れ子にし、Scriptの「changeTabs.js」のスクリプト属性にタブとコンテンツを設定します。

changeTabs.jsのコード内容は以下になります。

var ChangeTabs = pc.createScript('changeTabs');

ChangeTabs.attributes.add('tabsList', { type: 'entity', description: 'タブ切り替え' });
ChangeTabs.attributes.add('contentsList', { type: 'entity', description: 'タブ切り替え時のターゲットになるコンテンツ' })

ChangeTabs.prototype.initialize = function() {
    for(let i=0; i < this.tabsList.children.length; i++) { // スクリプト属性のtabsListのEntityの子Entityをfor文で処理する
        let tabItem = this.tabsList.children[i]; // 子Entityを扱いやすいように変数を定義。
        let contentItem = this.contentsList.children[i]; // tabsListの配列順番と同じcontentListの子Entityも同様に変数を定義。
        let self = this;
        tabItem.element.on('click', function (e) { // 子Entityのタブにクリックイベントを作成。クリックしたら以下を処理します。
            for(let content of self.contentsList.children) content.enabled = false; // contentListの子Entityを全て非表示に。
            contentItem.enabled = true; // 変数を定義した同じ配列順番のcontentItemをenabled = trueで表示させる。
        });
    }
};

スクリプト属性（attributes）により、タブ切り替えのボタンと切り替え先のコンテンツのEntityをそれぞれ設定することで動作します。

タブとコンテンツは配列の順番で関連付けられるようになっています。
Tabs Layout Group(タブ)とContent Group(コンテンツ)の子Entityの順番に設定するようにご留意ください。

3. スクロール（Scroll）へ