PIXI.Text with solid color background

[voidmen 1]

hey guys,

I'm wondering if there is an easy and efficient way to add background to the PIXI.Text object. For now, my plan is to add a scaled solid color image as background and put them in the right position. Not sure if this is the recommended way.

 

Thanks

[botmaster 14]

I use a PIXI.Graphics personally. 

[jonforum 4]

// text

const textSprite = new PIXI.Text(`blabla`, {fill:"#ff8000"});

const txtBG = new PIXI.Sprite(PIXI.Texture.WHITE);

txtBG.width = textSprite.width,txtBG.height = textSprite.height;

// cage text

const cage = new PIXI.Container();

cage.addChild(txtBG,textSprite);

// add reference for easy debug

cage.name = "textSprite";

cage.textSprite = textSprite;

cage.txtBG = txtBG;

[jonforum 4]

1 hour ago, botmaster said:

I use a PIXI.Graphics personally. 

Graphics too but a bit heavier for the peformances.
Sprites are more lightweight.

[botmaster 14]

Good to know, how much perf difference is there? Like let's say 50 graphics vs 50 sprites? How much fps would that cost?

[jonforum 4]

32 minutes ago, botmaster said:

Good to know, how much perf difference is there? Like let's say 50 graphics vs 50 sprites? How much fps would that cost?

https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips

[voidmen 1]

17 hours ago, jonforum said:

// text

const textSprite = new PIXI.Text(`blabla`, {fill:"#ff8000"});

const txtBG = new PIXI.Sprite(PIXI.Texture.WHITE);

txtBG.width = textSprite.width,txtBG.height = textSprite.height;

// cage text

const cage = new PIXI.Container();

cage.addChild(txtBG,textSprite);

// add reference for easy debug

cage.name = "textSprite";

cage.textSprite = textSprite;

cage.txtBG = txtBG;

Thanks a lot man!