Commit dc172fd6 by Alexander Bazo

Refactor renderer component

parent 38964de7
......@@ -43,8 +43,8 @@ body {
border-radius: 5px;
border-width: 5px;
border-style: solid;
background-color: #1b744a;
border-color: #aaffd8;
background-color: #3f0d76;
border-color: #d2ccf3;
text-align: center;
line-height: 10vh;
font-size: 5vh;
......@@ -53,9 +53,9 @@ body {
#startButton:hover {
cursor: pointer;
background-color: #aaffd8;
border-color: #1b744a;
color: #1b744a;
background-color: #d2ccf3;
border-color: #3f0d76;
color: #3f0d76;
}
canvas {
......
var Config = {
GAZE_SERVER_URL: "ws://localhost:8001/gaze",
TARGET_FPS: 120,
SHOW_FPS: true,
SHOW_DEBUG_INFO: true,
USE_MOUSE_INPUT_AS_FAKE_GAZE_DATA: true,
USE_LOGGER: true,
SCREEN_WIDTH: screen.width,
SCREEN_HEIGHT: screen.height,
GAME_VERSION: 0.1,
};
Object.freeze(Config);
......
const BACKGROUND_COLOR = "#333",
DEFAULT_GAZE_POINT_RADIUS = 15,
DEFAULT_GAZE_POINT_COLOR = "#ff007b",
FPS_FONT = "16px ShareTech",
FPS_COLOR = "#ffffff",
MAX_GAZE_POINT_AGE = 500;
import GameRenderer from "./GameRenderer.js";
var lastUpdate,
lastDelta,
fpsBuffer = [];
class GameManager {
class GameManger {
setOptions(options) {
constructor() {
this.gazePoints = new Map();
}
}
setCanvas(canvas) {
this.canvas = canvas;
this.context = this.canvas.getContext("2d", { alpha: false });
this.canvas.style.backgroundColor = BACKGROUND_COLOR;
}
setFrameRate(fps) {
this.fps = fps;
}
showFPS() {
this.shouldDisplayFrameRate = true;
}
hideFPS() {
this.shouldDisplayFrameRate = false;
}
setSize(width, height) {
this.canvas.width = width;
this.canvas.height = height;
this.canvas.style.width = `${width}px`;
this.canvas.style.height = `${height}px`;
}
start() {
let targetFrameTime = 1000 / this.fps;
this.setUpdateTime();
this.loop = setInterval(this.onTick.bind(this), targetFrameTime);
}
setUpdateTime() {
lastUpdate = Date.now();
}
setDelta() {
lastDelta = Date.now() - lastUpdate;
}
addGazePoint(point) {
this.gazePoints.set(point.id, point);
}
removeGazePoint(point) {
this.gazePoints.delete(point.id);
}
onTick() {
this.setDelta();
this.updateGazePoints();
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.drawGazePoints();
if (this.shouldDisplayFrameRate === true) {
this.drawFrameRate();
}
this.setUpdateTime();
}
updateGazePoints() {
let now = Date.now();
for (let item of this.gazePoints) {
let point = item[1];
if (now - point.createdAt > MAX_GAZE_POINT_AGE) {
this.removeGazePoint(point);
}
}
}
drawGazePoints() {
let now = Date.now();
this.context.fillStyle = DEFAULT_GAZE_POINT_COLOR;
for (let item of this.gazePoints) {
let relativeAge = 1 - ((now - item[1].createdAt) /
MAX_GAZE_POINT_AGE);
this.context.save();
this.context.globalAlpha = relativeAge;
this.context.beginPath();
this.context.ellipse(item[1].targetX, item[1].targetY,
relativeAge * DEFAULT_GAZE_POINT_RADIUS, relativeAge * DEFAULT_GAZE_POINT_RADIUS, Math.PI / 4,
0, 2 * Math.PI);
this.context.fill();
this.context.closePath();
this.context.restore();
}
}
drawFrameRate() {
let fps = parseInt(1000 / lastDelta),
averageFps;
fpsBuffer.push(fps);
if(fpsBuffer.length === this.fps) {
averageFps = parseInt(fpsBuffer.reduce((a,b) => a + b, 0) / fpsBuffer.length);
fpsBuffer.shift();
}
this.context.beginPath();
this.context.font = FPS_FONT;
this.context.fillStyle = FPS_COLOR;
this.context.fillText(`FPS: ${averageFps}`, 30, 30);
this.context.closePath();
}
start() {
}
}
export default GameManger;
\ No newline at end of file
export default new GameManager();
\ No newline at end of file
const BACKGROUND_COLOR = "#333",
DEFAULT_GAZE_POINT_RADIUS = 15,
DEFAULT_GAZE_POINT_COLOR = "#3f0d76",
DEBUG_POSITION_OFFSET = 10,
DEBUG_FONT = "16px ShareTech",
DEBUG_COLOR = "#ffffff",
MAX_GAZE_POINT_AGE = 1000;
var lastUpdate,
lastDelta,
fpsBuffer,
gazePoints,
version,
debug,
frameRate,
canvas,
context,
loop;
function onTick() {
setDelta();
updateGazePoints();
context.clearRect(0, 0, canvas.width, canvas.height);
drawGazePoints();
if (debug === true) {
drawDebugInfo();
}
setUpdateTime();
}
function setUpdateTime() {
lastUpdate = Date.now();
}
function setDelta() {
lastDelta = Date.now() - lastUpdate;
}
function addGazePoint(point) {
gazePoints.set(point.id, point);
}
function removeGazePoint(point) {
gazePoints.delete(point.id);
}
function updateGazePoints() {
let now = Date.now();
for (let item of gazePoints) {
let point = item[1];
if (now - point.createdAt > MAX_GAZE_POINT_AGE) {
removeGazePoint(point);
}
}
}
function drawGazePoints() {
let now = Date.now();
context.fillStyle = DEFAULT_GAZE_POINT_COLOR;
for (let item of gazePoints) {
let relativeAge = 1 - ((now - item[1].createdAt) /
MAX_GAZE_POINT_AGE);
context.save();
context.globalAlpha = relativeAge;
context.beginPath();
context.ellipse(item[1].targetX, item[1].targetY,
relativeAge * DEFAULT_GAZE_POINT_RADIUS, relativeAge *
DEFAULT_GAZE_POINT_RADIUS, Math.PI / 4,
0, 2 * Math.PI);
context.fill();
context.closePath();
context.restore();
}
}
function drawDebugInfo() {
let fps = parseInt(1000 / lastDelta),
averageFps;
fpsBuffer.push(fps);
if (fpsBuffer.length === frameRate) {
averageFps = parseInt(fpsBuffer.reduce((a, b) => a + b, 0) / fpsBuffer.length);
fpsBuffer.shift();
}
context.beginPath();
context.font = DEBUG_FONT;
context.fillStyle = DEBUG_COLOR;
context.fillText(`${version} | ${averageFps}fps`, DEBUG_POSITION_OFFSET, canvas.height-DEBUG_POSITION_OFFSET);
context.closePath();
}
class GameRenderer {
constructor() {
fpsBuffer = [];
gazePoints = new Map();
}
start(options) {
canvas = options.canvas;
canvas.width = options.width;
canvas.height = options.height;
canvas.style.width = `${options.width}px`;
canvas.style.height = `${options.height}px`;
context = canvas.getContext("2d", { alpha: false });
canvas.style.backgroundColor = BACKGROUND_COLOR;
frameRate = options.frameRate;
version = options.version;
debug = options.debug;
setUpdateTime();
loop = setInterval(onTick, (1000 / frameRate));
}
addGazePoint(point) {
addGazePoint(point);
}
removeGazePoint(point) {
removeGazePoint(point);
}
}
export default new GameRenderer();
\ No newline at end of file
import Logger from "../utils/Logger.js";
import GameManager from "./GameManager.js";
import GameRenderer from "./GameRenderer.js";
var canvas, gm, provider;
var canvas, provider;
function init(config) {
function init(options) {
Logger.log("Starting StarGazer game");
canvas = config.canvas;
gm = new GameManager();
gm.setCanvas(canvas);
gm.setFrameRate(config.fps);
if (config.showFPS === true) {
gm.showFPS();
}
gm.setSize(config.width, config.height);
gm.start();
provider = config.gazeDataProvider;
canvas = options.canvas;
GameRenderer.start({
canvas: canvas,
frameRate: options.fps,
version: options.version,
debug: options.showDebug,
width: options.width,
height: options.height,
});
provider = options.gazeDataProvider;
provider.addEventListener("dataavailable", onGazeUpdate);
}
......@@ -22,7 +23,7 @@ function onGazeUpdate(event) {
let gazePoint = event.data;
gazePoint.linkTo(canvas);
if (gazePoint.hasLink) {
gm.addGazePoint(gazePoint);
GameRenderer.addGazePoint(gazePoint);
}
}
......
......@@ -20,7 +20,8 @@ function prepareGame() {
StarGazer.init({
canvas: canvas,
fps: Config.TARGET_FPS,
showFPS: Config.SHOW_FPS,
version: `Star Gazer, build ${Config.GAME_VERSION}`,
showDebug: Config.SHOW_DEBUG_INFO,
width: Config.SCREEN_WIDTH,
height: Config.SCREEN_HEIGHT,
gazeDataProvider: dataProvider,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment