davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Resize the pixi-viewport on window resize events #339

Open ben4d85 opened 2 years ago

ben4d85 commented 2 years ago

I am trying to get the pixi-viewport to resize automatically following a window resize event.

The problem is that after resizing, the user needs to drag on the page for the viewport to get updated. I would like this to happen automatically instead.

// Listen for window resize events
window.addEventListener('resize', this.onResize);

// Resize handler
onResize = () => {

    // Resize the pixi app's renderer
    this.pixiApp.renderer.resize(
        window.innerWidth,
        window.innerHeight
    );

    // Resize the pixi viewport
    this.pixiViewport.resize(
        window.innerWidth,
        window.innerHeight,
        this.pixiViewport.worldWidth,
        this.pixiViewport.worldHeight,
    );

    // Update the pixi viewport
    this.pixiViewport.update();
}
davidfig commented 2 years ago

You shouldn't need the viewport.update() command. The viewport.resize() command should resize and on the next draw everything should be correct. Seeing as you're using pixi.application that should happen on every frame. Check that the resize is being called properly after an event.