Optimization for Firefox and Chrome

js/retro/RetroArchitecture.js

@@ -5,6 +5,7 @@ import GeometryPoint from "../geometry/GeometryPoint.js";
 import GeometryRect from "../geometry/GeometryRect.js";
 import GraphicSet from "../GraphicSet.js";
 import Setting from "../Setting.js";
+import Camera from "../Camera.js";
 
 export default class RetroArchitecture
 {
@@ -19,6 +20,10 @@ export default class RetroArchitecture
         this.matrix = [];
         this.tileWidth = this.tilesetSprite.getWidth() / this.tiles;
         this.tileHeight = this.tilesetSprite.getHeight();
+        this.terrainCanvas = document.createElement('canvas');
+        this.terrainCanvas.width = this.tileWidth * this.columns;
+        this.terrainCanvas.height = this.tileHeight * this.rows;
+        this.terrainContext = this.terrainCanvas.getContext('2d');
         this.startX = 0;
         this.startY = 0;
         this.targetX = 0;
@@ -41,6 +46,23 @@ export default class RetroArchitecture
         }
     }
 
+    render()
+    {
+        const camera = new Camera();
+
+        for (let y = 0; y < this.rows; y++) {
+            for (let x = 0; x < this.columns; x++) {
+                const field = this.matrix[y][x];
+
+                if (field === null) {
+                    continue;
+                }
+
+                this.drawField(this.terrainContext, x, y, camera, field);
+            }
+        }
+    }
+
     setBackgroundColor(color)
     {
         this.backgroundColor = color;
@@ -202,16 +224,16 @@ export default class RetroArchitecture
             tileRect.isContainingPoint(movable.getPositionFootRight());
     }
 
-    draw(context, camera = new Camera())
+    drawForFirefox(context, camera = new Camera())
     {
-        let viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
-        let viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
-        let viewY = parseInt(Math.floor(Math.max(0, camera.position.y)) / this.tileHeight);
-        let viewHeight = parseInt(Math.min(Math.ceil(camera.height), this.rows));
+        const viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
+        const viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
+        const viewY = parseInt(Math.floor(Math.max(0, camera.position.y)) / this.tileHeight);
+        const viewHeight = parseInt(Math.min(Math.ceil(camera.height), this.rows));
 
         for (let y = viewY; y < viewHeight; y++) {
             for (let x = viewX; x < viewWidth; x++) {
-                let field = this.matrix[y][x];
+                const field = this.matrix[y][x];
 
                 if (field !== null) {
                     this.drawField(context, x, y, camera, field);
@@ -220,6 +242,26 @@ export default class RetroArchitecture
         }
     }
 
+    /**
+     *
+     * @param context
+     * @param camera Camera
+     */
+    drawForChrome(context, camera)
+    {
+        context.drawImage(
+            this.terrainCanvas,
+            camera.position.x,
+            camera.position.y,
+            camera.width,
+            camera.height,
+            0,
+            0,
+            camera.width,
+            camera.height
+        );
+    }
+
     drawField(context, x, y, camera, field)
     {
         context.drawImage(
@@ -274,6 +316,8 @@ export default class RetroArchitecture
             }
         }
 
+        architecture.render();
+
         return architecture;
     }
 }