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; 
};