fix(client): z animated tiles when standing

packages/client/src/controllers/entities.ts

@@ -552,7 +552,8 @@ export default class EntitiesController {
 
     public registerPosition(entity: Entity): void {
         // Tree entities are registered as colliding on the rendering grid.
-        if (entity.isResource()) this.game.map.grid[entity.gridY][entity.gridX] = 2;
+        if (entity.isResource() || entity.isNPC())
+            this.game.map.grid[entity.gridY][entity.gridX] = 2;
 
         this.grids.addToRenderingGrid(entity);
     }

packages/client/src/game.ts

@@ -202,18 +202,7 @@ export default class Game {
 
         this.menu.synchronize();
 
-        // Forcibly render the game for a few frames to ensure animated tiles are rendered.
-        let count = 0,
-            interval = setInterval(() => {
-                this.renderer.forceRendering = true;
-
-                count++;
-
-                if (count > 3) {
-                    clearInterval(interval);
-                    this.renderer.forceRendering = false;
-                }
-            }, 50);
+        this.forceRendering();
     }
 
     /**
@@ -425,6 +414,8 @@ export default class Game {
             this.player.disableAction = false;
             this.camera.centreOn(this.player);
         }
+
+        this.forceRendering();
     }
 
     /**
@@ -459,4 +450,21 @@ export default class Game {
     public isMainPlayer(instance: string): boolean {
         return this.player.instance === instance;
     }
+
+    /**
+     * Forcibly makes the renderer render a couple frames to
+     * ensure animated tiles are rendered.
+     */
+
+    public forceRendering(): void {
+        // Forcibly render the game for a few frames to ensure animated tiles are rendered.
+        let count = 0,
+            interval = setInterval(() => {
+                this.renderer.forceRendering = true;
+
+                count++;
+
+                if (count > 10) clearInterval(interval);
+            }, 100);
+    }
 }

packages/client/src/renderer/canvas.ts

@@ -109,9 +109,12 @@ export default class Canvas extends Renderer {
      * Processes a tileId at a specified map index and draws it onto the canvas.
      * We determine what canvas layer to draw the tile on, and whether it's an animated
      * tile or not. If it is, we handle the animated tile logic.
+     * @param tile The tileId of the tile we are drawing, used to access the animated tile.
+     * @param index The index of the tile on the map.
+     * @param clearRect Whether we should clear the cell before drawing.
      */
 
-    private drawVisibleTile(tile: ClientTile, index: number): void {
+    private drawVisibleTile(tile: ClientTile, index: number, clearRect = false): void {
         let flips: number[] = this.getFlipped(tile as TransformedTile);
 
         // Extract the tileId from the animated region tile.
@@ -132,7 +135,8 @@ export default class Canvas extends Renderer {
         }
 
         // Draw animated tiles if the tile is animated and we're animating tiles.
-        if (this.animateTiles && animated) this.drawAnimatedTile(tile as number, index, flips);
+        if (this.animateTiles && animated)
+            this.drawAnimatedTile(tile as number, index, flips, clearRect);
         else this.drawTile(context, tile as number, index, flips);
     }
 
@@ -150,11 +154,7 @@ export default class Canvas extends Renderer {
         for (let tileId in this.animatedTileIndexes) {
             let indexes = this.animatedTileIndexes[tileId];
 
-            for (let index of indexes) {
-                let tile = this.map.data[index];
-
-                this.parseTile(tile, index);
-            }
+            for (let index of indexes) this.parseTile(this.map.data[index], index, true);
         }
 
         this.restoreDrawing();
@@ -166,9 +166,15 @@ export default class Canvas extends Renderer {
      * @param tile The tileId of the tile we are drawing, used to access the animated tile.
      * @param index The index of the tile on the map.
      * @param flips An array containing transformations the tile will undergo.
+     * @param clearRect Whether we should clear the cell before drawing.
      */
 
-    private drawAnimatedTile(tile: number, index: number, flips: number[] = []): void {
+    private drawAnimatedTile(
+        tile: number,
+        index: number,
+        flips: number[] = [],
+        clearRect = false
+    ): void {
         // No drawing if we aren't animating tiles.
         if (!this.animateTiles) return;
 
@@ -201,7 +207,7 @@ export default class Canvas extends Renderer {
         let context = animatedTile.isHighTile ? this.foreContext : this.backContext;
 
         // Draw the tile given its context (determined when we initialize the tile).
-        this.drawTile(context, animatedTile.id + 1, index, flips);
+        this.drawTile(context, animatedTile.id + 1, index, flips, clearRect);
     }
 
     // ---------- Primitive Drawing Functions ----------
@@ -220,10 +226,9 @@ export default class Canvas extends Renderer {
         context: CanvasRenderingContext2D,
         tileId: number,
         index: number,
-        flips: number[] = []
+        flips: number[] = [],
+        clearCell = false
     ): void {
-        if (tileId < 0) return;
-
         let tileset = this.map.getTilesetFromId(tileId);
 
         if (!tileset) return;
@@ -263,6 +268,15 @@ export default class Canvas extends Renderer {
                 height: this.ceilActualTileSize
             };
 
+        // Forcibly clear a cell if we need to.
+        if (clearCell)
+            context.clearRect(
+                this.cells[index].dx,
+                this.cells[index].dy,
+                this.cells[index].width,
+                this.cells[index].height
+            );
+
         this.drawImage(context, tileset, this.tiles[tileId], this.cells[index], flips);
     }
 
@@ -452,20 +466,22 @@ export default class Canvas extends Renderer {
      * each tile. Otherwise, we draw the tile.
      * @param tile The tile we are parsing, raw from the client map.
      * @param index The index of the tile on the map.
+     * @param clearRect Whether we should clear the cell before drawing.
      */
 
-    private parseTile(tile: ClientTile, index: number): void {
+    private parseTile(tile: ClientTile, index: number, clearRect = false): void {
         if (tile === 0) return;
 
         // Check for transformed tiles and draw them.
         if ((tile as TransformedTile).tileId) {
-            this.drawVisibleTile(tile as TransformedTile, index);
+            this.drawVisibleTile(tile as TransformedTile, index, clearRect);
             return;
         }
 
         // This is a hackfix to check if the tile is an array at the index.
-        if (~~tile === 0) for (let info of tile as number[]) this.drawVisibleTile(info, index);
-        else this.drawVisibleTile(tile, index);
+        if (~~tile === 0)
+            for (let info of tile as number[]) this.drawVisibleTile(info, index, clearRect);
+        else this.drawVisibleTile(tile, index, clearRect);
     }
 
     // ---------- Getters and Checkers ----------

packages/client/src/renderer/renderer.ts

@@ -1794,17 +1794,15 @@ export default class Renderer {
 
     protected forEachVisibleTile(
         callback: (data: ClientTile, index: number) => void,
-        offset?: number
+        offset = 0
     ): void {
-        if (!this.map?.mapLoaded) return;
-
         this.forEachVisibleIndex((index) => {
             let indexData = this.map.data[index];
 
             if (indexData === 0) return;
 
             if (Array.isArray(indexData)) for (let data of indexData) callback(data, index);
-            else if (this.map.data[index]) callback(this.map.data[index], index);
+            else callback(indexData, index);
         }, offset);
     }
 
@@ -1815,7 +1813,7 @@ export default class Renderer {
      * @param offset How much to look outside the boundaries of the map.
      */
 
-    protected forEachVisibleIndex(callback: (index: number) => void, offset?: number): void {
+    protected forEachVisibleIndex(callback: (index: number) => void, offset = 0): void {
         this.camera.forEachVisiblePosition((x, y) => {
             callback(this.map.coordToIndex(x, y));
         }, offset);
@@ -1834,7 +1832,7 @@ export default class Renderer {
                     callback(this.grids.renderingGrid[y][x][entity]);
             },
             3,
-            4
+            6
         );
     }