Resizing Sprites "Losslessly"

[peterje]

Hi Pixi Devs,

 

First post here. This issue has plagued me for days. My PIXI project requires Sprites to update their scale "on the fly". I need this to work with minimal quality loss. My goal is to get an effect like Scratch has obtained.  At multiple different sizes, the texture quality remains perfect. I know Scratch uses SVGs for the perfect resolution but that has been a nightmare in PIXI. According to the Scratch Source Code, the  SVGSkin class uses an array of 8 MIPS that can be hot swapped as the size is modified. How could I implement this in PIXI? Further, how does an array of 8 MIPs provide enough samples for the size range of 0 to ~400 Scratch allows?

 

Thanks!

Peter

[ivan.popelyshev]

Hello, and Welcome to the forums!

I did that thing multiplle times, it requires some knowledge of WebGL and 2d.

To automatically use mipmaps in webgl, your texture size has to be power-of-two. You can use bigger texture for SVG generation and cut it using texture frame.

Bigger texture for sVG generation means that you have to modify SVGResource, maybe make your own version.

Texture frame, well, you can specify it on texture creation

If you want a demo that shows that, you have to wait till weekend. If you dont want to wait - go dig into source code.

[peterje]

8 hours ago, ivan.popelyshev said:

Hello, and Welcome to the forums!

I did that thing multiplle times, it requires some knowledge of WebGL and 2d.

To automatically use mipmaps in webgl, your texture size has to be power-of-two. You can use bigger texture for SVG generation and cut it using texture frame.

Bigger texture for sVG generation means that you have to modify SVGResource, maybe make your own version.

Texture frame, well, you can specify it on texture creation

If you want a demo that shows that, you have to wait till weekend. If you dont want to wait - go dig into source code.

 Thanks Ivan! Just the person I was hoping to hear from. I'll look into everything you talked about but I would love to see a little demo some time. Thanks!

[peterje]

On 10/30/2020 at 2:17 AM, ivan.popelyshev said:

Hello, and Welcome to the forums!

I did that thing multiplle times, it requires some knowledge of WebGL and 2d.

To automatically use mipmaps in webgl, your texture size has to be power-of-two. You can use bigger texture for SVG generation and cut it using texture frame.

Bigger texture for sVG generation means that you have to modify SVGResource, maybe make your own version.

Texture frame, well, you can specify it on texture creation

If you want a demo that shows that, you have to wait till weekend. If you dont want to wait - go dig into source code.

Do you have any examples you can point me to?

[ivan.popelyshev]

You are not the only one who asked me for this demo last week, so im gonna do it . soon.

[peterje]

On 11/3/2020 at 2:54 AM, ivan.popelyshev said:

You are not the only one who asked me for this demo last week, so im gonna do it . soon.

Thanks!

[peterje]

Bump  @ivan.popelyshevI dont really need a demo if you are too busy but if you know of a public codebase that uses this technique I would appreciate it!

Edited November 15, 2020 by peterje

[peterje]

Bump

[ivan.popelyshev]

yeah, i remember, i was busy )