Performance optimizations and refacturing.

js/Camera.js

@@ -1,4 +1,5 @@
 import GeometryPoint from "./geometry/GeometryPoint.js";
+import GeometryRect from "./geometry/GeometryRect.js";
 
 export default class Camera
 {
@@ -114,4 +115,20 @@ export default class Camera
             }
         }
     }
+
+    getViewAsRect()
+    {
+        return new GeometryRect(this.position.x, this.position.y, this.width, this.height);
+    }
+
+    isMovableInsideView(movable)
+    {
+        let viewRect = this.getViewAsRect();
+        let distanceMovable = movable.getRect().getDiagonal().getLength() * 0.5;
+        let distanceCamera = viewRect.getDiagonal().getLength() * 0.5;
+
+        let distanceMin = distanceMovable + distanceCamera;
+
+        return movable.getCenter().getDistanceToPoint(viewRect.getCenter()) < distanceMin;
+    }
 }

js/FrameRateMeasurer.js

@@ -0,0 +1,86 @@
+import FrameRateMeasuredEvent from "./events/FrameRateMeasuredEvent.js";
+
+export default class FrameRateMeasurer
+{
+    constructor(rounds = 100)
+    {
+        this.rounds = rounds;
+        this.round = 0;
+        this.lastTimestamp = undefined;
+        this.frameDurations = [];
+
+        window.requestAnimationFrame(
+            (timestamp) => {
+                this.measureFrameRate(timestamp);
+            }
+        );
+    }
+
+    measureFrameRate(timestamp)
+    {
+        if (this.lastTimestamp !== undefined) {
+            this.round++;
+            this.frameDurations.push(timestamp - this.lastTimestamp);
+
+            this.lastTimestamp = timestamp;
+
+            if (this.round < this.rounds) {
+                window.requestAnimationFrame(
+                    (timestamp) => {
+                        this.measureFrameRate(timestamp);
+                    }
+                );
+            } else {
+                window.dispatchEvent(new FrameRateMeasuredEvent(this.getAverageFrameRate()));
+            }
+        } else {
+            this.round = 0;
+            this.lastTimestamp = timestamp;
+            window.requestAnimationFrame(
+                (timestamp) => {
+                    this.measureFrameRate(timestamp);
+                }
+            );
+        }
+
+        this.lastTimestamp = timestamp
+    }
+
+    getAverageFrameRate()
+    {
+        let frameDurationSum = 0;
+
+        this.frameDurations.forEach(
+            (duration) => {
+                frameDurationSum += duration;
+            }
+        );
+
+        let durationAverage = frameDurationSum / this.frameDurations.length;
+
+        return 1000 / durationAverage;
+    }
+
+    getFrameRate()
+    {
+        const DEFAULT_FRAME_RATES = [30, 60, 120];
+
+        let averageFrameRate = this.getAverageFrameRate();
+        let closestDistance = {frameRate: 0, distance: 99999};
+
+        DEFAULT_FRAME_RATES.forEach(
+            (frameRate) => {
+                let distance = Math.abs(frameRate - averageFrameRate);
+
+                if (closestDistance.distance > distance) {
+                    closestDistance.frameRate = frameRate;
+                    closestDistance.distance = distance;
+                }
+            }
+        );
+
+        console.log(this.frameDurations);
+
+        return closestDistance.frameRate;
+    }
+}

js/Movable.js

@@ -109,7 +109,9 @@ export default class Movable
 
     draw(context, camera)
     {
+        if (camera.isMovableInsideView(this)) {
             this.animations[this.currentAnimation].setFootPosition(this.position.x, this.position.y);
             this.animations[this.currentAnimation].draw(context, camera);
         }
     }
+}

js/events/FrameRateMeasuredEvent.js

@@ -0,0 +1,9 @@
+import InterfaceEvent from "./InterfaceEvent.js";
+
+export default class FrameRateMeasuredEvent extends Event
+{
+    constructor(frameRate) {
+        super(InterfaceEvent.FRAME_RATE_MEASURED);
+        this.frameRate = frameRate;
+    }
+}

js/events/InterfaceEvent.js

@@ -1,6 +1,7 @@
-export default InterfaceEvent;
-
 const InterfaceEvent = {
-    IMAGE_LOADED: 'imgloaded',
-    MEDIA_COLLECTION_LOADED: 'mediacollectionloaded',
+    IMAGE_LOADED: 'imageLoaded',
+    MEDIA_COLLECTION_LOADED: 'mediaCollectionLoaded',
+    FRAME_RATE_MEASURED: 'frameRateMeasured',
 };
+
+export default InterfaceEvent;

js/module.js

@@ -7,6 +7,8 @@ import FileLoader from "./FileLoader.js";
 import Camera from "./Camera.js";
 import Gisela from "./Gisela.js";
 import Setting from "./Setting.js";
+import InterfaceEvent from "./events/InterfaceEvent.js";
+import FrameRateMeasurer from "./FrameRateMeasurer.js";
 
 class ImageLoader
 {
@@ -27,8 +29,10 @@ class ImageLoader
         return this.numberImagesLoaded / this.images.length;
     }
 
-    addImage(image)
+    addImage(imagePath)
     {
+        let image = new Image();
+        image.src = imagePath;
         image.addEventListener(
             'load', () => {
                 this.update();
@@ -125,7 +129,7 @@ function MainLoop(timestamp)
     camera.lockCameraIntoBorders();
 
     /* Drawing */
-    if (timestamp - lastRendered >= FRAME_DURATION) {
+    if (timestamp - lastRendered >= frameDuration) {
         context.clearRect(0, 0, window.innerWidth, window.innerHeight);
 
         architecture.draw(context, camera);
@@ -151,10 +155,10 @@ function MainLoop(timestamp)
     window.requestAnimationFrame(MainLoop);
 }
 
-const FPS = 120;
-const FRAME_DURATION = 1000 / FPS;
 const GAME_SPEED = 1;
 const GRAVITY = 2;
+let fps;
+let frameDuration;
 
 let levelJson = new FileLoader('levels/level01.json');
 
@@ -174,21 +178,12 @@ let KeyJump = new Key('Space');
 
 let loader = new ImageLoader();
 
-let imgAnimation = new Image();
-imgAnimation.src = Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png';
-loader.addImage(imgAnimation);
+loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png');
+loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png');
+loader.addImage(Setting.TILESET_LOCATION + 'landscape01.jpg');
+loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
 
-let imgAnimationB = new Image();
-imgAnimationB.src = Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png';
-loader.addImage(imgAnimationB);
-
-let imgArch = new Image();
-imgArch.src = Setting.TILESET_LOCATION + 'landscape01.jpg';
-loader.addImage(imgArch);
-
-let imgGisela = new Image();
-imgGisela.src = Setting.GRAPHICS_LOCATION + 'gisela-right.png';
-loader.addImage(imgGisela);
+new FrameRateMeasurer();
 
 window.addEventListener(
     'imagesloaded',
@@ -217,6 +212,8 @@ window.addEventListener(
         gisela = new Gisela();
         architecture.setMovableToTargetPosition(gisela);
 
+        fps = 120; //event.frameRate;
+        frameDuration = 1000 / fps;
         window.requestAnimationFrame(MainLoop);
     }
 );