WIP WIP WIP

engine/dev/draw.ts

@@ -0,0 +1,37 @@
+import type { Polygon } from "#/engine/Polygon.ts";
+import type { Vector } from "#/engine/Vector.ts";
+
+export function drawPoint(
+	ctx: CanvasRenderingContext2D,
+	position: Vector,
+	radius: number = 1,
+	color: string = "#fff",
+): void {
+	ctx.beginPath();
+	ctx.arc(position.x, position.y, radius, 0, 2 * Math.PI);
+	ctx.fillStyle = color;
+	ctx.fill();
+}
+
+export function drawPolygon(
+	ctx: CanvasRenderingContext2D,
+	polygon: Polygon,
+	color: string = "#fff",
+): void {
+	drawPoint(ctx, polygon.position);
+	ctx.beginPath();
+	ctx.moveTo(
+		polygon.points[0].x + polygon.position.x,
+		polygon.points[0].y + polygon.position.y,
+	);
+
+	for (let i = polygon.points.length - 1; i >= 0; i--) {
+		ctx.lineTo(
+			polygon.points[i].x + polygon.position.x,
+			polygon.points[i].y + polygon.position.y,
+		);
+	}
+
+	ctx.strokeStyle = color;
+	ctx.stroke();
+}

engine/dev/main.tsx

@@ -3,6 +3,7 @@ import { type Component, createEffect, createSignal, onMount } from "solid-js";
 import { render } from "solid-js/web";
 import $, {
 	currentScene,
+	type SceneChange,
 	type SceneData,
 	sceneChangeSet,
 	sceneGraph,
@@ -121,6 +122,17 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 
 		document.addEventListener("mousemove", handleMouseMove);
 		document.addEventListener("mouseup", stopResizing);
+
+		if (location.hash) {
+			const callback: SceneChange = (sceneData) => {
+				const name = location.hash.substring(1);
+				if (sceneData.name !== name) {
+					setScene(name).catch(console.error);
+				}
+				sceneChangeSet.delete(callback);
+			};
+			sceneChangeSet.add(callback);
+		}
 	});
 
 	return (

engine/system/processPhysics.ts

@@ -0,0 +1,21 @@
+import $ from "#/engine/Scene.ts";
+import type { Vector } from "#/engine/Vector.ts";
+
+export type Collider = {};
+
+export type Collision = {};
+
+export function moveAndCollide(
+	collider: Collider,
+	velocity: Vector,
+	delta: number,
+): Collision {}
+
+export function processPhysics(
+	ctx: CanvasRenderingContext2D,
+	delta: number,
+): void {
+	for (const [id, collider] of $<Collider>("collider")!.entries()) {
+		const position = $<Vector>("position")!.get(id);
+	}
+}

game/entities/hero/entity.ts

@@ -1,3 +1,4 @@
+import { createCircle } from "#/engine/Circle.ts";
 import { defineEntity } from "#/engine/Entity.ts";
 import { keyboardInput } from "#/engine/Keyboard.ts";
 import { pointer } from "#/engine/Pointer.ts";
@@ -7,6 +8,10 @@ import {
 	createSpriteAnimation,
 	defineSpriteSheet,
 } from "#/engine/Sprite.ts";
+import {
+	type Collider,
+	moveAndCollide,
+} from "#/engine/system/processPhysics.ts";
 import { createVector, type Vector } from "#/engine/Vector.ts";
 import charIdle from "#/game/assets/char-idle.png";
 
@@ -18,11 +23,13 @@ const process = defineEntity("hero", {
 	sprite: createSprite(idleSrc),
 	animation: createSpriteAnimation(500, 2),
 	velocity: createVector(),
+	collider: createCircle(createVector(), 8),
 });
 
 process((id, delta) => {
 	const position = $<Vector>("position").get(id)!.value;
 	const velocity = $<Vector>("velocity").get(id)!.value;
+	const collider = $<Collider>("collider").get(id)!.value;
 
 	if (pointer.isDown) {
 		position.x = pointer.position.x;
@@ -39,4 +46,7 @@ process((id, delta) => {
 
 	velocity.x = 0;
 	velocity.y = 0;
+
+	const collision = moveAndCollide(collider, velocity, delta);
+	console.log(collision);
 });

game/scenes/barScene/scene.ts

@@ -1,53 +1,8 @@
-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);
 
-const polygon = createPolygon(createVector(32, 32), [
+process((_ctx, _delta) => {});
-	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);
-});

main.ts

@@ -3,6 +3,7 @@ import { listenPointer } from "#/engine/Pointer.ts";
 import { currentScene, setScene } from "#/engine/Scene.ts";
 import { animateSprites } from "#/engine/system/animateSprites.ts";
 import { drawSprites } from "#/engine/system/drawSprites.ts";
+import { processPhysics } from "#/engine/system/processPhysics.ts";
 import {
 	initViewport,
 	resetCtx,
@@ -19,6 +20,8 @@ function animate(timestamp: number): void {
 	resetCtx();
 	currentScene.process(viewport.ctx, delta);
 
+	processPhysics(viewport.ctx, delta);
+
 	animateSprites(delta);
 	drawSprites(viewport.ctx);