Start to optimize rendering

src/js/core/draw_parameters.js

@@ -22,9 +22,5 @@ export class DrawParameters {
         // FIXME: Not really nice
         /** @type {GameRoot} */
         this.root = root;
-
-        if (G_IS_DEV && globalConfig.debug.testClipping) {
-            this.visibleRect = this.visibleRect.expandedInAllDirections(-100);
-        }
     }
 }

src/js/core/draw_utils.js

@@ -3,6 +3,12 @@
  * @typedef {import("./draw_parameters").DrawParameters} DrawParameters
  */
 
+import { globalConfig } from "./config";
+import { createLogger } from "./logging";
+import { Rectangle } from "./rectangle";
+
+const logger = createLogger("draw_utils");
+
 export function initDrawUtils() {
     CanvasRenderingContext2D.prototype.beginRoundedRect = function (x, y, w, h, r) {
         this.beginPath();
@@ -52,9 +58,64 @@ export function initDrawUtils() {
  * @param {number=} param0.offsetY
  */
 export function drawRotatedSprite({ parameters, sprite, x, y, angle, size, offsetX = 0, offsetY = 0 }) {
+    if (angle === 0) {
+        sprite.drawCachedCentered(parameters, x + offsetX, y + offsetY, size);
+        return;
+    }
+
     parameters.context.translate(x, y);
     parameters.context.rotate(angle);
     sprite.drawCachedCentered(parameters, offsetX, offsetY, size, false);
     parameters.context.rotate(-angle);
     parameters.context.translate(-x, -y);
 }
+
+let warningsShown = 0;
+
+/**
+ * Draws a sprite with clipping
+ * @param {object} param0
+ * @param {DrawParameters} param0.parameters
+ * @param {HTMLCanvasElement} param0.sprite
+ * @param {number} param0.x
+ * @param {number} param0.y
+ * @param {number} param0.w
+ * @param {number} param0.h
+ * @param {number} param0.originalW
+ * @param {number} param0.originalH
+ */
+export function drawSpriteClipped({ parameters, sprite, x, y, w, h, originalW, originalH }) {
+    const rect = new Rectangle(x, y, w, h);
+    const intersection = rect.getIntersection(parameters.visibleRect);
+    if (!intersection) {
+        // Clipped
+        if (++warningsShown % 200 === 1) {
+            logger.warn(
+                "Sprite drawn clipped but it's not on screen - perform culling before (",
+                warningsShown,
+                "warnings)"
+            );
+        }
+        if (G_IS_DEV && globalConfig.debug.testClipping) {
+            parameters.context.fillStyle = "yellow";
+            parameters.context.fillRect(x, y, w, h);
+        }
+        return;
+    }
+
+    parameters.context.drawImage(
+        sprite,
+
+        // src pos and size
+        ((intersection.x - x) / w) * originalW,
+        ((intersection.y - y) / h) * originalH,
+        (originalW * intersection.w) / w,
+        (originalH * intersection.h) / h,
+
+        // dest pos and size
+        intersection.x,
+        intersection.y,
+        intersection.w,
+        intersection.h
+    );
+}

src/js/core/rectangle.js

@@ -395,22 +395,14 @@ export class Rectangle {
 
     /**
      * Returns a new recangle in tile space which includes all tiles which are visible in this rect
-     * @param {boolean=} includeHalfTiles
      * @returns {Rectangle}
      */
-    toTileCullRectangle(includeHalfTiles = true) {
-        let scaled = this.allScaled(1.0 / globalConfig.tileSize);
-
-        if (includeHalfTiles) {
-            // Increase rectangle size
-            scaled = Rectangle.fromTRBL(
-                Math.floor(scaled.y),
-                Math.ceil(scaled.right()),
-                Math.ceil(scaled.bottom()),
-                Math.floor(scaled.x)
-            );
-        }
-
-        return scaled;
+    toTileCullRectangle() {
+        return new Rectangle(
+            Math.floor(this.x / globalConfig.tileSize),
+            Math.floor(this.y / globalConfig.tileSize),
+            Math.ceil(this.w / globalConfig.tileSize),
+            Math.ceil(this.h / globalConfig.tileSize)
+        );
     }
 }