feat: masking for hulls

packages/topdown/src/tiles-renderer.js

@@ -1,4 +1,10 @@
-import {Canvas, Container, Sprite} from '@avocado/graphics';
+import {
+  Canvas,
+  Color,
+  Container,
+  Primitives,
+  Sprite,
+} from '@avocado/graphics';
 import {Rectangle, Vector} from '@avocado/math';
 
 export default class TilesRenderer {
@@ -15,22 +21,30 @@ export default class TilesRenderer {
     if (!slice) {
       return undefined;
     }
-    // Precalcs.
+    const mask = this.renderMask(rectangle, renderer);
     const size = Rectangle.size(rectangle);
     const {tileSize} = this.tileset;
+    if (mask) {
+      mask.anchor = [0, 0];
+    }
     const rowWidth = size[0] * tileSize[0];
     // Render all tiles.
     const container = new Container();
+    if (mask) {
+      container.mask = mask;
+    }
     const position = [0, 0];
     for (let i = 0; i < slice.length; ++i) {
       const index = slice[i];
-      // Lookup subimage.
-      const subimage = this.tileset.subimage(index);
-      if (subimage) {
-        const sprite = new Sprite(subimage);
-        sprite.anchor = [0, 0];
-        sprite.position = position;
-        container.addChild(sprite);
+      if (index > 0) {
+        // Lookup subimage.
+        const subimage = this.tileset.subimage(index);
+        if (subimage) {
+          const sprite = new Sprite(subimage);
+          sprite.anchor = [0, 0];
+          sprite.position = position;
+          container.addChild(sprite);
+        }
       }
       // Only adds, please.
       position[0] += tileSize[0];
@@ -39,15 +53,57 @@ export default class TilesRenderer {
         position[1] += tileSize[1];
       }
     }
-    // Blit to canvas.
+    const renderable = new Container();
+    renderable.addChild(container);
+    if (mask) {
+      renderable.addChild(mask);
+    }
     const canvasSize = Vector.mul(size, tileSize);
     const canvas = new Canvas(canvasSize);
-    canvas.render(container, renderer);
+    canvas.render(renderable, renderer);
     container.destroy();
+    if (mask) {
+      mask.destroy();
+    }
     // Convert to image and return.
     const image = canvas.toImage();
     canvas.destroy();
     return image;
   }
 
+  renderMask(rectangle, renderer) {
+    const hulls = this.tiles.indexHulls(0);
+    if (!hulls.length > 0) {
+      return undefined;
+    }
+    const black = new Color(0, 0, 0);
+    const white = new Color(255, 255, 255);
+    const size = Rectangle.size(rectangle);
+    const {tileSize} = this.tileset;
+    const canvasSize = Vector.mul(size, tileSize);
+    const m = new Primitives();
+    m.drawRectangle(
+      Rectangle.compose([0, 0], canvasSize),
+      Primitives.lineStyle(white, 1),
+      Primitives.fillStyle(white),
+    );
+    for (let i = 0; i < hulls.length; ++i) {
+      const scaled = [];
+      for (let j = 0; j < hulls[i].length; j++) {
+        scaled.push(Vector.scale(hulls[i][j], 16));
+      }
+      m.drawPolygon(
+        scaled,
+        Primitives.lineStyle(black, 1),
+        Primitives.fillStyle(black),
+      );
+    }
+    const canvas = new Canvas(canvasSize);
+    canvas.render(m, renderer);
+    const sprite = new Sprite(canvas.toImage());
+    canvas.destroy();
+    m.destroy();
+    return sprite;
+  }
+
 }