diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts index e9842cab6..442d4d0ea 100644 --- a/src/client/graphics/GameRenderer.ts +++ b/src/client/graphics/GameRenderer.ts @@ -301,14 +301,7 @@ export class GameRenderer { } initialize() { - this.eventBus.on(RedrawGraphicsEvent, (e) => { - this.layers.forEach((l) => { - if (l.redraw) { - l.redraw(); - } - }); - }); - + this.eventBus.on(RedrawGraphicsEvent, () => this.redraw()); this.layers.forEach((l) => l.init?.()); document.body.appendChild(this.canvas); @@ -318,7 +311,14 @@ export class GameRenderer { //show whole map on startup this.transformHandler.centerAll(0.9); - requestAnimationFrame(() => this.renderGame()); + let rafId = requestAnimationFrame(() => this.renderGame()); + this.canvas.addEventListener("contextlost", () => { + cancelAnimationFrame(rafId); + }); + this.canvas.addEventListener("contextrestored", () => { + this.redraw(); + rafId = requestAnimationFrame(() => this.renderGame()); + }); } resizeCanvas() { @@ -328,6 +328,14 @@ export class GameRenderer { //this.redraw() } + redraw() { + this.layers.forEach((l) => { + if (l.redraw) { + l.redraw(); + } + }); + } + renderGame() { const start = performance.now(); // Set background diff --git a/src/client/graphics/layers/StructureLayer.ts b/src/client/graphics/layers/StructureLayer.ts index a225d67cc..ec23b6209 100644 --- a/src/client/graphics/layers/StructureLayer.ts +++ b/src/client/graphics/layers/StructureLayer.ts @@ -135,7 +135,14 @@ export class StructureLayer implements Layer { this.canvas.width = this.game.width() * 2; this.canvas.height = this.game.height() * 2; - this.game.units().forEach((u) => this.handleUnitRendering(u)); + + Promise.all( + Array.from(this.unitIcons.values()).map((img) => + img.decode?.().catch(() => {}), + ), + ).finally(() => { + this.game.units().forEach((u) => this.handleUnitRendering(u)); + }); } renderLayer(context: CanvasRenderingContext2D) {