Auto density issue

[potdemort]

Hello! First of all, thanks for you great library! Amazing work 👏

Description

Decided to update to the latest version of the library and got an unexpected behaviour after that. Starting from v5.0.2 my app became zoomed a lot. I assume there are some troubles with resolution.

According to your release note I assumed that I should be able to fix it by supplying autoDensity: false to my App. I tried and it did absolutely nothing. I tried to change my stage dimensions and it did nothing as well.

AutoDensity is now set to PIXI.Application allowing app.renderer.resize to set width, height and css styles correctly.

Also I should probably note that I'm using your library along with pixi-viewport and I tried to change dimensions of my viewport without no luck as well.

I think there might be troubles with my app configuration. I'm starting to think that it is simply ignored. Here's my configuration:

const app = new Application({
  resolution: window.devicePixelRatio,
  antialias: true,
  autoDensity: false,
});

function Func() {
  return (
    <AppProvider value={app}>
      <Viewport>
        ...
      </Viewport>
    </AppProvider>
  );

Additional info

• @inlet/react-pixi version: 5.0.2
• React version: 16.13.1
• ReactDOM version: 16.13.1
• PIXI version: 5.3.5
• pixi-viewport version: 4.12.0

[inlet]

Hi @potdemort,

You're absolutely welcome! 😉

We've done quite some improvements on handling the resolution, have you tried v6.0.6 (LTS) perhaps?

Btw, it's totally fine to use a custom app and assign it to the AppProvider (like in your example), but we've added some fixes in the Stage component that handles resolution changes better:

Auto update resolution based on media query

https://github.com/inlet/react-pixi/blob/3374bbfe6c9e69cb9d6a55b3e34a3ed6be85cb33/src/stage/index.js#L130-L133

Reset interaction manager

https://github.com/inlet/react-pixi/blob/3374bbfe6c9e69cb9d6a55b3e34a3ed6be85cb33/src/stage/index.js#L149-L150

Auto render on reconcile commits

https://github.com/inlet/react-pixi/blob/3374bbfe6c9e69cb9d6a55b3e34a3ed6be85cb33/src/stage/index.js#L217

May I ask why you're not using the <Stage> component?

I'll close this issue for now as I believe this issue is not related to react-pixi, if you believe it's otherwise we can always reopen it. Thanks!

[potdemort]

Hey @inlet,

Actually, I'm using the <Stage/> component, it is located in my <Viewport/>. Sorry for missing that.

It turned out my assumption was correct, my app configuration is ignored somehow. So I just cleared it and managed to fix the issue by supplying autoDensity: true to my <Stage/> component. Here is my stage configuration:

const STAGE_OPTIONS: _ReactPixi.ApplicationOptions = {
  transparent: true,
  antialias: true,
  autoDensity: true,
};

BTW I've also installed v6.0.6 (LTS) as you proposed.

So finally I was managed to fix my issue! Thank you so much for helping 🙂 Keep on rocking with your great library! 🤘