Sign in to follow this  
bobmartin

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

Recommended Posts

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.  
 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.