workadventure/front/src/index.ts
David Négrier 0c5e5ef578 Skip "render" if nothing changed on screen
For each requested animation frame (RAF) in Phaser, Phaser calls the "update" method, then the "render" method of each scenes.
The "render" method takes some time (and energy) to perform the rendering.

The fact is we probably don't need to call "render" if nothing changed on the screen (which happens most of the frames in a typical WorkAdventure game).

This commit is therefore overloading the "Game" class of Phaser to add a "dirty" flag.

Scenes can now add a "isDirty()" method. If all displayed scenes are pristine (not dirty), Phaser will skip rendering the frame altogether.

This saves "a lot" of energy, resulting in laptops that are not overheating when using WorkAdventure \o/
2021-05-06 15:36:45 +02:00

129 lines
4.2 KiB
TypeScript

import 'phaser';
import GameConfig = Phaser.Types.Core.GameConfig;
import "../dist/resources/style/index.scss";
import {DEBUG_MODE, JITSI_URL, RESOLUTION} from "./Enum/EnvironmentVariable";
import {LoginScene} from "./Phaser/Login/LoginScene";
import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
import {SelectCompanionScene} from "./Phaser/Login/SelectCompanionScene";
import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene";
import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
import {ResizableScene} from "./Phaser/Login/ResizableScene";
import {EntryScene} from "./Phaser/Login/EntryScene";
import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
import {MenuScene} from "./Phaser/Menu/MenuScene";
import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
import {localUserStore} from "./Connexion/LocalUserStore";
import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
import {iframeListener} from "./Api/IframeListener";
import {discussionManager} from "./WebRtc/DiscussionManager";
import {Game} from "./Phaser/Game/Game";
const {width, height} = coWebsiteManager.getGameSize();
const valueGameQuality = localUserStore.getGameQualityValue();
const fps : Phaser.Types.Core.FPSConfig = {
/**
* The minimum acceptable rendering rate, in frames per second.
*/
min: valueGameQuality,
/**
* The optimum rendering rate, in frames per second.
*/
target: valueGameQuality,
/**
* Use setTimeout instead of requestAnimationFrame to run the game loop.
*/
forceSetTimeOut: false,
/**
* Calculate the average frame delta from this many consecutive frame intervals.
*/
deltaHistory: 120,
/**
* The amount of frames the time step counts before we trust the delta values again.
*/
panicMax: 20,
/**
* Apply delta smoothing during the game update to help avoid spikes?
*/
smoothStep: false
}
// the ?phaserMode=canvas parameter can be used to force Canvas usage
const params = new URLSearchParams(document.location.search.substring(1));
const phaserMode = params.get("phaserMode");
let mode: number;
switch (phaserMode) {
case 'auto':
case null:
mode = Phaser.AUTO;
break;
case 'canvas':
mode = Phaser.CANVAS;
break;
case 'webgl':
mode = Phaser.WEBGL;
break;
default:
throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"');
}
const config: GameConfig = {
type: mode,
title: "WorkAdventure",
width: width / RESOLUTION,
height: height / RESOLUTION,
parent: "game",
scene: [EntryScene, LoginScene, SelectCharacterScene, SelectCompanionScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
zoom: RESOLUTION,
fps: fps,
dom: {
createContainer: true
},
render: {
pixelArt: true,
roundPixels: true,
antialias: false
},
physics: {
default: "arcade",
arcade: {
debug: DEBUG_MODE,
}
},
callbacks: {
postBoot: game => {
// Commented out to try to fix MacOS bug
/*const renderer = game.renderer;
if (renderer instanceof WebGLRenderer) {
renderer.pipelines.add(OutlinePipeline.KEY, new OutlinePipeline(game));
}*/
}
}
};
//const game = new Phaser.Game(config);
const game = new Game(config);
window.addEventListener('resize', function (event) {
coWebsiteManager.resetStyle();
const {width, height} = coWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION);
// 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(() => {
const {width, height} = coWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION);
});
iframeListener.init();