Pixi.js: Force PIXI.Text to render

Created on 27 Jul 2018  路  7Comments  路  Source: pixijs/pixi.js

Can you force PIXI.Text to render the texture (so you can clone the texture, use its width/height, etc.) before you add it to the scene?

```const width = window.innerWidth;
const height = window.innerHeight;
const options = {backgroundColor : 0xffffff};

var renderer = PIXI.autoDetectRenderer(width, height, options);
document.body.appendChild(renderer.view);

const stage = new PIXI.Container();
const style = new PIXI.TextStyle({
fill: "red"
});

const text = new PIXI.Text('Hello World', style);

// Ideally want to force the texture to render here.
// text.texture.width = zero :/

stage.addChild(text);
renderer.render(stage);

// Getting texture works correctly here.
```

Thanks,
Lewis

Most helpful comment

For reference, I would intend never to add it to the stage directly. I'm trying to use with Spine, So something like this;

var text = new PIXI.Text(message, style);

// FORCE TEXT TEXTURE TO RENDER??

spineAnimation.hackTextureBySlotName('textSlot', text.texture, {width: 300, height: 300})

All 7 comments

For reference, I would intend never to add it to the stage directly. I'm trying to use with Spine, So something like this;

var text = new PIXI.Text(message, style);

// FORCE TEXT TEXTURE TO RENDER??

spineAnimation.hackTextureBySlotName('textSlot', text.texture, {width: 300, height: 300})

Make yourself at home in pixi and pixi-spine repos: https://github.com/pixijs/pixi.js/blob/dev/src/core/text/Text.js#L120 . The level of hacks you are accessing requires basic knowledge of how to look through pixi files. believe me, after hackTextureBySlotName there'll be ten more small things that aren't mentioned in docs ;)

text.updateText() will force updating the canvas texture that the text is renderer to
text.updateText(true) if you wish to respect the dirty flag

Thanks very much for the speedy responses. Missed that method somehow.

Hey @siwel !

Nice hack :-)

I'm trying to use the same approach as you did (pixi.js + spine) and dealing with text is hell...
The text is streched/squeezed if the slot in spine does not match the text.

Did you find any workaround this issue?

Alternative if you want keep the pixi text feature, it create slots named txtArea with 1px*1px in spine editor.
and

const text = new PIXI.Text("dynamic text",style);
spine.skeleton.findSlot('txtArea').currentSprite.addChild(text);

Maybe not performance friendly !

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Makio64 picture Makio64  路  3Comments

distinctdan picture distinctdan  路  3Comments

SebastienFPRousseau picture SebastienFPRousseau  路  3Comments

readygosports picture readygosports  路  3Comments

lunabunn picture lunabunn  路  3Comments