Set a global dirty flag on resize

This adds a global "Dirty" flag at the Game level and sets it each time the ScaleManager is modified.
This fixes a bug where the game was not redrawn when a CoWebsite was opening/closing.
This commit is contained in:
David Négrier 2021-05-18 09:20:38 +02:00
parent 867f783d5e
commit 24dfa2703d
3 changed files with 43 additions and 10 deletions

View File

@ -1,4 +1,7 @@
import {SKIP_RENDER_OPTIMIZATIONS} from "../../Enum/EnvironmentVariable";
import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
import {waScaleManager} from "../Services/WaScaleManager";
import {ResizableScene} from "../Login/ResizableScene";
const Events = Phaser.Core.Events;
@ -7,8 +10,27 @@ const Events = Phaser.Core.Events;
* It comes with an optimization to skip rendering.
*
* Beware, the "step" function might vary in future versions of Phaser.
*
* It also automatically calls "onResize" on any scenes extending ResizableScene.
*/
export class Game extends Phaser.Game {
private _isDirty = false;
constructor(GameConfig: Phaser.Types.Core.GameConfig) {
super(GameConfig);
window.addEventListener('resize', (event) => {
// Let's trigger the onResize method of any active scene that is a ResizableScene
for (const scene of this.scene.getScenes(true)) {
if (scene instanceof ResizableScene) {
scene.onResize(event);
}
}
});
}
public step(time: number, delta: number)
{
// @ts-ignore
@ -64,6 +86,11 @@ export class Game extends Phaser.Game {
}
private isDirty(): boolean {
if (this._isDirty) {
this._isDirty = false;
return true;
}
// Loop through the scenes in forward order
for (let i = 0; i < this.scene.scenes.length; i++)
{
@ -87,4 +114,11 @@ export class Game extends Phaser.Game {
return false;
}
/**
* Marks the game as needing to be redrawn.
*/
public markDirty(): void {
this._isDirty = true;
}
}

View File

@ -1,18 +1,21 @@
import {HdpiManager} from "./HdpiManager";
import ScaleManager = Phaser.Scale.ScaleManager;
import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
import type {Game} from "../Game/Game";
class WaScaleManager {
private hdpiManager: HdpiManager;
private scaleManager!: ScaleManager;
private game!: Game;
public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber);
}
public setScaleManager(scaleManager: ScaleManager) {
this.scaleManager = scaleManager;
public setGame(game: Game): void {
this.scaleManager = game.scale;
this.game = game;
}
public applyNewSize() {
@ -32,6 +35,8 @@ class WaScaleManager {
const style = this.scaleManager.canvas.style;
style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
this.game.markDirty();
}
public get zoomModifier(): number {
@ -42,6 +47,7 @@ class WaScaleManager {
this.hdpiManager.zoomModifier = zoomModifier;
this.applyNewSize();
}
}
export const waScaleManager = new WaScaleManager(640*480, 196*196);

View File

@ -127,19 +127,12 @@ const config: GameConfig = {
//const game = new Phaser.Game(config);
const game = new Game(config);
waScaleManager.setScaleManager(game.scale);
waScaleManager.setGame(game);
window.addEventListener('resize', function (event) {
coWebsiteManager.resetStyle();
waScaleManager.applyNewSize();
// Let's trigger the onResize method of any active scene that is a ResizableScene
for (const scene of game.scene.getScenes(true)) {
if (scene instanceof ResizableScene) {
scene.onResize(event);
}
}
});
coWebsiteManager.onResize.subscribe(() => {