voidmen 1 Report post Posted April 16 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 Share this post Link to post Share on other sites
botmaster 14 Report post Posted April 16 I use a PIXI.Graphics personally. Share this post Link to post Share on other sites
jonforum 4 Report post Posted April 16 // 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; 1 voidmen reacted to this Share this post Link to post Share on other sites
jonforum 4 Report post Posted April 16 1 hour ago, botmaster said: I use a PIXI.Graphics personally. Graphics too but a bit heavier for the peformances. Sprites are more lightweight. Share this post Link to post Share on other sites
botmaster 14 Report post Posted April 16 Good to know, how much perf difference is there? Like let's say 50 graphics vs 50 sprites? How much fps would that cost? Share this post Link to post Share on other sites
jonforum 4 Report post Posted April 16 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 Share this post Link to post Share on other sites
voidmen 1 Report post Posted April 17 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! Share this post Link to post Share on other sites