view: make entity anchor point configurable, default to center

2 files changed, 15 insertions, 14 deletions

diff --git a/src/index.ts b/src/index.ts
index b6bcd26..4a06ab2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,8 +8,7 @@ import DirectionHandler from './view/input/DirectionHandler';
 import { loadMap } from './view/map';
 import Renderer from './view/renderer/Renderer';
 
-const entityCenter = vec2.create();
-const entityTranslation = vec2.create();
+const entityPos = vec2.create();
 const entityMovement = vec2.create();
 
 window.onload = async () => {
@@ -42,18 +41,17 @@ window.onload = async () => {
 			diff = time - prevTime;
 		prevTime = time;
 
-		vec2.scaleAndAdd(entityCenter, entityCenter, entityMovement, diff / 100);
-		vec2.scale(entityCenter, entityCenter, res);
-		vec2.round(entityCenter, entityCenter);
-		vec2.scale(entityCenter, entityCenter, 1 / res);
+		vec2.scaleAndAdd(entityPos, entityPos, entityMovement, diff / 100);
+		vec2.scale(entityPos, entityPos, res);
+		vec2.round(entityPos, entityPos);
+		vec2.scale(entityPos, entityPos, 1 / res);
 
-		renderer.setCenter(entityCenter);
+		renderer.setCenter(entityPos);
 		renderer.clear();
 
 		mapView.render();
 
-		vec2.sub(entityTranslation, entityCenter, [0.5, 0.5]);
-		renderer.setTranslation(entityTranslation);
+		renderer.setTranslation(entityPos);
 		entity.render();
 
 		window.requestAnimationFrame(render);
diff --git a/src/view/entity.ts b/src/view/entity.ts
index d95d924..57969a2 100644
--- a/src/view/entity.ts
+++ b/src/view/entity.ts
@@ -2,14 +2,17 @@ import Renderer from './renderer/Renderer';
 import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite';
 import { loadImage, mkTexture } from './util/image';
 
-export async function loadSimpleEntity(r: Renderer, sprite: string): Promise<SpriteView> {
+export async function loadSimpleEntity(
+	r: Renderer,
+	sprite: string,
+	anchor: [number, number] = [0.5, 0.5],
+): Promise<SpriteView> {
 	const tile = await loadImage(`resources/sprite/entity/${sprite}.png`);
 	const texture = mkTexture(r.getContext(), tile);
 
-	const builder = new SpriteViewBuilder(r, texture);
-
-	const coords: SpriteCoords = [0, 0, 1, 1];
-	builder.addSprite(coords, coords);
+	const [x, y] = anchor;
 
+	const builder = new SpriteViewBuilder(r, texture);
+	builder.addSprite([-x, -y, 1 - x, 1 - y], [0, 0, 1, 1]);
 	return builder.build();
 }