voidmen

PIXI.Text with solid color background

Recommended Posts

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

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites
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;
	},

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.