diff --git a/packages/client/components/game.astro b/packages/client/components/game.astro
index 11f5efcf27..de272407a5 100644
--- a/packages/client/components/game.astro
+++ b/packages/client/components/game.astro
@@ -4,6 +4,7 @@
+
diff --git a/packages/client/data/sprites.json b/packages/client/data/sprites.json
index 745ab5c82c..35dc0d0f08 100755
--- 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
index 4e31783832..350696854c 100644
--- 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
index 575e330cba..0b47924b37 100644
--- 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('#text-canvas')!;
protected entities = document.querySelector('#entities')!;
protected cursor = document.querySelector('#cursor')!;
+ protected entitiesMask = document.querySelector('#entities-mask')!;
// Store all canvases for easy iteration
protected canvases: HTMLCanvasElement[] = [
@@ -65,7 +66,8 @@ export default class Renderer {
this.overlay,
this.textCanvas,
this.entities,
- this.cursor
+ this.cursor,
+ this.entitiesMask
];
// Create the contexts based on the canvases.
@@ -73,16 +75,23 @@ export default class Renderer {
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);
}
/**