WIP

engine/Polygon.ts

@@ -1,7 +1,48 @@
-import type { Vector } from "#/engine/Vector.ts";
+import { createVector, type Vector } from "#/engine/Vector.ts";
 
 export type Polygon = {
 	position: Vector;
 	points: Array<Vector>;
 	axes: Array<Vector>;
 };
+
+export function createPolygon(
+	position: Vector,
+	points: Array<Vector>,
+): Polygon {
+	const axes = points.map(() => createVector());
+	const polygon = { position, points, axes };
+	updateAxes(polygon);
+
+	return polygon;
+}
+
+export function updateAxes({ points, axes }: Polygon): void {
+	const cap = axes.length - 1;
+	const p0 = points[0];
+	let pi = p0;
+
+	for (let i = 0; i < cap; i++) {
+		const pj = points[i + 1];
+
+		const nx = -(pj.y - pi.y);
+		const ny = pj.x - pi.x;
+
+		const invLen = 1.0 / Math.sqrt(nx * nx + ny * ny);
+
+		const axis = axes[i];
+		axis.x = nx * invLen;
+		axis.y = ny * invLen;
+
+		pi = pj;
+	}
+
+	const nx = -(p0.y - pi.y);
+	const ny = p0.x - pi.x;
+
+	const invLen = 1.0 / Math.sqrt(nx * nx + ny * ny);
+
+	const axis = axes[cap];
+	axis.x = nx * invLen;
+	axis.y = ny * invLen;
+}

engine/system/drawSprites.ts

@@ -27,13 +27,16 @@ export function drawSprites(ctx: CanvasRenderingContext2D): void {
 	for (const drawable of drawables.sort(
 		(a, b) => a.position.value.y - b.position.value.y,
 	)) {
+		const sprite = drawable.sprite.value;
+		const position = drawable.position.value;
+
 		drawSprite(
 			ctx,
-			spriteSheetMap.get(drawable.sprite.value.src)!,
+			spriteSheetMap.get(sprite.src)!,
-			drawable.sprite.value.xStart,
+			sprite.xStart,
-			drawable.sprite.value.yStart,
+			sprite.yStart,
-			drawable.position.value.x,
+			position.x,
-			drawable.position.value.y,
+			position.y,
 		);
 	}
 }

game/entities/hero/entity.ts

@@ -21,22 +21,22 @@ const process = defineEntity("hero", {
 });
 
 process((id, delta) => {
-	const position = $<Vector>("position").get(id)!;
+	const position = $<Vector>("position").get(id)!.value;
-	const velocity = $<Vector>("velocity").get(id)!;
+	const velocity = $<Vector>("velocity").get(id)!.value;
 
 	if (pointer.isDown) {
-		position.value.x = pointer.position.x;
+		position.x = pointer.position.x;
-		position.value.y = pointer.position.y;
+		position.y = pointer.position.y;
 	}
 
-	velocity.value.x -= keyboardInput.arrowLeft ? speed : 0;
+	velocity.x -= keyboardInput.arrowLeft ? speed : 0;
-	velocity.value.x += keyboardInput.arrowRight ? speed : 0;
+	velocity.x += keyboardInput.arrowRight ? speed : 0;
-	velocity.value.y -= keyboardInput.arrowUp ? speed : 0;
+	velocity.y -= keyboardInput.arrowUp ? speed : 0;
-	velocity.value.y += keyboardInput.arrowDown ? speed : 0;
+	velocity.y += keyboardInput.arrowDown ? speed : 0;
 
-	position.value.x = Math.round(velocity.value.x * delta + position.value.x);
+	position.x = Math.round(velocity.x * delta + position.x);
-	position.value.y = Math.round(velocity.value.y * delta + position.value.y);
+	position.y = Math.round(velocity.y * delta + position.y);
 
-	velocity.value.x = 0;
+	velocity.x = 0;
-	velocity.value.y = 0;
+	velocity.y = 0;
 });

game/scenes/barScene/scene.ts

@@ -1,8 +1,53 @@
+import { createPolygon, type Polygon } from "#/engine/Polygon.ts";
 import { defineScene } from "#/engine/Scene.ts";
+import { createVector, type Vector } from "#/engine/Vector.ts";
 import data from "./data.json";
 
 const { process, linkScenes } = defineScene(data);
 
 linkScenes(["testScene"] as const);
 
-process((_ctx, _delta) => {});
+const polygon = createPolygon(createVector(32, 32), [
+	createVector(0, 0),
+	createVector(0, 16),
+	createVector(16, 16),
+]);
+
+function drawPoint(
+	ctx: CanvasRenderingContext2D,
+	position: Vector,
+	radius: number = 2,
+	color: string = "#fff",
+): void {
+	ctx.beginPath();
+	ctx.arc(position.x, position.y, radius, 0, 2 * Math.PI);
+	ctx.fillStyle = color;
+	ctx.fill();
+}
+
+function drawPoly(
+	ctx: CanvasRenderingContext2D,
+	poly: Polygon,
+	trigger: boolean = false,
+): void {
+	drawPoint(ctx, poly.position);
+	ctx.beginPath();
+	ctx.moveTo(
+		poly.points[0].x + poly.position.x + 0.5,
+		poly.points[0].y + poly.position.y + 0.5,
+	);
+
+	for (let i = poly.points.length - 1; i >= 0; i--) {
+		ctx.lineTo(
+			poly.points[i].x + poly.position.x + 0.5,
+			poly.points[i].y + poly.position.y + 0.5,
+		);
+	}
+
+	ctx.strokeStyle = trigger ? "red" : "orange";
+	ctx.stroke();
+}
+
+process((ctx, _delta) => {
+	drawPoly(ctx, polygon);
+});