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..
