Updated the GameEngine

Signed-off-by: Avior <github@avior.me>

src/GameEngine/Renderer/ColorRenderer.ts

@@ -1,24 +0,0 @@
-import GameEngine from 'GameEngine'
-import Component2D from 'GameEngine/Component2D'
-import Renderer from '.'
-
-export default class ColorRenderer implements Renderer {
-
-	public constructor(
-		private component: Component2D,
-		private color: string
-	) {}
-
-	public async render(ge: GameEngine, ctx: CanvasRenderingContext2D) {
-		if (!this.component.pos) {
-			return
-		}
-		ctx.fillStyle = this.color
-		ctx.fillRect(
-			this.component.pos.x * (ge.caseSize[0]),
-			this.component.pos.y * (ge.caseSize[1]),
-			(this.component.width() ?? ge.caseSize[0]) * ge.caseSize[0],
-			(this.component.height() ?? ge.caseSize[1]) * ge.caseSize[1]
-		)
-	}
-}

src/GameEngine/Renderer/ImageRenderer.ts

@@ -1,25 +0,0 @@
-import GameEngine from 'GameEngine'
-import Asset from 'GameEngine/Asset'
-import Component2D from 'GameEngine/Component2D'
-import Renderer from '.'
-
-export default class ImageRenderer implements Renderer {
-
-	public constructor(
-		private component: Component2D,
-		private image: Asset
-	) {}
-
-	public async render(ge: GameEngine, ctx: CanvasRenderingContext2D) {
-		if (!this.component.pos) {
-			return
-		}
-		ctx.drawImage(
-			await this.image.get(),
-			this.component.pos.x * (ge.caseSize[0]),
-			this.component.pos.y * (ge.caseSize[1]),
-			(this.component.width() ?? ge.caseSize[0]) * ge.caseSize[0],
-			(this.component.height() ?? ge.caseSize[1]) * ge.caseSize[1]
-		)
-	}
-}

src/GameEngine/Renderer/RectRenderer.ts

@@ -0,0 +1,52 @@
+import { objectLoop } from '@dzeio/object-util'
+import GameEngine from 'GameEngine'
+import Asset from 'GameEngine/Asset'
+import Component2D from 'GameEngine/Component2D'
+import Renderer from '.'
+
+interface Params {
+	material?: string | Asset
+	stroke?: string
+}
+
+export default class RectRenderer extends Renderer implements Partial<Params> {
+
+	public material?: string | Asset
+	public stroke?: string
+
+	public constructor(component: Component2D, params?: Params) {
+		super(component)
+		objectLoop(params ?? {}, (v, k) => {this[k as 'material'] = v})
+	}
+
+	public async render(ge: GameEngine, ctx: CanvasRenderingContext2D) {
+		const position = this.getPosition()
+		const item: [number, number, number, number] = [
+			// source x
+			// 0 - 1.5 - -1.5
+			position.x * (ge.caseSize.x),
+			// source y
+			position.y * (ge.caseSize.y),
+			// source end X
+			this.component.scale.x * (ge.caseSize.x),
+			// source end Y
+			this.component.scale.y * (ge.caseSize.y)
+		]
+
+		if (this.material instanceof Asset) {
+			ctx.drawImage(
+				await this.material.get(),
+				...item
+			)
+			return
+		}
+		if (this.material) {
+			ctx.fillStyle = this.material
+			ctx.fillRect(...item)
+		}
+		if (this.stroke) {
+			ctx.strokeStyle = this.stroke
+			ctx.strokeRect(...item)
+		}
+	}
+}

src/GameEngine/Renderer/TileRenderer.ts

@@ -1,31 +1,44 @@
+import { objectLoop } from '@dzeio/object-util'
 import GameEngine from 'GameEngine'
+import Vector2D from 'GameEngine/2D/Vector2D'
 import Component2D from 'GameEngine/Component2D'
 import Tileset from 'GameEngine/Tileset'
 import Renderer from '.'
 
-export default class TileRenderer implements Renderer {
+interface Params {
+	tileset?: Tileset
+	id?: number
+}
 
-	public constructor(
-		private component: Component2D,
-		private tileset: Tileset,
-		private id: number
-	) {}
+/**
+ * TODO: Add origin support
+ */
+export default class TileRenderer extends Renderer implements Params {
+
+	public tileset?: Tileset
+	public id?: number
+
+	public constructor(component: Component2D, params?: Params) {
+		super(component)
+		objectLoop(params ?? {}, (v, k) => {this[k as 'id'] = v})
+	}
 
 	public async render(ge: GameEngine, ctx: CanvasRenderingContext2D) {
-		if (!this.component.pos) {
+		if (!this.tileset || typeof this.id !== 'number') {
 			return
 		}
 		const {sx, sy} = this.tileset.getSourceData(this.id)
+		const position = this.getPosition()
 		ctx.drawImage(
 			await this.tileset.asset.get(),
 			sx,
 			sy,
-			this.tileset.width(),
-			this.tileset.height(),
-			this.component.pos.x * (ge.caseSize[0]),
-			this.component.pos.y * (ge.caseSize[1]),
-			(this.component.width() ?? ge.caseSize[0]) * ge.caseSize[0],
-			(this.component.height() ?? ge.caseSize[1]) * ge.caseSize[1]
+			this.tileset.width(this.id),
+			this.tileset.height(this.id),
+			position.x * (ge.caseSize.x),
+			position.y * (ge.caseSize.y),
+			(this.component.scale.x ?? ge.caseSize.x) * ge.caseSize.x,
+			(this.component.scale.y ?? ge.caseSize.y) * ge.caseSize.y
 		)
 	}
 }

src/GameEngine/Renderer/index.ts

@@ -1,5 +1,21 @@
 import GameEngine from 'GameEngine'
+import Vector2D from 'GameEngine/2D/Vector2D'
+import Component2D from 'GameEngine/Component2D'
 
-export default interface Renderer {
-	render(ge: GameEngine, ctx: CanvasRenderingContext2D): Promise<void>
+// eslint-disable-next-line @typescript-eslint/ban-types
+export default abstract class Renderer {
+	public constructor(
+		protected component: Component2D
+	) {}
+
+	protected getPosition(): Vector2D {
+		const ge = GameEngine.getGameEngine()
+		const realPosition = ge.currentScene.camera.topLeft.sum(this.component.position)
+		return new Vector2D(
+			realPosition.x - this.component.scale.x / 2 - this.component.origin.x,
+			realPosition.y - this.component.scale.y / 2 - this.component.origin.y
+		)
+	}
+
+	public abstract render(ge: GameEngine, ctx: CanvasRenderingContext2D): Promise<void>
 }