[Question] PixiJS, camera, viewport and scaling

[kaphula]

Hello,

I am having some hard time understanding the scaling in Pixi. Let's say I want to have a "camera" that is unaffected by the size of the window Pixi is running. So if I resize the window to be larger, the objects in the view should appear larger as well while keeping the correct aspect ratio that is predefined at start. Likewise, if I resize the window to be smaller the objects should appear smaller. The way Pixi works by default is that objects have size in pixels and changing the window size does not affect the objects' sizes, the objects' size stay the same but the window's size changes. This means that on devices with higher resolutions and larger windows the drawables appear smaller and vice-versa.

In Libgdx there's a concept of viewports, and one setting for the viewport is called FitViewport. With FitViewport you predefine the screen size in pixels, for example 800x600, which represents the area that should be always visible inside the window the application is running. If the window is resized, the predefined screen size adjusts inside the window with scaling and black borders are inserted for the remaining space of the window. This ensures that the graphics drawn will always remain in correct proportion to each other no matter what the aspect ratio or size of the outer window is.

Are there any built-in tools for handing situations like this in Pixi? Am I required to render everything I want to draw into a BaseTexture and manually adjust and scale that rendered BaseTexture to the screen depending on what's the current resolution of the window Pixi is running?

[kaphula]

After reading the source code of pixi-viewport I came up with a solution that works well for my purposes. The following function will scale your stage and its contents to the target device window based on the supplied virtual resolution. The virtual resolution determines the scaling factor in pixels and the aspect ratio of the view, which will always remain the same regardless of the target device window dimensions. With center = true the global origin will be always in the middle of the screen.

function fit(center: boolean, stage: PIXI.Container, screenWidth: number, screenHeight: number, virtualWidth: number, virtualHeight: number) {
    stage.scale.x = screenWidth / virtualWidth
    stage.scale.y = screenHeight / virtualHeight

    if (stage.scale.x < stage.scale.y) {
        stage.scale.y = stage.scale.x
    } else {
        stage.scale.x = stage.scale.y
    }

    const virtualWidthInScreenPixels = virtualWidth * stage.scale.x
    const virtualHeightInScreenPixels = virtualHeight * stage.scale.y
    const centerXInScreenPixels = screenWidth * 0.5;
    const centerYInScreenPixels = screenHeight * 0.5;

    if (center) {
        stage.position.x = centerXInScreenPixels;
        stage.position.y = centerYInScreenPixels;
    } else {
        stage.position.x = centerXInScreenPixels - virtualWidthInScreenPixels * 0.5;
        stage.position.y = centerYInScreenPixels - virtualHeightInScreenPixels * 0.5;
    }
}

On your window resize function you can call it like this:

        window.onresize = () => {
            this.pixiInstance.renderer.resize(pixiDiv.clientWidth, pixiDiv.clientHeight)
            fit(true, this.pixiInstance.stage, pixiDiv.clientWidth, pixiDiv.clientHeight, this.virtual_w, this.virtual_h)
        }

[codergautam]

very helpful, ty!