Tutorials

ユーザインターフェイス - プログレスバー

Elementコンポーネントを使用するプログレスバー。フルシーンを参照してください

組み込みのElementsを使用してプログレスバーを簡単に作成することができます。このチュートリアルでは、数秒ごとに空から終了をループするプログレスバーがあります。

階層

階層内でUIは次のようになります:

階層

スクリーン設定

スクリーンは次のように設定されています:

スクリーン

2Dスクリーンなので、Screen Spaceをチェックしました。Reference Resolutionは、目標とする解像度です。この場合は1080 x 1920です。Scale ModeのBlendを選択して解像度の変更に適応し、Scale Blendを1に設定して、スクリーンが高さの変更に適応するようにします 。

スクリーンには、POWERテキストを表示する子Text Elementと、プログレスバーを示すProgress Bar というエンティティがあります。

プログレスバーの設定

プログレスバーは2つの要素で構成されています。背景画像と塗りつぶし画像です。

この例では 背景画像はProgress Barエンティティです。画像Elementがあり、プログレスバーの背景画像が表示されます:

背景画像

この例の塗りつぶし画像は、 Fill Imageエンティティです。Progress Bar エンティティの子であり、プログレスバーの塗りつぶしを示すImage Elementを持ちます。この画像は親の背景画像の左に固定されています。これにより、プログレスバーが伸びるよう、要素の幅を変更することができます。

塗りつぶし画像

スクリプト

Progress Barエンティティにはプログレスバーがどのようにリサイズされるかを制御するスクリプトがあります。

var ProgressBar = pc.createScript('progressBar');

// 塗りつぶし画像を表示するエンティティ
ProgressBar.attributes.add('progressImage', {type: 'entity'});
// 塗りつぶし画像の最大幅
ProgressBar.attributes.add('progressImageMaxWidth', {type: 'number'});

ProgressBar.prototype.initialize = function() {
    // 進行を0に初期化
    this.setProgress(0);
    // trueの場合、プログレスバーが増加します
    // それ以外の場合は更新時に減少します
    this.increase = true;
};

// 進行状況を設定する - 値は0と1の間
ProgressBar.prototype.setProgress = function (value) {
    // 0と1の間のクランプ値
    value = pc.math.clamp(value, 0, 1);

    this.progress = value;

    // プログレスの塗りつぶし画像の希望の幅を見つける
    var width = pc.math.lerp(0, this.progressImageMaxWidth, value);
    // 塗りつぶし画像要素の幅を設定
    this.progressImage.element.width = width;

    // 要素のrect(rect.z)の幅を0-1の進行と
    // 同じ値に設定してください。
    // これは、塗りつぶし画像が表示されるテクスチャ部分のみを
    // 表示するようにするためです
    this.progressImage.element.rect.z = value;
    // rectの更新を強制
    this.progressImage.element.rect = this.progressImage.element.rect;
};

// 進行状況を自動的に増減
ProgressBar.prototype.update = function(dt) {
    var diff = this.increase ? dt : -dt;
    this.setProgress(this.progress + diff);

    if (this.progress >= 1)
        this.increase = false;
    else if (this.progress <= 0)
        this.increase = true;
};

スクリプトには2つの属性があります:塗りつぶし画像と、その画像の最大幅を示すエンティティです。進行を0と1の間の値に設定するsetProgress関数があります。

updateメソッドは基本的に0と1の間の進行をループします。このスクリプトで重要なことは、プログレスバーのサイズを適切に変更するために、塗りつぶし画像のwidthrectをどのように変更するかです。

Changing the width makes the fill image larger and changing the rect makes sure that we only show the portion of the texture that is visible, so that we avoid stretching the visible texture. Here is the API reference for rect.

This site is translated by the community. If you want to get involved visit this page