Pixi.js: How to best set scene and assets scale variant, on desktop/mobile/retina for performance

[kulabros]

Hi there,

in my case, there is a PIXI app game, that uses pixi-animate exported assets, made in base resolution 1280x666px. Using pixi-packer created spritesheets and scale variants, I can set to 1:1 for desktop, and halfsized for mobiles. This works great. If I'd need to add retina resolution, I'd gfx to prepare higher resolution assets and animations, and than use them as retina, and downscaled to desktop and mobile, no problem, works great. Canvas on page is set to match game base size, and resizing to fit full page area is done by CSS scale transform.

How about devices with higher devicePixelRatio than 1 (retina displays, mobiles) .. Should I set PIXI resolution parameter to pixel ratio and downscale by css? .. or is native behaviour ok for all retina/non retina cases, meaning about the performance?

What if I have higher resolution for retina (HD) .. in this case, I expect, that the resolution needs to be set to 1 on retina too, because in other case, it render double amount of square pixels, or am I wrong, and this is done somewhere low levet, and it doesn't affects the performance?

Thanks

[ivanpopelyshev]

You are right in all cases. Tests should show you whether or not it is good to set devicePixelRatio. For macbooks with retina screen its better to use "resolution=1". Ipads and iphones can handle better resolution, but you have to test them first.

Some hints:

1. "renderer.screen" is the rectangle of screen coordinates, not affected by resolution, its always the same. You can use it as "filterArea" for top-level filters.
2. "renderer.view" is the game canvas, and "renderer.width" is actually the same as "renderer.view.width", its affected by resolution, beware!
3. https://github.com/pixijs/pixi-compressed-textures has a tool to automatically determine which resource do you need. You can use it if its applicable for your case and you dont want to manage 100 files with different suffixes. You can also look in the code as reference, and write your own stuff instead.
4. filters have resolution. If you set "PIXI.settings.RESOLUTION" all new filters will have that resolution.

[kulabros]

Ok great, sounds good, thank you! Thanks for all the hints. About 4 - filters resolution. What values are allowed, is it like dpi, or pixels, quality percents?

[ivanpopelyshev]

Its dpi. I dont know about fractional, I know that 1,2,3,4 are working fine.

The key is to have same "screen" coordinates for all resolutions. Its like css pixels, Resolution is dpi, and filters need correct dpi to multiply "screen" bounds of object to get real size of framebuffer for allocation.

[stbaer]

Curious, why is resolution = 1 better for retina mavbooks?

[ivanpopelyshev]

@stbaer because graphics cards on some macbooks cant handle webgl on retina. Better to make it switchable , so use can turn on "HD mode"

[stbaer]

:+1: tx ivan

[lock[bot]]

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.