From 0ae0fe625927fa90567da920e7114885ba887ad0 Mon Sep 17 00:00:00 2001 From: Aaron Delasy Date: Fri, 25 Oct 2024 02:04:57 +0300 Subject: [PATCH] Make all assets of same size --- public/entities/box.svg | 29 ++++++++++++ public/entities/player-attacking.svg | 69 ++++++++++++++++++++++++++++ public/entities/player-idle.svg | 69 ++++++++++++++++++++++++++++ public/entities/rock.svg | 21 +++++++++ public/entities/zombie-idle.svg | 60 ++++++++++++++++++++++++ public/entities/zombie-walking.svg | 60 ++++++++++++++++++++++++ renderer/index.ts | 60 ++++-------------------- 7 files changed, 317 insertions(+), 51 deletions(-) create mode 100644 public/entities/box.svg create mode 100644 public/entities/player-attacking.svg create mode 100644 public/entities/player-idle.svg create mode 100644 public/entities/rock.svg create mode 100644 public/entities/zombie-idle.svg create mode 100644 public/entities/zombie-walking.svg diff --git a/public/entities/box.svg b/public/entities/box.svg new file mode 100644 index 0000000..1237569 --- /dev/null +++ b/public/entities/box.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/entities/player-attacking.svg b/public/entities/player-attacking.svg new file mode 100644 index 0000000..a088201 --- /dev/null +++ b/public/entities/player-attacking.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/entities/player-idle.svg b/public/entities/player-idle.svg new file mode 100644 index 0000000..a857534 --- /dev/null +++ b/public/entities/player-idle.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/entities/rock.svg b/public/entities/rock.svg new file mode 100644 index 0000000..fa489df --- /dev/null +++ b/public/entities/rock.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/entities/zombie-idle.svg b/public/entities/zombie-idle.svg new file mode 100644 index 0000000..b757918 --- /dev/null +++ b/public/entities/zombie-idle.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/entities/zombie-walking.svg b/public/entities/zombie-walking.svg new file mode 100644 index 0000000..820bce1 --- /dev/null +++ b/public/entities/zombie-walking.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/renderer/index.ts b/renderer/index.ts index 93961b0..db92c57 100644 --- a/renderer/index.ts +++ b/renderer/index.ts @@ -31,11 +31,11 @@ async function loadAssets() { const [bg, box, player, rock, zombie, zombieHit] = await Promise.all([ loadImage("/map.webp"), - loadImage("/entities/block.svg"), - loadImage("/entities/player_alive_1.svg"), - loadImage("/entities/rocks.svg"), - loadImage("/entities/zombie_alive_1.svg"), - loadImage("/entities/zombie_alive_2.svg"), + loadImage("/entities/box.svg"), + loadImage("/entities/player-attacking.svg"), + loadImage("/entities/rock.svg"), + loadImage("/entities/zombie-idle.svg"), + loadImage("/entities/zombie-walking.svg"), ]); assets.loaded = true; @@ -76,42 +76,6 @@ function getEntityImage(entity: Entity): HTMLImageElement | null { } } -function getEntityOffset(entity: Entity): { x: number; y: number } { - switch (entity.getType()) { - case EntityType.Zombie: { - if (entity.getHealth() === 1) { - return { x: -2, y: 0 }; - } else { - return { x: 14, y: 0 }; - } - } - default: { - return { x: 0, y: 0 }; - } - } -} - -function getEntityRatio(entity: Entity): { width: number; height: number } { - switch (entity.getType()) { - case EntityType.Box: { - return { width: 0.87, height: 1 }; // 41x47 - } - case EntityType.Player: { - return { width: 1, height: 1 }; // 64x64 - } - case EntityType.Rock: { - return { width: 1, height: 0.76 }; // 67x51 - } - case EntityType.Zombie: { - if (entity.getHealth() === 1) { - return { width: 0.61, height: 1 }; // 40x65 - } else { - return { width: 1, height: 1 }; // 64x64 - } - } - } -} - export class Renderer { private readonly assets: RendererAssets; private readonly cellSize: number; @@ -192,8 +156,6 @@ export class Renderer { } const entityPosition = entity.getPosition(); - const entityOffset = getEntityOffset(entity); - const entityScale = getEntityRatio(entity); this.ctx.globalAlpha = entity.getType() === EntityType.Zombie && entity.getHealth() === 1 @@ -202,14 +164,10 @@ export class Renderer { this.ctx.drawImage( entityImage, - entityPosition.x * this.cellSize + - ((1 - entityScale.width) / 2) * this.cellSize + - entityOffset.x, - entityPosition.y * this.cellSize + - ((1 - entityScale.height) / 2) * this.cellSize + - entityOffset.y, - this.cellSize * entityScale.width, - this.cellSize * entityScale.height, + entityPosition.x * this.cellSize, + entityPosition.y * this.cellSize, + this.cellSize, + this.cellSize, ); this.ctx.globalAlpha = 1;