USE OFFSET

game/entities/hero/entity.ts

@@ -2,7 +2,7 @@ import { defineEntity } from "#/engine/Entity.ts";
 import { keyboardInput } from "#/engine/Keyboard.ts";
 import { createEffect, createSignal } from "#/engine/lib/Signal.ts";
 import { pointer } from "#/engine/Pointer.ts";
-import { createRect, fillRect, strokeRect } from "#/engine/Rect.ts";
+import { createRect } from "#/engine/Rect.ts";
 import $ from "#/engine/Scene.ts";
 import {
 	createSprite,
@@ -10,7 +10,6 @@ import {
 	defineSpriteSheet,
 } from "#/engine/Sprite.ts";
 import {
-	type Collider,
 	createCollider,
 	moveAndSlide,
 	Shape,
@@ -21,7 +20,6 @@ import {
 	scale,
 	type Vector,
 } from "#/engine/Vector.ts";
-import { viewport } from "#/engine/Viewport.ts";
 import charIdle from "#/game/assets/char-idle.png";
 
 const [speed, setSpeed] = createSignal(0.1);
@@ -29,10 +27,10 @@ const idleSrc = await defineSpriteSheet(charIdle, 2, 4);
 
 const process = defineEntity("hero", {
 	position: createVector(),
-	sprite: createSprite(idleSrc),
+	sprite: createSprite(idleSrc, createVector(-8, -8)),
 	animation: createSpriteAnimation(500, 2),
 	velocity: createVector(),
-	collider: createCollider(Shape.Rect, createRect(createVector(), 16, 16)),
+	collider: createCollider(Shape.Rect, createRect(24, 16)),
 });
 
 createEffect(() => {
@@ -44,7 +42,6 @@ let onceGuard = true;
 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;
@@ -73,7 +70,4 @@ process((id, delta) => {
 
 	velocity.x = 0;
 	velocity.y = 0;
-
-	fillRect(viewport.ctx, collider.aabb, "orange");
-	strokeRect(viewport.ctx, collider.aabb, "red");
 });

game/entities/portal/entity.ts

@@ -1,32 +1,20 @@
 import { defineEntity } from "#/engine/Entity.ts";
-import { createRect, fillRect, strokeRect } from "#/engine/Rect.ts";
-import $ from "#/engine/Scene.ts";
+import { createRect } from "#/engine/Rect.ts";
 import {
 	createSprite,
 	createSpriteAnimation,
 	defineSpriteSheet,
 } from "#/engine/Sprite.ts";
-import {
-	type Collider,
-	createCollider,
-	Shape,
-} from "#/engine/system/physics.ts";
-import { createVector, type Vector } from "#/engine/Vector.ts";
-import { viewport } from "#/engine/Viewport";
+import { createCollider, Shape } from "#/engine/system/physics.ts";
+import { createVector } from "#/engine/Vector.ts";
 import portal from "#/game/assets/portal.png";
 
 const portalSrc = await defineSpriteSheet(portal, 3, 1);
+const position = createVector();
 
-const process = defineEntity("portal", {
-	position: createVector(),
-	sprite: createSprite(portalSrc),
+defineEntity("portal", {
+	position,
+	sprite: createSprite(portalSrc, createVector(-8, -8)),
 	animation: createSpriteAnimation(400, 0),
-	collider: createCollider(Shape.Rect, createRect(createVector(), 16, 16)),
-});
-
-process((id, delta) => {
-	const collider = $<Collider>("collider").get(id)!.value;
-
-	fillRect(viewport.ctx, collider.aabb, "orange");
-	strokeRect(viewport.ctx, collider.aabb, "red");
+	collider: createCollider(Shape.Rect, createRect(16, 16)),
 });

game/entities/testEntity/entity.ts

@@ -23,6 +23,7 @@ const sprites = {
 		yStart: 0,
 		width: 16,
 		height: 16,
+		offset: createVector(-8, -8),
 	},
 	walk: {
 		src: srcs.walk,
@@ -30,6 +31,7 @@ const sprites = {
 		yStart: 0,
 		width: 16,
 		height: 16,
+		offset: createVector(-8, -8),
 	},
 };
 
@@ -38,6 +40,8 @@ const animations = {
 	walk: createSpriteAnimation(250, 2),
 };
 
+const position = createVector();
+
 const process = defineEntity<{
 	position: Vector;
 	animation: SpriteAnimation;
@@ -52,7 +56,7 @@ const process = defineEntity<{
 	};
 	stuff: number;
 }>("testEntity", {
-	position: createVector(),
+	position,
 	animation: animations.idle,
 	animations: animations,
 	sprite: sprites.idle,