Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

PIXI.Text with solid color background


voidmen
 Share

Recommended Posts

// 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;
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 4 months later...
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;
	},

 

Link to comment
Share on other sites

  • 1 year later...
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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...