view: make entity anchor point configurable, default to center

This commit is contained in:
Matthias Schiffer 2018-10-31 22:10:54 +01:00
parent 1f9cd7a110
commit b08479af40
Signed by: neocturne
GPG key ID: 16EF3F64CB201D9C
2 changed files with 15 additions and 14 deletions

View file

@ -8,8 +8,7 @@ import DirectionHandler from './view/input/DirectionHandler';
import { loadMap } from './view/map'; import { loadMap } from './view/map';
import Renderer from './view/renderer/Renderer'; import Renderer from './view/renderer/Renderer';
const entityCenter = vec2.create(); const entityPos = vec2.create();
const entityTranslation = vec2.create();
const entityMovement = vec2.create(); const entityMovement = vec2.create();
window.onload = async () => { window.onload = async () => {
@ -42,18 +41,17 @@ window.onload = async () => {
diff = time - prevTime; diff = time - prevTime;
prevTime = time; prevTime = time;
vec2.scaleAndAdd(entityCenter, entityCenter, entityMovement, diff / 100); vec2.scaleAndAdd(entityPos, entityPos, entityMovement, diff / 100);
vec2.scale(entityCenter, entityCenter, res); vec2.scale(entityPos, entityPos, res);
vec2.round(entityCenter, entityCenter); vec2.round(entityPos, entityPos);
vec2.scale(entityCenter, entityCenter, 1 / res); vec2.scale(entityPos, entityPos, 1 / res);
renderer.setCenter(entityCenter); renderer.setCenter(entityPos);
renderer.clear(); renderer.clear();
mapView.render(); mapView.render();
vec2.sub(entityTranslation, entityCenter, [0.5, 0.5]); renderer.setTranslation(entityPos);
renderer.setTranslation(entityTranslation);
entity.render(); entity.render();
window.requestAnimationFrame(render); window.requestAnimationFrame(render);

View file

@ -2,14 +2,17 @@ import Renderer from './renderer/Renderer';
import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite'; import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite';
import { loadImage, mkTexture } from './util/image'; 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 tile = await loadImage(`resources/sprite/entity/${sprite}.png`);
const texture = mkTexture(r.getContext(), tile); const texture = mkTexture(r.getContext(), tile);
const [x, y] = anchor;
const builder = new SpriteViewBuilder(r, texture); const builder = new SpriteViewBuilder(r, texture);
builder.addSprite([-x, -y, 1 - x, 1 - y], [0, 0, 1, 1]);
const coords: SpriteCoords = [0, 0, 1, 1];
builder.addSprite(coords, coords);
return builder.build(); return builder.build();
} }