aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJuan J. Martinez <jjm@usebox.net>2023-12-29 00:01:33 +0000
committerJuan J. Martinez <jjm@usebox.net>2023-12-29 00:01:33 +0000
commitcd83ca3058dac4caa8bb214a244fa45fbb75488c (patch)
tree199f7a8bd2a17ad16e2a16f9cb681c0ffdc9e550 /js
parented0e61af2c9fb7b016cb72a91d207b761859c676 (diff)
downloadjs-canvas-2023-cd83ca3058dac4caa8bb214a244fa45fbb75488c.tar.gz
js-canvas-2023-cd83ca3058dac4caa8bb214a244fa45fbb75488c.zip
Simplified render, use a back buffer
So we only scale once.
Diffstat (limited to 'js')
-rw-r--r--js/game.js72
-rw-r--r--js/mygame.js8
2 files changed, 32 insertions, 48 deletions
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();
}
}