ユーザインターフェイス - 進行バー

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');

// The entity that shows the fill image
ProgressBar.attributes.add('progressImage', {type: 'entity'});
// The maximum width of the fill image
ProgressBar.attributes.add('progressImageMaxWidth', {type: 'number'});

ProgressBar.prototype.initialize = function() {
    // use our own rect object to set the size of
    // the progress bar
    this.imageRect = this.progressImage.element.rect.clone();

    // initialize progress to 0
    this.setProgress(0);
    // if true the progress bar will increase
    // otherwise it will decrease in update
    this.increase = true;
};

// Set progress - value is between 0 and 1
ProgressBar.prototype.setProgress = function (value) {
    // clamp value between 0 and 1
    value = pc.math.clamp(value, 0, 1);

    this.progress = value;

    // find the desired width of our progress fill image
    var width = pc.math.lerp(0, this.progressImageMaxWidth, value);
    // set the width of the fill image element
    this.progressImage.element.width = width;

    // Set the width of the element's rect (rect.z) to be the same
    // value as our 0-1 progress.
    // This is so that the fill image will only show the portion
    // of the texture that is visible
    this.imageRect.copy(this.progressImage.element.rect);
    this.imageRect.z = value;
    // force rect update
    this.progressImage.element.rect = this.progressImage.element.rect;
};

// Increase or decrease the progress automatically
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の間の進行をループします。このスクリプトで重要なことは、プログレスバーのサイズを適切に変更するために、塗りつぶし画像のwidthと rectをどのように変更するかです。

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.