feat: camera

This commit is contained in:
cha0s 2019-04-05 09:14:39 -04:00
parent baacea90a6
commit 867262e81d

View File

@ -13,8 +13,12 @@ import {WorldTime} from '../common/world-time';
// DOM.
const appNode = document.querySelector('.app');
// Graphics stage.
const stage = new Stage([640, 360]);
stage.scale = [2, 2];
let dirty = false;
const visibleSize = [320, 180];
const halfVisibleSize = Vector.scale(visibleSize, 0.5);
const visibleScale = [2, 2];
const stage = new Stage(Vector.mul(visibleSize, visibleScale));
stage.scale = visibleScale;
let isFocused = false;
stage.element.addEventListener('blur', () => {
isFocused = false;
@ -27,11 +31,21 @@ stage.addToDom(appNode);
const timeUi = document.createElement('div');
timeUi.className = 'time unselectable';
stage.ui.appendChild(timeUi);
// Handle "own" entity.
let selfEntity;
function hasSelfEntity() {
return selfEntity && 'string' !== typeof selfEntity;
}
// Create room.
const room = new Room();
room.world = new World();
const roomView = new RoomView(room, stage.renderer);
stage.addChild(roomView);
room.on('sizeChanged', () => {
if (hasSelfEntity() && selfEntity.is('followed')) {
selfEntity.camera.areaSize = room.size;
}
});
// Time.
const worldTime = new WorldTime();
let lastWorldTime = worldTime.humanReadable();
@ -40,11 +54,6 @@ const stateSynchronizer = new StateSynchronizer({
room,
worldTime,
});
// Handle "own" entity.
let selfEntity;
function hasSelfEntity() {
return selfEntity && 'string' !== typeof selfEntity;
}
room.on('entityAdded', (entity) => {
entity.removeTrait('controllable');
// Set self entity.
@ -53,6 +62,18 @@ room.on('entityAdded', (entity) => {
selfEntity = entity;
// Only self entity should be controllable.
entity.addTrait('controllable');
// Camera tracking.
entity.addTrait('followed');
const {camera} = entity;
camera.areaSize = room.size;
camera.on('realPositionChanged', () => {
roomView.position = Vector.round(
Vector.sub(halfVisibleSize, camera.realPosition)
);
dirty = true;
});
// Avoid the initial 'lerp.
camera.realPosition = camera.position;
}
}
});
@ -154,7 +175,6 @@ const predictionHandle = setInterval(() => {
}
}, 1000 / 80);
// State updates.
let dirty = false;
function onMessage({type, payload}) {
switch (type) {
case 'state-update':