ユーザインターフェイス - リーダーボード
Elementコンポーネントを使用しているリーダーボード。フルシーンを参照してください。
このチュートリアルでは、組み込まれたElementsを使用して簡単なリーダーボードを作成する方法を示します。リーダーボードには、JSONアセットからデータがプログラム的に埋め込まれています。
階層
階層内のUIは次のようになります:
ご覧のように、タイトルとサブタイトルを表示する2つの要素と、リーダーボードデータの背景やパネルとして使用される2つの画像要素を持つ2D Screenがあります。あなたのスコア
の下に、リーダーボードのプレーヤーのポジションを表示し、`リーダーボード の下に残りを表示します。
Entry Template
と呼ばれる無効なエンティティがあります。これは、テンプレートの各行に使用するテンプレートです。そのテンプレートをJSONアセットに存在する各リーダボードエントリに対して複製し、それぞれのパネルの下に各クローンを追加します。
スクリーン設定
スクリーンは次のように設定されています:
2Dスクリーンなので、Screen Spaceをチェックしました。Reference Resolutionは、目標とする解像度です。この場合は1080 x 1920です。Scale ModeのBlendを選択して解像度の変更に適応し、Scale Blendを1に設定して、スクリーンが高さの変更に適応するようにします 。
画面エンティティには、leaderboard
スクリプトを含むスクリプトコンポーネントもあります。以下でご確認いただけます。
パネル設定
各パネルには、その背景を示す画像要素があります。パネルの下に、エントリテンプレートのクローンをプログラム的に追加します。パネルはスクリーンの中央に固定されます。
エントリテンプレートの設定
階層内の各リーダーボード行のテンプレートは次のようになります:
リーダーボード上の位置、プレイヤーの名前、プレーヤーのスコア、'PTS'というラベルを表示するための4つの子テキスト要素があります。
Entry Template
自体がグループ要素です:
グループ要素には分割された水平アンカーがあります。
水平アンカーは等しくない(0と1)ので、スクリーンがサイズ変更された場合、要素が自動的に拡大されて水平エリア全体を満たします。端からのわずかな隙間を許すために、50ピクセルの水平余白もあります。余白は、アンカーが分割されている場合にのみ設定できます。
では、グループの子の残りの部分を見てみましょう。
位置
位置は左に固定されています:
名前
名前は左に固定され、右に少し動かされています:
スコア
スコアは右に固定されています
ポイント
ポイントは右に固定されています
スクリプト
JSONアセットを読み込みリーダーボードを塗りつぶす leaderboard
スクリプトです:
var Leaderboard = pc.createScript('leaderboard');
// 複製するテキスト入力テンプレート
Leaderboard.attributes.add("template", {type: "entity"});
// 個人スコアの親リーダーボード
Leaderboard.attributes.add("personal", {type: "entity"});
// 上位10位の親リーダーボード
Leaderboard.attributes.add("leaderboard", {type: "entity"});
Leaderboard.prototype.initialize = function() {
var self = this;
this.entries = [];
this.load(function (data) {
self.clear();
// 個人用エントリを追加する
var y = -75;
self.addEntry(self.personal, y, data.personal.position, data.personal.name, data.personal.score);
// トップ10を追加
y = -60;
for (var i = 0; i < Math.min(data.leaderboard.length, 10); i++) {
self.addEntry(self.leaderboard, y, i+1, data.leaderboard[i].name, data.leaderboard[i].score);
y -= 99; // offset each entry
}
});
};
// すべてのリーダーボードエントリをクリアする
Leaderboard.prototype.clear = function () {
for (var i = 0; i < this.entries.length; i++) {
this.entries[i].destroy();
}
this.entries = [];
};
// リーダーボードに新しいエントリを追加する
Leaderboard.prototype.addEntry = function (parent, y, position, name, score) {
var entry = this.template.clone();
entry.enabled = true;
entry.findByName("Position").element.text = position.toString();
entry.findByName("Name").element.text = name.toUpperCase();
entry.findByName("Score").element.text = score.toString();
this.entries.push(entry);
parent.addChild(entry);
entry.translateLocal(0, y, 0);
};
// リーダーボードのデータの読み込み模擬。このデモでは、プロジェクトのJSONファイルからデータを取得します
// あなたのプロジェクトでは、サーバのバックエンドからダウンロードできます
Leaderboard.prototype.load = function (callback) {
var asset = this.app.assets.find("leaderboard-data.json");
asset.ready(function () {
callback(asset.resource);
});
this.app.assets.load(asset);
};