我如何在PixiJS中制作进度条？

Question

如何在PixiJS中制作这样的进度条？ Screenshot

Answer 1

我解决了！

    function BalanceBoard(data) {
    this.gameObject = data['gameObject'];
    this.text = data['text'];
    this.posX = data['posX'];
    this.posY = data['posY'];

    this.spriteText;

    this.spriteBorder = {
        'frameindex': 0,
        frames: [
            'stats-border-1.png'
        ]
    };

    this.spriteBar = {
        'frameindex': 0,
        frames: [
            'stats-bar-1.png'
        ]
    };
}

BalanceBoard.prototype.build = function() {
    this.spriteBorder['texture'] = PIXI.Texture.fromFrame(this.spriteBorder['frames'][0]);
    this.spriteBorder['object'] = new PIXI.Sprite(this.spriteBorder['texture']);
    this.spriteBorder['frameindex'] = 0;
    this.spriteBorder['object'].anchor.x = 0.5;
    this.spriteBorder['object'].anchor.y = 0.5;

    this.spriteBorder['object'].position.x = -this.spriteBorder['object'].width;
    this.spriteBorder['object'].position.y = -this.spriteBorder['object'].height;
    gameObject.getStage().addChild(this.spriteBorder['object']);

    this.spriteBar['texture'] = PIXI.Texture.fromFrame(this.spriteBar['frames'][0]);
    this.spriteBar['object'] = new PIXI.Sprite(this.spriteBar['texture']);
    this.spriteBar['frameindex'] = 0;
    this.spriteBar['object'].anchor.x = 0.5;
    this.spriteBar['object'].anchor.y = 0.5;


    this.spriteBar['object'].position.x = -this.spriteBar['object'].width;
    this.spriteBar['object'].position.y = -this.spriteBar['object'].height;
    gameObject.getStage().addChild(this.spriteBar['object']);

    this.spriteText = new PIXI.Text(this.text, {
        font: '600 10pt Open Sans',
        fill: 'white'
    });

    this.spriteText.position.x = this.getPosX() - this.spriteText.width / 2;
    this.spriteText.position.y = this.getPosY() - this.spriteText.height / 2;

    gameObject.getStage().addChild(this.spriteText);
};

BalanceBoard.prototype.update = function() {
    this.spriteText.text = this.text;

    this.spriteBorder['object'].position.x = this.getPosX();
    this.spriteBorder['object'].position.y = this.getPosY();

    this.spriteBar['object'].position.x = this.getPosX();
    this.spriteBar['object'].position.y = this.getPosY();

    this.spriteText.position.x = this.getPosX() - this.spriteText.width / 2;
    this.spriteText.position.y = this.getPosY() - this.spriteText.height / 2;
};

BalanceBoard.prototype.getPosX = function() {
    return this.spriteBorder['object'].width / 2 + this.posX;
};

BalanceBoard.prototype.getPosY = function() {
    return this.spriteBorder['object'].height / 2 + this.posY;
};