From cd83ca3058dac4caa8bb214a244fa45fbb75488c Mon Sep 17 00:00:00 2001 From: "Juan J. Martinez" Date: Fri, 29 Dec 2023 00:01:33 +0000 Subject: Simplified render, use a back buffer So we only scale once. --- js/game.js | 72 ++++++++++++++++++++++++++---------------------------------- js/mygame.js | 8 +------ 2 files changed, 32 insertions(+), 48 deletions(-) (limited to 'js') diff --git a/js/game.js b/js/game.js index 85b0f91..f39a6d1 100644 --- a/js/game.js +++ b/js/game.js @@ -1,11 +1,12 @@ class Game { - constructor(canvas) { + constructor(canvas, width, height) { + this.buffer = document.createElement("canvas"); + this.buffer.width = width; + this.buffer.height = height; + this.ctx = this.buffer.getContext("2d"); this.canvas = canvas; - this.ctx = canvas.getContext("2d"); - - // override this for a differnt size - this.width = 320; - this.height = 240; + this.width = width; + this.height = height; // override this with your data to be loaded: // @@ -86,10 +87,6 @@ class Game { this.scale = Math.floor(window.innerHeight / this.height); this.canvas.width = this.width * this.scale; this.canvas.height = this.height * this.scale; - - if (this.ctx != undefined) { - this.ctx.imageSmoothingEnabled = false; - } } loop(now) { @@ -159,47 +156,30 @@ class Game { } } - // erases the canvas and sets the scaling - drawStart() { - this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); - this.ctx.save(); - this.ctx.scale(this.scale, this.scale); - } - - // restores the context - drawEnd() { - this.ctx.restore(); - } - // won't use drawStart/drawEnd because may render regular fonts drawLoading() { - this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); - this.ctx.save(); - // height of the loading bar - const h = 6; + const h = 20; + + let ctx = this.canvas.getContext("2d"); if (this.loadingError == true) { - this.ctx.fillStyle = "rgb(255, 255, 255)"; - this.ctx.font = "caption"; - this.ctx.fillText( + ctx.fillStyle = "rgb(255, 128, 128)"; + ctx.font = "caption"; + ctx.fillText( "ERROR Loading Resources", - Math.floor(this.width * 0.1 * this.scale), - Math.floor((this.height / 2 - h - 2) * this.scale) + Math.floor(ctx.canvas.width * 0.1), + Math.floor(ctx.canvas.height / 2 - h - h / 2) ); } - this.ctx.scale(this.scale, this.scale); - - this.ctx.fillStyle = "rgb(128, 128, 128)"; - this.ctx.fillRect(Math.floor(this.width * 0.1), Math.floor(this.height / 2) - h, this.width - Math.floor(this.width * 0.2), h); - this.ctx.fillStyle = "rgb(255, 255, 255)"; - this.ctx.fillRect(Math.floor(this.width * 0.1), Math.floor(this.height / 2) - h, ( - Math.floor(this.resSize * (this.width - Math.floor(this.width * 0.2)) / this.dataSize) + ctx.fillStyle = "rgb(128, 128, 128)"; + ctx.fillRect(Math.floor(ctx.canvas.width * 0.1), Math.floor(ctx.canvas.height / 2) - h, ctx.canvas.width - Math.floor(ctx.canvas.width * 0.2), h); + ctx.fillStyle = "rgb(255, 255, 255)"; + ctx.fillRect(Math.floor(ctx.canvas.width * 0.1), Math.floor(ctx.canvas.height / 2) - h, ( + Math.floor(ctx.canvas.resSize * (ctx.canvas.width - Math.floor(ctx.canvas.width * 0.2)) / ctx.canvas.dataSize) ), h); - this.ctx.restore(); - // we don't do this on update because we want // the progress bar to finish drawing if (this.resSize == this.dataSize) { @@ -214,7 +194,17 @@ class Game { this.init(); this._update = this.update; - this._draw = this.draw; + this._draw = () => { + this.ctx.clearRect(0, 0, this.width, this.height); + this.draw(); + let ctx = this.canvas.getContext("2d"); + ctx.save(); + ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + ctx.imageSmoothingEnabled = false; + ctx.scale(this.scale, this.scale); + ctx.drawImage(this.buffer, 0, 0); + ctx.restore(); + }; } } diff --git a/js/mygame.js b/js/mygame.js index 6293150..bd5b498 100644 --- a/js/mygame.js +++ b/js/mygame.js @@ -4,9 +4,7 @@ const min = Math.min; class MyGame extends Game { constructor(canvas) { - super(canvas); - this.width = 320; - this.height = 240; + super(canvas, 320, 240); this.data = { sound: "snd/test.ogg", @@ -25,8 +23,6 @@ class MyGame extends Game { } draw() { - this.drawStart(); - /* draw an image */ this.ctx.drawImage(this.res.player, 0, 0); @@ -34,7 +30,5 @@ class MyGame extends Game { if (this.keys["a"]) { this.playSnd(this.res.sound); } - - this.drawEnd(); } } -- cgit v1.2.3