Setting canvas pixelRatio

[Sahil]

Hi,

I was just trying to set devicePixelRatio for PIXI but when I resize the canvas, all sprites get offset to bottom left. I googled but didn't find any proper approach to set resolution and resize canvas.

In following demo you will see, extra space gets added at the top of the canvas. Am I suppose to change something else?

https://codepen.io/Sahil89/pen/QZPZJV?editors=1010

[ivan.popelyshev]

Pass the resolution to options, dont set it after creation. There's no magic setter of resolution that changes current framebuffer properties and passes that resolution everywhere.

var app = new PIXI.Application(500, 500,{
  view: document.getElementById('c') , resolution: 2, autoResize: true
});

When you work with resolution, you have to be aware of several things.

1. differences between "app.screen.width" and "app.view.width".

2. What is "autoResize" , and how can it be done manually if you prefere to do your CSS. https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/SystemRenderer.js#L225

3. filters in pixi-v4 work with PIXI.settings.FILTER_RESOLUTION . Each time you create a filter, it takes resolution param from settings. Either set it in settings before creation of filters, either set it manually for all filters.

4. If you really want to change resolution after renderer creation - look in sources where it goes. _activeRenderTarget has to be changed too.

5. @2x textures. Look how texturepacker or whatever tools you use export better resolution images.

If you do everything the right way, your screen will show the same thing with resolution:2 as with resolution:1, no need to scale the stage.

Please don't treat pixi as a black box. PixiJS Application class is the base that you have to clone and do on your own.

You also have to be aware of WebGLRenderer/SystemRenderer internals if you encounter any global problem, like this resolution trick.

[Sahil]

I thought it will be similar to how it can be set in Three JS. And thanks for additional info, that will be useful in future.