Changing the Renderer's Resolution

[ghost]

Is there a way to update the renderer's resolution? I tried renderer.resolution = window.devicePixelRatio, but it just makes the screen flash white.

[ghost]

The best temporary workaround that I came up with is to destroy and re-create the renderer, passing the new resolution to autoDetectRenderer. This works but maybe isn't the most efficient way to do it. Also, there's maybe still an issue with repeatedly destroying and re-creating the renderer: #2233

It seems like there should be a simple function call to do this, like renderer.setResolution, that minimizes the amount of extra processing and dead resources.

[GoodBoyDigital]

Hi @jaspervaz! Curious about what is your use-case for this is?
Cheers!

[ivanpopelyshev]

Yes, it is. I will make that function later, but this might work for now:

renderer.resolution = 2;
renderer.rootRenderTarget.resolution = 2;
renderer.resize(w-1, h);
renderer.resize(w, h);

Don't forget to update ALL FILTERS RESOLUTIONS.

[themoonrat]

And don't forget to update the interaction plugin resolution too

[ivanpopelyshev]

@jaspervaz

EXACTLY, Zoom changes, that's what i want to do too :)
For now assume that "renderer.screen" is rectangle of screen in logical coords, while "renderer.view" is canvas and thus width and height are multiplied by resolution.

[ghost]

Check like this to make it work for both renderers:

if (renderer.rootRenderTarget) { renderer.rootRenderTarget.resolution = newResoultion; }

Also, it seems to work the same without the following line, I think because zooming changes both the resolution and the window dimensions, but maybe other use cases require it:

renderer.resize(w-1, h);

[ivanpopelyshev]

Yes, I agree.

[starInEcust]

@ivanpopelyshev I want to scale the screen.
Using your method will make the canvas blurred.
Using my method resolution can not be greater than 20

https://jsfiddle.net/starCoding/p49u34hd/8/

[ivanpopelyshev]

@starInEcust Why do you need resolution more than 20? Resolution is not about scaling, its browser zoom. Scale is part of stage transform.

[starInEcust]

@ivanpopelyshev I want to enlarge the the renderer and keep the text and svg pictures won't be distorted

[ivanpopelyshev]

@starInEcust I solved that kind of issues by manual adjusting of scale and font size.

There's also new solution: use SDF fonts. https://github.com/PixelsCommander/pixi-sdf-text

[starInEcust]

@ivanpopelyshev how about svg? I just want to make a text editor with cool animation, in the print preview can zoom in and out, but does not affect the typesetting.
And is there any problem with the use of resolution magnification?

[ivanpopelyshev]

That's very unusual use-case for pixi. You have to change zoom through "stage.scale" and adjust resolution only of SVG and text, not the resolution of whole renderer. In your case screen size of renderer is fixed, and when you change resolution, canvas dimensions are becoming too big, you're hitting 16k x 16k pixels size!

I didnt use SVG in pixi so I dont know how to adjust resolution for it :)

[starInEcust]

Thank you very much！Maybe I should open an issue to discuss this question :(

[englercj]

Going to close this issue since it seems answered, feel free to open another if you have another question!

[lock]

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.