feat(client): entity masking

Kaetram · Sep 17, 2023 · 70e0633 · 70e0633
1 parent 4dd3fcc
commit 70e0633
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/packages/client/components/game.astro b/packages/client/components/game.astro
@@ -4,6 +4,7 @@
             <canvas id="background"></canvas>
             <canvas id="entities"></canvas>
             <canvas id="foreground"></canvas>
+            <canvas id="entities-mask"></canvas>
             <canvas id="cursor"></canvas>
             <canvas id="overlay"></canvas>
             <canvas id="text-canvas"></canvas>

diff --git a/packages/client/data/sprites.json b/packages/client/data/sprites.json
@@ -6019,8 +6019,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/firearrow",
@@ -6031,8 +6031,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -16,
+        "offsetY": -8
     },
     {
         "id": "projectiles/poisonarrow",
@@ -6043,8 +6043,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/icearrow",
@@ -6055,8 +6055,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/lightningarrow",
@@ -6067,8 +6067,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/nisocarrow",
@@ -6079,8 +6079,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/cinnabararrow",
@@ -6091,8 +6091,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/pythararrow",
@@ -6103,8 +6103,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/iboarrow",
@@ -6115,8 +6115,8 @@
                 "row": 0
             }
         },
-        "offsetX": 0,
-        "offsetY": 0
+        "offsetX": -12,
+        "offsetY": -12
     },
     {
         "id": "projectiles/none",

diff --git a/packages/client/scss/game/impl/_container.scss b/packages/client/scss/game/impl/_container.scss
@@ -18,7 +18,8 @@
 #foreground,
 #cursor,
 #text-canvas,
-#overlay {
+#overlay,
+#entities-mask {
     position: absolute;
     transform: translateZ(0);
     margin: 0;

diff --git a/packages/client/src/renderer/renderer.ts b/packages/client/src/renderer/renderer.ts
@@ -57,6 +57,7 @@ export default class Renderer {
     protected textCanvas = document.querySelector<HTMLCanvasElement>('#text-canvas')!;
     protected entities = document.querySelector<HTMLCanvasElement>('#entities')!;
     protected cursor = document.querySelector<HTMLCanvasElement>('#cursor')!;
+    protected entitiesMask = document.querySelector<HTMLCanvasElement>('#entities-mask')!;
 
     // Store all canvases for easy iteration
     protected canvases: HTMLCanvasElement[] = [
@@ -65,24 +66,32 @@ export default class Renderer {
         this.overlay,
         this.textCanvas,
         this.entities,
-        this.cursor
+        this.cursor,
+        this.entitiesMask
     ];
 
     // Create the contexts based on the canvases.
     protected entitiesContext: CanvasRenderingContext2D = this.entities.getContext('2d')!;
     protected overlayContext: CanvasRenderingContext2D = this.overlay.getContext('2d')!;
     protected textContext: CanvasRenderingContext2D = this.textCanvas.getContext('2d')!;
     protected cursorContext: CanvasRenderingContext2D = this.cursor.getContext('2d')!;
+    protected entitiesMaskContext: CanvasRenderingContext2D = this.entitiesMask.getContext('2d')!;
 
     protected allContexts = [
         this.entitiesContext,
         this.overlayContext,
         this.textContext,
-        this.cursorContext
+        this.cursorContext,
+        this.entitiesMaskContext
     ];
 
     // We split contexts into two arrays, one for tilemap rendering and one for the rest.
-    protected contexts = [this.entitiesContext, this.textContext, this.overlayContext];
+    protected contexts = [
+        this.entitiesContext,
+        this.textContext,
+        this.overlayContext,
+        this.entitiesMaskContext
+    ];
 
     // Zooming buttons
     private zoomIn: HTMLElement = document.querySelector('#zoom-in')!;
@@ -383,6 +392,9 @@ export default class Renderer {
 
             this.drawEntity(entity);
         });
+
+        this.entitiesMaskContext.globalAlpha = 0.3;
+        this.entitiesMaskContext.drawImage(this.entities, 0, 0);
     }
 
     /**