The great move >.<

game/assets/hex-grid.svg

@@ -0,0 +1,34 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="64"
+  height="56"
+  viewBox="1.7320508 1.7320508 6.93 5.4"
+  stroke-width="0.1"
+>
+  <g transform="translate(1.732,2)" fill="#000" stroke="#161616">
+    <path
+      d="M 1.7321017,1 0,2.0000001 -1.732,1 V -0.99999975 L 5.078e-5,-2 1.732,-0.99999975 Z"
+    />
+    <path
+      d="M 3.4641018,4 1.732,5.0000001 0,4 V 2.0000002 L 1.7320508,1 3.4640001,2.0000002 Z"
+    />
+    <path
+      d="M 6.9284898,4.0004557 5.196388,5.0004558 3.464388,4.0004557 V 2.0004559 L 5.1964388,1.0004557 6.9283881,2.0004559 Z"
+    />
+    <path
+      d="M 5.196388,7 3.4642862,8.0000001 1.7322862,7 V 5.0000002 L 3.464337,4 5.1962863,5.0000002 Z"
+    />
+    <path
+      d="M 1.7321018,7 -3e-8,8.0000001 -1.732,7 V 5.0000002 L 5.077e-5,4 1.7320001,5.0000002 Z"
+    />
+    <path
+      d="M 5.1961018,1 3.464,2.0000001 1.732,1 V -0.9999998 L 3.4640508,-2 5.1960001,-0.9999998 Z"
+    />
+    <path
+      d="M 8.6601018,0.99999998 6.928,2.0000001 5.196,0.99999998 V -0.9999998 L 6.9280508,-2 8.6600001,-0.9999998 Z"
+    />
+    <path
+      d="M 8.6601018,7 6.928,8.0000001 5.196,7 V 5.0000002 L 6.9280508,4 8.6600001,5.0000002 Z"
+    />
+  </g>
+</svg>

game/entities/hero/entity.ts

@@ -0,0 +1,34 @@
+import { createAnimation, playAnimation } from "#/engine/Animation.ts";
+import { defineEntity } from "#/engine/Entity.ts";
+import { keyboardInput } from "#/engine/Keyboard.ts";
+import { pointer } from "#/engine/Pointer.ts";
+import { fromSrc, type Sprite } from "#/engine/Sprite.ts";
+import charIdle from "#/game/assets/char-idle.png";
+
+const idle: Sprite = await fromSrc(charIdle, 2, 4);
+
+const { animate, process } = defineEntity("hero", {
+	animation: createAnimation(idle, 500, 2),
+});
+
+animate((entity, ctx, delta) => {
+	playAnimation(
+		ctx,
+		entity.animation,
+		entity.position.x,
+		entity.position.y,
+		delta,
+	);
+});
+
+process((entity, delta) => {
+	if (pointer.isDown) {
+		entity.position.x = pointer.position.x;
+		entity.position.y = pointer.position.y;
+	}
+
+	entity.position.x -= keyboardInput.arrowLeft ? 1 : 0;
+	entity.position.x += keyboardInput.arrowRight ? 1 : 0;
+	entity.position.y -= keyboardInput.arrowUp ? 1 : 0;
+	entity.position.y += keyboardInput.arrowDown ? 1 : 0;
+});

game/entities/portal/entity.ts

@@ -0,0 +1,20 @@
+import { createAnimation, playAnimation } from "#/engine/Animation.ts";
+import { defineEntity } from "#/engine/Entity.ts";
+import { fromSrc, type Sprite } from "#/engine/Sprite.ts";
+import portal from "#/game/assets/portal.png";
+
+const sprite: Sprite = await fromSrc(portal, 3, 1);
+
+const { animate } = defineEntity("portal", {
+	animation: createAnimation(sprite, 400, 0),
+});
+
+animate((entity, ctx, delta) => {
+	playAnimation(
+		ctx,
+		entity.animation,
+		entity.position.x,
+		entity.position.y,
+		delta,
+	);
+});

game/entities/testEntity/entity.ts

@@ -0,0 +1,55 @@
+import {
+	type Animation,
+	createAnimation,
+	playAnimation,
+} from "#/engine/Animation.ts";
+import { defineEntity } from "#/engine/Entity.ts";
+import { loadImage } from "#/engine/lib/loadImage.ts";
+import { createSprite } from "#/engine/Sprite.ts";
+import { viewport } from "#/engine/Viewport.ts";
+import charIdle from "#/game/assets/char-idle.png";
+import charWalk from "#/game/assets/char-walk.png";
+
+const sprites = {
+	idle: createSprite(await loadImage(charIdle), 2, 4),
+	walk: createSprite(await loadImage(charWalk), 4, 4),
+};
+
+const animations = {
+	idle: createAnimation(sprites.idle, 500, 2),
+	walk: createAnimation(sprites.walk, 250, 2),
+};
+
+const { animate, process } = defineEntity<{
+	animation: Animation;
+	animations: {
+		idle: Animation;
+		walk: Animation;
+	};
+	stuff: number;
+}>("testEntity", {
+	animations,
+	animation: animations.idle,
+	stuff: 1,
+});
+
+animate((entity, ctx, delta) => {
+	playAnimation(
+		ctx,
+		entity.animation,
+		entity.position.x,
+		entity.position.y,
+		delta,
+	);
+});
+
+process((entity, delta) => {
+	entity.position.x += entity.stuff * 0.5;
+	if (entity.position.x > viewport.canvas.width - 16) {
+		entity.stuff = -1;
+		entity.animation = entity.animations.walk;
+	} else if (entity.position.x < 0) {
+		entity.stuff = 1;
+		entity.animation = entity.animations.idle;
+	}
+});

game/scenes/barScene/data.json

@@ -0,0 +1,14 @@
+{
+	"name": "barScene",
+	"width": 240,
+	"height": 160,
+	"entities": [
+		{
+			"name": "hero",
+			"position": {
+				"x": 0,
+				"y": 0
+			}
+		}
+	]
+}

game/scenes/barScene/scene.ts

@@ -0,0 +1,8 @@
+import { defineScene } from "#/engine/Scene.ts";
+import data from "./data.json";
+
+const { process, linkScenes } = defineScene(data);
+
+linkScenes(["testScene"] as const);
+
+process((_ctx, _delta) => {});

game/scenes/fooScene/data.json

@@ -0,0 +1,21 @@
+{
+	"name": "fooScene",
+	"width": 80,
+	"height": 48,
+	"entities": [
+		{
+			"name": "hero",
+			"position": {
+				"x": 0,
+				"y": 0
+			}
+		},
+		{
+			"name": "testEntity",
+			"position": {
+				"x": 24,
+				"y": 16
+			}
+		}
+	]
+}

game/scenes/fooScene/scene.ts

@@ -0,0 +1,8 @@
+import { defineScene } from "#/engine/Scene.ts";
+import data from "./data.json";
+
+const { process, linkScenes } = defineScene(data);
+
+linkScenes(["barScene"] as const);
+
+process((_ctx, _delta) => {});

game/scenes/testScene/data.json

@@ -0,0 +1,28 @@
+{
+	"name": "testScene",
+	"width": 80,
+	"height": 48,
+	"entities": [
+		{
+			"name": "hero",
+			"position": {
+				"x": 0,
+				"y": 0
+			}
+		},
+		{
+			"name": "portal",
+			"position": {
+				"x": 16,
+				"y": 16
+			}
+		},
+		{
+			"name": "testEntity",
+			"position": {
+				"x": 32,
+				"y": 32
+			}
+		}
+	]
+}

game/scenes/testScene/scene.ts

@@ -0,0 +1,33 @@
+import { pointer } from "#/engine/Pointer.ts";
+import { defineScene } from "#/engine/Scene.ts";
+import type { Vector } from "#/engine/Vector.ts";
+import data from "./data.json";
+
+const { process, preProcess, linkScenes } = defineScene(data);
+
+linkScenes(["fooScene"] as const);
+
+preProcess((entityInstanceMap) => {
+	const entity = entityInstanceMap.get(data.entities[0].name);
+	const instance = entity!.instances[0];
+
+	instance.position.x = data.width - 16;
+	instance.position.y = data.height - 16;
+});
+
+function drawPoint(
+	ctx: CanvasRenderingContext2D,
+	position: Vector,
+	radius: number = 4,
+): void {
+	ctx.beginPath();
+	ctx.arc(position.x, position.y, radius, 0, 2 * Math.PI);
+	ctx.strokeStyle = "#ff9000";
+	ctx.stroke();
+}
+
+process((ctx, delta) => {
+	if (!pointer.isDown) {
+		drawPoint(ctx, pointer.position);
+	}
+});