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/
This commit is contained in:
David Négrier 2021-04-23 13:29:23 +02:00
parent f9f6abe7b3
commit 0c5e5ef578
5 changed files with 122 additions and 1 deletions

View file

@ -0,0 +1,85 @@
const Events = Phaser.Core.Events;
/**
* A specialization of the main Phaser Game scene.
* It comes with an optimization to skip rendering.
*
* Beware, the "step" function might vary in future versions of Phaser.
*/
export class Game extends Phaser.Game {
public step(time: number, delta: number)
{
// @ts-ignore
if (this.pendingDestroy)
{
// @ts-ignore
return this.runDestroy();
}
const eventEmitter = this.events;
// Global Managers like Input and Sound update in the prestep
eventEmitter.emit(Events.PRE_STEP, time, delta);
// This is mostly meant for user-land code and plugins
eventEmitter.emit(Events.STEP, time, delta);
// Update the Scene Manager and all active Scenes
this.scene.update(time, delta);
// Our final event before rendering starts
eventEmitter.emit(Events.POST_STEP, time, delta);
// This "if" is the changed introduced by the new "Game" class to avoid rendering unnecessarily.
if (this.isDirty()) {
const renderer = this.renderer;
// Run the Pre-render (clearing the canvas, setting background colors, etc)
renderer.preRender();
eventEmitter.emit(Events.PRE_RENDER, renderer, time, delta);
// The main render loop. Iterates all Scenes and all Cameras in those scenes, rendering to the renderer instance.
this.scene.render(renderer);
// The Post-Render call. Tidies up loose end, takes snapshots, etc.
renderer.postRender();
// The final event before the step repeats. Your last chance to do anything to the canvas before it all starts again.
eventEmitter.emit(Events.POST_RENDER, renderer, time, delta);
}
}
private isDirty(): boolean {
// Loop through the scenes in forward order
for (let i = 0; i < this.scene.scenes.length; i++)
{
const scene = this.scene.scenes[i];
const sys = scene.sys;
if (sys.settings.visible && sys.settings.status >= Phaser.Scenes.LOADING && sys.settings.status < Phaser.Scenes.SLEEPING)
{
// @ts-ignore
if(typeof scene.isDirty === 'function') {
// @ts-ignore
const isDirty = scene.isDirty() || scene.tweens.getAllTweens().length > 0;
if (isDirty) {
return true;
}
} else {
return true;
}
}
}
return false;
}
}