From b08479af405ba3f1b8448f8e2acd23ff9b533087 Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Wed, 31 Oct 2018 22:10:54 +0100 Subject: view: make entity anchor point configurable, default to center --- src/index.ts | 16 +++++++--------- src/view/entity.ts | 13 ++++++++----- 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 { +export async function loadSimpleEntity( + r: Renderer, + sprite: string, + anchor: [number, number] = [0.5, 0.5], +): Promise { 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(); } -- cgit v1.2.3