PIXI.Text with solid color background

[voidmen]

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]

I use a PIXI.Graphics personally. 

[jonforum]

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

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]

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]

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]

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]

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

 

[Nagaraju]

On 9/6/2018 at 4:24 PM, Wilco93 said:

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

 

I have tried but not working

Is there any solution to draw background color for text

[jonforum]

29 minutes ago, Nagaraju said:

I have tried but not working

Is there any solution to draw background color for text

here for you !
https://www.pixiplayground.com/#/edit/OFYvS42WwZrrki2wOTey1

note:
You do not have to generate a graphic texture for make sprite, it can also work without.

[ivan.popelyshev]

On 4/16/2018 at 5:05 PM, jonforum said:

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

not anymore  v5 is here

@Nagaraju you can override one of pixi text methods ("myText.updateText = function() ... ) and add a background in the canvas2d context. If you know what canvas 2d context is. It should be simple. Original source is here: https://github.com/pixijs/pixi.js/blob/dev/packages/text/src/Text.js#L128