import GameConfig from "../config/GameConfiguration.js"; import Time from "../utils/Time.js"; var canvas, context, fpsBuffer, currentFPS; // TODO: Look for values to be copied and stored from GameConfig to reduce access time function draw(state) { updateFPS(state.delta); context.clearRect(0, 0, canvas.width, canvas.height); drawObjects(state.objects); 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 drawObjects(objects) { for (let i = 0; i < objects.length; i++) { objects[i].draw(context); } } function drawGazePoints(gazePoints) { context.fillStyle = GameConfig.getGazePointColor(); for (let i = 0; i < gazePoints.length; i++) { drawSingleGazePoint(gazePoints[i]); } } function drawSingleGazePoint(gazePoint) { let inversedAge = 1 - gazePoint.relativeAge, radius = inversedAge * GameConfig.getGazePointRadius(); context.save(); context.globalAlpha = inversedAge; context.beginPath(); context.ellipse(gazePoint.targetX, gazePoint.targetY, 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) { draw(state); } } export default new GameRenderer();