About ScaleManager ORIENTATION_CHANGE, RESIZE

Phaser 3
1

Hello Everyone,

I’ve just finished a project for a website that i’ve been working for time. It’s kinda of a isometric city build game, I have camera stuff inside and like UIScene (working with 2 scenes at one time),

My config object like this:

import Phaser from 'phaser';
import { BootScene, PreloadScene, GameScene, UIScene } from './scenes/';

export const type = Phaser.WEBGL;

export const loader = {
    baseURL: 'assets/'
};

export const backgroundColor = 0x062830;

export const scale = {
    mode: Phaser.Scale.ScaleModes.FIT,
    autoCenter: Phaser.Scale.Center.CENTER_BOTH,
    width: 1920,
    height: 1080,
    parent: 'core',
    fullscreenTarget: 'core',
};

export const physics = {
    default: false
};

export { title, version, url } from '../package.json';

export const scene = [ BootScene, PreloadScene, GameScene, UIScene ];

export const banner = {
    text: '#ffffff',
    background: [
        '#fb8cb3',
        '#d44a52',
        '#871905',
        '#581505',
    ],
    hidePhaser: true
};

after ScaleManager, I have changed my scale object like this:

export const scale = {
    mode: Phaser.Scale.ScaleModes.FIT,
    autoCenter: Phaser.Scale.Center.CENTER_BOTH,
    width: 1920,
    height: 1080,
    parent: 'core',
    fullscreenTarget: 'core',
};

Everything seems to work fine but just one thing, which is
When ORIENTATION_CHANGE it wont fit inside the parent's box,
Let me show what i’m trying to tell:

I’m starting the page on landscape mode:

image
image.jpg1919×1041 438 KB

after this i’m turning my page to portrait which is also fine:

image
image.png1918×1042 244 KB

From here after i change the orientation again it’s not scaling, actually it is but this is not like it should be:

image
image.png1919×1039 361 KB

I looked into phaser’s code and it seems like it’s using ScaleManager’s refresh() method after resize event. BDW it happening on IOS devices mostly, on Android it’s sometimes fitting and sometimes just staying small, after toggling fullscreen, everything find bdw :slight_smile:

Other then this: when i do resize with mouse quickly, for instance scaling div with dev tool shrink, when it’s fast it’s staying like really small, and when do it slowly it’s kinda find but still not fitting like the first time. let me show it with 2 pictures:

I’m staring page like this:

image
image.png1919×1037 416 KB

when i shrink down or close dev tool it’s like this:

image
image.jpg1919×1039 397 KB

or:
image
image.jpg1919×1040 368 KB

And i believe @rich, If i dont have something wrong on my code, you might wanna check on this :slight_smile:
I’ll be glad for any help :slight_smile: Thanks