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 18]

I use a PIXI.Graphics personally. 

[jonforum 20]

// 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 20]

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 18]

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 20]

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!

[Wilco93 0]

On 4/16/2018 at 4:04 PM, 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;

Which advice would you offer if I were to need textures of a different color? 

Right now I am generating a texture for each color.

Edit: Aha that's what the tints are for. For anyone interested, this was my code for doing so before:

	generateColoredTexture: function(hexColor) {
		let painter = new PIXI.Graphics(true);
		painter.beginFill(hexColor);
		painter.drawRect(0, 0, 2, 2); //(0, 0, 1, 1); does not work
		painter.endFill();
		let texture = painter.generateCanvasTexture();
		painter.destroy();
		return texture;
	},