Display text inside a display object hierarchy independent of it's parents scale

[bobmartin]

Hello,

I'm creating a front end for a graph display application.  It displays a sort of fancy force directed graph, so there are nodes and lines.

I'm using pixi-viewport to contain my main scene so it can be zoomed/panned/culled.  
Once you zoom in past a certain limit the nodes will start to display a text label across the center.  I'm using PIXI.Text for these as I don't control what characters will be displayed.  I want the text to look crisp so I'm willing to take the hit of generating new text textures on each zoom action.  This isn't too expensive as you have to be so far zoomed into to activate the labels that there isn't to many of them on screen at one time.

The problem I have is the the text is inside a container that has the hierarchy for a graph node, its shadow/outer selection, inner ring, icon etc so it inherits the world transform for scale and it causes the text to scale and then look bad.  I don't want the text to scale as I regenerate it at a suitable text size each zoom to look perfect.

I tried the naive solution of trying to apply an inverse 1/parent-scale which sort of works some of the time but not really.

I tried putting the text on a layer above the viewport and manually positioning them and resizing them, this worked perfect till I dragged one node over another and realised z-indexing is broken now that they aren't drawn with the rest of their node display objects.

Does anyone know if there is a way to stop the worldtransform from applying to a child/child container? 

I'm currently considering creating my own container subclass that somehow sets the world transform to identity and just position its local x,y at world co-ordinates inside the viewport, this container will be added into the node hierarchy and contain the text item. I'll need to browse through the code a bit to see how.  But I'm not sure if it is possible, even a good idea, or complete madness.  
 

[ivan.popelyshev]

I did it many times , but it requires hack of Transform class. Like here: https://github.com/pixijs/pixi-projection/blob/master/src/base/LinearProjection.ts . That's how I work with 3d and 2.5d transforms.

Even more, there are good models for transforms like in Spine, but pixi-spine adds them only for spine bones, not for all objects. restrictions on rotation, scale, mirror.

If you dont get how to make it work for your case, well, i'll have to make a demo later

[ivan.popelyshev]

Yeah, one more, VERY SIMPLE way to do that, just for Sprite internals: hack calculateVertices.

https://github.com/pixijs/pixi.js/blob/dev/packages/sprite/src/Sprite.js#L221

"myText.calculateVertices = hackyFunction" , and function  uses only "tx ty " part of transform.

[ivan.popelyshev]

Your idea is not crazy. Not bad for a first post, welcome to the club!

[jonforum]

yeah this can be useful, i tried a ugly thing from long ago.

It was look similar to this ??
https://pixiplayground.com/#/edit/WIOs7TDWP_4ABV_2fiRnC

The only solution i found for get good text quality on zoom inside a container, it multiply the font size and downscale the sprite,  if i need zoom on text it will be fine but affect memory and performance.

 

[bobmartin]

Thanks for the responses.

I've gone with the calculateVertices method replacement for now, it appears to work perfectly.