Add FpsLimiter to limit framerate on InstancesEditor of newIDE, to avoid killing CPU/battery

This commit is contained in:
Florian Rival
2017-12-18 00:05:31 +01:00
parent d14a93f9d0
commit 202fe2b69a
2 changed files with 55 additions and 11 deletions

View File

@@ -0,0 +1,35 @@
// @flow
/**
* Provide a method shouldUpdate that can be called in a game loop or in
* a method used in renderAnimationFrame, and which indicate if the rendering/update
* of the scene should be done according to the desired framerate.
*/
export default class FpsLimiter {
_lastFrameTime: number;
_interval: number;
_forceUpdate: boolean;
constructor(maxFps: number) {
this._lastFrameTime = Date.now();
this._interval = 1000 / maxFps;
this._forceUpdate = false;
}
shouldUpdate() {
const now = Date.now();
const delta = now - this._lastFrameTime;
if (delta > this._interval || this._forceUpdate) {
this._lastFrameTime = now - delta % this._interval;
this._forceUpdate = false;
return true;
}
return false;
}
forceNextUpdate() {
this._forceUpdate = true;
}
}

View File

@@ -15,6 +15,7 @@ import WindowMask from './WindowMask';
import DropHandler from './DropHandler';
import BackgroundColor from './BackgroundColor';
import PIXI from 'pixi.js';
import FpsLimiter from './FpsLimiter';
export default class InstancesEditorContainer extends Component {
constructor() {
@@ -24,6 +25,8 @@ export default class InstancesEditorContainer extends Component {
this.lastContextMenuY = 0;
this.lastCursorX = 0;
this.lastCursorY = 0;
this.fpsLimiter = new FpsLimiter(28);
}
componentDidMount() {
@@ -251,7 +254,10 @@ export default class InstancesEditorContainer extends Component {
nextProps.width,
nextProps.height
);
this._renderScene(); //Avoid flickering that could happen while waiting for next animation frame.
// Avoid flickering that could happen while waiting for next animation frame.
this.fpsLimiter.forceNextUpdate();
this._renderScene();
}
if (nextProps.options !== this.props.options) {
@@ -471,16 +477,19 @@ export default class InstancesEditorContainer extends Component {
// Protect against rendering scheduled after the component is unmounted.
if (this._unmounted) return;
this.backgroundColor.render();
this.viewPosition.render();
this.grid.render();
this.instancesRenderer.render();
this.highlightedInstance.render();
this.selectedInstances.render();
this.selectionRectangle.render();
this.windowBorder.render();
this.windowMask.render();
this.pixiRenderer.render(this.pixiContainer);
// Avoid killing the CPU by limiting the rendering calls.
if (this.fpsLimiter.shouldUpdate()) {
this.backgroundColor.render();
this.viewPosition.render();
this.grid.render();
this.instancesRenderer.render();
this.highlightedInstance.render();
this.selectedInstances.render();
this.selectionRectangle.render();
this.windowBorder.render();
this.windowMask.render();
this.pixiRenderer.render(this.pixiContainer);
}
this.nextFrame = requestAnimationFrame(this._renderScene);
};