Pixi resize all containers/sprites/animated sprite/nine slace pane

[jakubdev]

Hello,

I try to resize all pixi.js stuff(containers/sprites/animated sprite/nine slace pane) that are on stage when browser window is resized. I can't find good solution for that as scaling up or down container influence also all childrens. Is there any way to disable this "feature"? 

Atm I think about RXJS takeLast for event(resize) and destroying view with everything and redrawing them using same textures like in first render. 

Tried to make some recursive function that was resizing everything by scale, but everything got messy.

 

 

Really appreciate help with that issue.

[ivan.popelyshev]

> I can't find good solution for that as scaling up or down container influence also all childrens

that's the problem - so far no one found solution good enough to embed in pixi. There has to be a layout manager for that, and pixi doesnt have it

Also if you want nothing to be scaled.. then why scale at all? I mean, you want to scale container to ...what? scale only position of children and not children themselves?

Edited July 6, 2021 by ivan.popelyshev

[ivan.popelyshev]

There's a way to ignore scale of parent:

take https://github.com/pixijs/pixijs/blob/dev/packages/math/src/Transform.ts#L230

copy it, and specify "wt.a = lt.a; wt.b=lt.b;wt.c=lt.c;wt.d=lt.d" 

you can put that function in any container like "container.transform.updateTransform = myUpdateTransform" , after that container wont obey parent scale.

[jakubdev]

19 hours ago, ivan.popelyshev said:

> I can't find good solution for that as scaling up or down container influence also all childrens

that's the problem - so far no one found solution good enough to embed in pixi. There has to be a layout manager for that, and pixi doesnt have it

Also if you want nothing to be scaled.. then why scale at all? I mean, you want to scale container to ...what? scale only position of children and not children themselves?

Not really nothing I want to after resize for example from 812x375 to 1024x768 make every sprite bigger with fonts also changing size. 

I tried to scale only app.stage, but it produces strange behaviour after view change. For example I resize in login screen to 1024x768 and everything looks nice other than fonts that with proper algorithm can look good also, but after view change that destroy all childrens of app.stage and creates new container for view it is 3-7 times bigger than actual resolution of device and that's only resize to bigger resolution. Resize to smaller resolutions is diffrent kinda story.

[jakubdev]

19 hours ago, ivan.popelyshev said:

There's a way to ignore scale of parent:

take https://github.com/pixijs/pixijs/blob/dev/packages/math/src/Transform.ts#L230

copy it, and specify "wt.a = lt.a; wt.b=lt.b;wt.c=lt.c;wt.d=lt.d" 

you can put that function in any container like "container.transform.updateTransform = myUpdateTransform" , after that container wont obey parent scale.

Problem with this is that even tho containers or sprites have they positions they are put on x:0,y:0.

Edited July 7, 2021 by jakubdev

[ivan.popelyshev]

Only those four lines have to be changed: https://github.com/pixijs/pixijs/blob/0d01a732dc65326e63e891ab4639a469836876e2/packages/math/src/Transform.ts#L256-L259