diff --git a/engine/Polygon.ts b/engine/Polygon.ts index 03b5f39..880dd7c 100644 --- a/engine/Polygon.ts +++ b/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; axes: Array; }; + +export function createPolygon( + position: Vector, + points: Array, +): 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; +} diff --git a/engine/system/drawSprites.ts b/engine/system/drawSprites.ts index bc0876f..e9246a0 100644 --- a/engine/system/drawSprites.ts +++ b/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)!, - drawable.sprite.value.xStart, - drawable.sprite.value.yStart, - drawable.position.value.x, - drawable.position.value.y, + spriteSheetMap.get(sprite.src)!, + sprite.xStart, + sprite.yStart, + position.x, + position.y, ); } } diff --git a/game/entities/hero/entity.ts b/game/entities/hero/entity.ts index a3cb4f5..7070040 100644 --- a/game/entities/hero/entity.ts +++ b/game/entities/hero/entity.ts @@ -21,22 +21,22 @@ const process = defineEntity("hero", { }); process((id, delta) => { - const position = $("position").get(id)!; - const velocity = $("velocity").get(id)!; + const position = $("position").get(id)!.value; + const velocity = $("velocity").get(id)!.value; if (pointer.isDown) { - position.value.x = pointer.position.x; - position.value.y = pointer.position.y; + position.x = pointer.position.x; + position.y = pointer.position.y; } - velocity.value.x -= keyboardInput.arrowLeft ? speed : 0; - velocity.value.x += keyboardInput.arrowRight ? speed : 0; - velocity.value.y -= keyboardInput.arrowUp ? speed : 0; - velocity.value.y += keyboardInput.arrowDown ? speed : 0; + velocity.x -= keyboardInput.arrowLeft ? speed : 0; + velocity.x += keyboardInput.arrowRight ? speed : 0; + velocity.y -= keyboardInput.arrowUp ? speed : 0; + velocity.y += keyboardInput.arrowDown ? speed : 0; - position.value.x = Math.round(velocity.value.x * delta + position.value.x); - position.value.y = Math.round(velocity.value.y * delta + position.value.y); + position.x = Math.round(velocity.x * delta + position.x); + position.y = Math.round(velocity.y * delta + position.y); - velocity.value.x = 0; - velocity.value.y = 0; + velocity.x = 0; + velocity.y = 0; }); diff --git a/game/scenes/barScene/scene.ts b/game/scenes/barScene/scene.ts index bccf16b..819a62d 100644 --- a/game/scenes/barScene/scene.ts +++ b/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); +});