Fixed "Camera" with Resizing

[chilldill]

Hey guys, I'm brand new to PixiJS and have an issue that i can't seem to figure out. I'm working on a real time multiplayer game where there is a larger map ~3200 x 3200 and players are free to roam. However I want each players "camera" to only show a certain number of pixels so that someone with a large screen wont have an advantage over someone with a small screen. All the game simulation is handled on the server side. I know how to setup an on resize handler I'm just struggling with which values to update. I was able to fudge this with plain javascript like so: (I only every want to show 640x 360 pixels)

const setCanvasSize = () => {
    console.log('Resizing canvas');
    CANVAS_WIDTH = window.innerWidth;
    CANVAS_HEIGHT = window.innerHeight;


    const ratio = 16 / 9;
    if (CANVAS_HEIGHT < CANVAS_WIDTH / ratio) {
      CANVAS_WIDTH = CANVAS_HEIGHT * ratio;
    } else {
      CANVAS_HEIGHT = CANVAS_WIDTH / ratio;
    }


    canvas.width = 640;
    canvas.height = 360;

    canvas.style.width = `${CANVAS_WIDTH}px`;
    canvas.style.height = `${CANVAS_HEIGHT}px`;
  };

And now I need to replicate a similar behavior but am having some trouble.

 

Desired effect is like so: this is a screen from my hacky version..

[ivan.popelyshev]

In pixi, you have to use renderer.resize() and there are two ways:

1. you can assign your preferred width/height in resize, and manually do it in CSS like in your example.

2. you can use innerWidth/innerHeight in resize, but assign scale to STAGE container or container that you use as a camera.

[chilldill]

Okay and then would I need to use that scale number when positioning sprites?