import GameConfig from "../config/GameConfiguration.js"; import Time from "../utils/Time.js"; import Enemy from "./objects/Enemy.js"; var canvas, context, fpsBuffer, currentFPS, lastDebugFrame = 0; function draw(state, delta) { updateFPS(delta); context.clearRect(0, 0, canvas.width, canvas.height); drawEnemies(state.enemies); drawGazePoints(state.gazePoints); if (GameConfig.getShowDebugInfoOnScreen() === true) { drawDebugInfo(); } } // TODO: Move fps callculation to manager since we need it there to use delta function updateFPS(delta) { let fps = Time.ONE_SECOND_IN_MS / delta; fpsBuffer.push(fps); if (fpsBuffer.length === GameConfig.getFPSBufferLenght()) { currentFPS = parseInt(fpsBuffer.reduce((a, b) => a + b, 0) / fpsBuffer.length); fpsBuffer.shift(); } } function drawEnemies(enemies) { for (let i = 0; i < enemies.length; i++) { Enemy.draw.call(enemies[i], context); } } function drawGazePoints(gazePoints) { context.fillStyle = GameConfig.getGazePointColor(); for (let i = 0; i < gazePoints.length; i++) { drawSingleGazePoint(gazePoints[i]); } } function drawSingleGazePoint(gazePoint) { if(Date.now() - lastDebugFrame > 1000) { console.log(gazePoint); lastDebugFrame = Date.now(); console.log((1 - gazePoint.relativeAge) * GameConfig.getGazePointRadius()); console.log((1 - gazePoint.relativeAge)); } let inversedAge = 1 - gazePoint.relativeAge, radius = inversedAge * GameConfig.getGazePointRadius(); context.save(); context.globalAlpha = inversedAge; context.globalAlpha = 1; context.beginPath(); context.ellipse(gazePoint.screenX, gazePoint.screenY, radius, radius, Math.PI / 4, 0, 2 * Math.PI); context.closePath(); context.fill(); context.restore(); } function drawDebugInfo() { context.beginPath(); context.font = GameConfig.getDebugInfoFont(); context.fillStyle = GameConfig.getDebugInfoFonColor(); context.fillText(`${GameConfig.getVersion()} | ${currentFPS}fps`, GameConfig.getDebugInfoPosition() .x, GameConfig.getDebugInfoPosition().y); context.closePath(); } class GameRenderer { init(gameCanvas) { fpsBuffer = []; currentFPS = 0; canvas = gameCanvas; canvas.width = GameConfig.getScreenWidth(); canvas.height = GameConfig.getScreenHeight(); canvas.style.width = `${GameConfig.getScreenWidth()}px`; canvas.style.height = `${GameConfig.getScreenHeight()}px`; context = canvas.getContext("2d", { alpha: false }); canvas.style.backgroundColor = GameConfig.getWorldBackgroundColor(); } render(state, delta) { draw(state, delta); } } export default new GameRenderer();