PlayCanvasでUIを作成するには以下の2点の方法があります。
- 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の作成方法を紹介します。
各サンプルのナレッジはそれぞれの記事で紹介しておりますので、以下からご参照ください。
4. プルダウン(PullDown)
リストを表示するような領域がUIの範囲に無い時は、プルダウンを使うのが良いでしょう。
プルダウンはPlayCanvasには備わっていませんが、Scriptから設定をすることで実装することができます。
サンプルプロジェクトのシーン「PullDown」から確認ができます。
このプルダウンは、HTMLのSelectタグと同じプルダウン(ドロップリスト)の挙動を想定して作成しています。
Group ElementでSelect ButtonとPullDown Listを入れ子にし、Scriptの「pulldownlist.js」のスクリプト属性に該当するボタンやテキスト、リストのValueを設定します。
pulldownlist.jsのコード内容は以下になります。
let Pulldownlist = pc.createScript('pulldownlist');
Pulldownlist.attributes.add('pulldownBotton', { type: 'entity', description: 'Pulldownするボタン' });
Pulldownlist.attributes.add('pulldownBottonText', { type: 'entity', description: 'Pulldownするボタンのテキスト' });
Pulldownlist.attributes.add('pulldonwList', { type: 'entity', description: 'PulldownのリストのScrollView' });
Pulldownlist.attributes.add('pulldonwListContent', { type: 'entity', description: 'PulldownのリストのScrollView内のContent' });
Pulldownlist.attributes.add('pulldownListItem', { type: 'entity', description: 'PulldownのリストのContent内のボタン' });
Pulldownlist.attributes.add('verticalScrollbar', { type: 'entity', description: 'PulldownのVerticalScrollbar' });
Pulldownlist.attributes.add('pulldownValues', { type: 'json', schema: [{name:'name', type:'string'}, {name:'value', type:'string'}], array: true, description: 'Pulldownのリストに載せるアイテム' });
Pulldownlist.prototype.initialize = function () {
// PullDownのリストは初回は非表示にするため enabled = falseをする
this.pulldonwList.enabled = false;
this.pulldownListItem.enabled = false;
// PullDownのリストを表示・非表示させます
this.pulldownBotton.element.on('click', function (e) { // PullDownさせるボタンにクリックイベントを作成し以下を処理します。
this.app.once("update", () => { // updateはフレーム毎に発生するイベントで、once()により1フレームだけ処理します。
this.pulldonwList.enabled = !this.pulldonwList.enabled; // 論理否定演算子でtrue/falseを切り替えてPullDownのリストを表示非表示しています。
this.verticalScrollbar.scrollbar.value = 0; // リストにスクロールバーがあるため、表示非表示させる際にスクロール位置を0に戻しています。
});
}, this);
for (i=0; i > this.pulldownValues.length; ++i) { // 配列で登録したリストのアイテムをfor文で処理します。
let pulldownValue = this.pulldownValues[i]; // アイテムごとに変数に定義します。
let itemRef = this.pulldownListItem.clone(); // リスト内のボタンのEntityをクローンしてアイテムごとに作成する準備をします。
itemRef.findByName("Text").element.text = pulldownValue.name; // クローンしたEntityのボタン内のTextというEntityのテキスト情報をアイテムの名前に置き換えます。
itemRef.reparent(this.pulldonwListContent); // クローンしたアイテムを新しい子としてリストに追加します。
itemRef.enabled = true; // アイテムは事前に enabled = false にしていたので true にして表示させておきます。
itemRef.element.on('click', function (e) { // このクローンしたアイテムをクリックしたら以下を処理します。
this.app.once("update", () => {
console.log(pulldownValue);
this.itemSelected(pulldownValue); // itemSelectedにアイテムを引数で渡して処理します。
});
}, this);
}
// リストのサイズであるHeightをアイテムの数に応じて変更するよう処理します。
this.pulldonwListContent.element.height = this.pulldownValues.length * this.pulldownListItem.element.height + 10;
};
Pulldownlist.prototype.itemSelected = function (pulldownValue) { // リストのアイテムがクリックされたときに処理されます。
console.log("selected: ", pulldownValue.name, pulldownValue.value,);
this.pulldownBottonText.element.text = pulldownValue.name; // PullDownさせるボタンのテキストをクリックしたアイテムの名前に置き換えます。
this.pulldonwList.enabled = !this.pulldonwList.enabled; // リストを非表示にします。
this.verticalScrollbar.scrollbar.value = 0; // スクロールを初期位置の0に戻します。
};
スクリプト属性にて、以下を定めています。
- [ pulldownBotton ] PullDownのリストを表示させるためのボタンのEntity。
- [ pulldownBottonText ] そのボタンのテキストのEntity。
- [ pulldonwList ] 表示させるリストのEntity。
- [ pulldonwListContent ] リストのサイズを決めるコンテンツのEntity。
- [ pulldownListItem ] リストのコンテンツ内のアイテムとなるボタンのEntity。
- [ verticalScrollbar ] リストのスクロールバーのEntity。
- [ pulldownValues ] リストのアイテムを配列で登録。name, valueのオブジェクトを持ちます。
コメント
0件のコメント
サインインしてコメントを残してください。