Added camera scaling

src/js/assets.js

@@ -27,7 +27,7 @@ export class Assets {
         return this.assets.get(name);
     }
     async load(gfx) {
-        assets.push("grass", await Texture.load(gfx, "../../assets/grass.png"));
+        assets.push("grass", await Texture.load(gfx, "../../assets/grass2.png"));
         assets.push("leaves", await Texture.load(gfx, "../../assets/greenary.png"));
         assets.push("log", await Texture.load(gfx, "../../assets/log.png"));
         this.loaded = true;

src/js/assets.ts

@@ -41,7 +41,7 @@ export class Assets {
     }
 
     async load(gfx: Graphics) {
-        assets.push("grass",  await Texture.load(gfx, "../../assets/grass.png"));
+        assets.push("grass",  await Texture.load(gfx, "../../assets/grass2.png"));
         assets.push("leaves", await Texture.load(gfx, "../../assets/greenary.png"));
         assets.push("log",    await Texture.load(gfx, "../../assets/log.png"));
         

src/js/common.js

@@ -267,6 +267,14 @@ class Mat4 {
         }
         this.data = new Float32Array(16);
     }
+    static IDENTITY() {
+        return new Mat4(new Float32Array([
+            1, 0, 0, 0,
+            0, 1, 0, 0,
+            0, 0, 1, 0,
+            0, 0, 0, 1,
+        ]));
+    }
     static orthographic(left, right, bottom, top, near, far) {
         let data = new Float32Array([
             2 / (right - left), 0, 0, 0,
@@ -330,6 +338,14 @@ class Mat4 {
             t.x, t.y, t.z, 1,
         ]));
     }
+    static scale(scales) {
+        return new Mat4(new Float32Array([
+            scales.x, 0, 0, 0,
+            0, scales.y, 0, 0,
+            0, 0, scales.z, 0,
+            0, 0, 0, 1,
+        ]));
+    }
     x(n) {
         return this.data[n];
     }

src/js/common.ts

@@ -379,6 +379,15 @@ class Mat4 {
         this.data = new Float32Array(16);
     }
 
+    static IDENTITY(): Mat4 {
+        return new Mat4(new Float32Array([
+            1, 0, 0, 0,
+            0, 1, 0, 0,
+            0, 0, 1, 0,
+            0, 0, 0, 1,
+        ]));
+    }
+
     static orthographic(left: number, right: number, bottom: number, top: number, near: number, far: number): Mat4 {
         let data = new Float32Array([
            2 / (right - left), 0, 0, 0,
@@ -454,6 +463,15 @@ class Mat4 {
         ]));
     }
 
+    static scale(scales: Vec3) {
+        return new Mat4(new Float32Array([
+            scales.x, 0, 0, 0,
+            0, scales.y, 0, 0,
+            0, 0, scales.z, 0,
+            0, 0, 0, 1,
+        ]));
+    }
+
     x(n: Mat4X) {
         return this.data[n];
     }

src/js/graphics.js

@@ -197,6 +197,9 @@ export class Camera {
     position;
     movement;
     speed = 600;
+    scale = 1.0;
+    scaling = 0.0;
+    scaleSpeed = 1.5;
     constructor(position) {
         this.position = position;
         this.movement = new Vec4(0, 0, 0, 0);
@@ -206,5 +209,12 @@ export class Camera {
         let newPosition = this.movement.multScalarNew(this.dt);
         this.position.x += (newPosition.x + newPosition.y) * this.speed;
         this.position.y += (newPosition.z + newPosition.w) * this.speed;
+        this.scale += this.scaling * this.dt * this.scaleSpeed;
+        if (this.scale < 0.5) {
+            this.scale = 0.5;
+        }
+        if (this.scale > 1.5) {
+            this.scale = 1.5;
+        }
     }
 }

src/js/graphics.ts

@@ -263,10 +263,15 @@ async function loadTexture(path: string): Promise<HTMLImageElement> {
 
 export class Camera {
     dt: number = 0;
+
     position: Vec3;
     movement: Vec4;
     speed: number = 600;
 
+    scale: number = 1.0;
+    scaling: number = 0.0;
+    scaleSpeed: number = 1.5;
+
     constructor(position: Vec3) {
         this.position = position;
         this.movement = new Vec4(0, 0, 0, 0);
@@ -278,6 +283,16 @@ export class Camera {
         let newPosition = this.movement.multScalarNew(this.dt);
         this.position.x += (newPosition.x + newPosition.y) * this.speed;
         this.position.y += (newPosition.z + newPosition.w) * this.speed;
+
+        this.scale += this.scaling * this.dt * this.scaleSpeed;
+
+        if (this.scale < 0.5) {
+            this.scale = 0.5;
+        }
+
+        if (this.scale > 1.5) {
+            this.scale = 1.5;
+        }
     }
 }
 

src/js/script.js

@@ -67,30 +67,25 @@ const fragmentShader = `#version 300 es
 function draw(gfx, camera, dt, grid) {
     gfx.clear(0, 0, 0, 0);
     camera.update(dt);
-    let zoom = 1;
+    let right = gfx.ctx.canvas.width;
-    let right = gfx.ctx.canvas.width * zoom;
     let left = 0;
-    let top = gfx.ctx.canvas.height * zoom;
+    let top = gfx.ctx.canvas.height;
     let bottom = 0;
     let near = -100;
     let far = 100;
+    let m = Mat4.IDENTITY();
     let mo = Mat4.orthographic(left, right, bottom, top, near, far);
+    let mc = Mat4.translate(new Vec3((gfx.ctx.canvas.width / 2 - camera.position.x), (gfx.ctx.canvas.height / 2 - camera.position.y), 1.0));
+    let mr = Mat4.translate(new Vec3(-(gfx.ctx.canvas.width / 2 - camera.position.x), -(gfx.ctx.canvas.height / 2 - camera.position.y), 1.0));
     let mt = Mat4.translate(camera.position);
-    let m = mt.multNew(mo);
+    let ms = Mat4.scale(new Vec3(camera.scale, camera.scale, 1));
+    m = m.multNew(mr);
+    m = m.multNew(ms);
+    m = m.multNew(mc);
+    m = m.multNew(mt);
+    m = m.multNew(mo);
     gfx.ctx.uniformMatrix4fv(gfx.getUniform("u_matrix"), false, m.splat());
     drawing.drawIsometricGrid(gfx, grid);
-    //let r = new drawing.Rectangle(Assets.assets.get("grass"), [
-    //    DrawTag.ISO,
-    //    DrawTag.TEXTURED,
-    //]);
-    //r.draw(
-    //    gfx,
-    //    [
-    //        new Vec3(0, 0, 0),
-    //        new Vec3(100, 0, 0),
-    //        new Vec3(100, 100, 0),
-    //        new Vec3(0, 100, 0),
-    //    ]);
     gfx.draw();
 }
 function addDefaultKeybinds(input, camera) {
@@ -114,6 +109,16 @@ function addDefaultKeybinds(input, camera) {
     }, (c) => {
         c.movement.w = 1;
     });
+    input.addKeyAction("KeyQ", [], camera, (c) => {
+        c.scaling = 0.0;
+    }, (c) => {
+        c.scaling = 1.0;
+    });
+    input.addKeyAction("KeyE", [], camera, (c) => {
+        c.scaling = 0.0;
+    }, (c) => {
+        c.scaling = -1.0;
+    });
 }
 (async () => {
     const canvasId = "game";

src/js/script.ts

@@ -73,17 +73,38 @@ function draw(gfx: Graphics, camera: Camera, dt: number, grid: Grid) {
     gfx.clear(0, 0, 0, 0);
     camera.update(dt);
     
-    let zoom = 1;
+    let right = gfx.ctx.canvas.width;
-    let right = gfx.ctx.canvas.width * zoom;
     let left = 0;
-    let top = gfx.ctx.canvas.height * zoom;
+    let top = gfx.ctx.canvas.height;
     let bottom = 0;
     let near = -100;
     let far = 100;
 
+    let m = Mat4.IDENTITY();
+
     let mo = Mat4.orthographic(left, right, bottom, top, near, far);
+
+    let mc = Mat4.translate(
+        new Vec3(
+            (gfx.ctx.canvas.width / 2  - camera.position.x),
+            (gfx.ctx.canvas.height / 2 - camera.position.y),
+            1.0));
+
+    let mr = Mat4.translate(
+        new Vec3(
+            -(gfx.ctx.canvas.width / 2  - camera.position.x),
+            -(gfx.ctx.canvas.height / 2 - camera.position.y),
+            1.0));
+
     let mt = Mat4.translate(camera.position);
-    let m = mt.multNew(mo);
+
+    let ms = Mat4.scale(new Vec3(camera.scale, camera.scale, 1));
+
+    m = m.multNew(mr);
+    m = m.multNew(ms);
+    m = m.multNew(mc);
+    m = m.multNew(mt);
+    m = m.multNew(mo);
 
     gfx.ctx.uniformMatrix4fv(
         gfx.getUniform("u_matrix"),
@@ -92,21 +113,6 @@ function draw(gfx: Graphics, camera: Camera, dt: number, grid: Grid) {
         );
           
     drawing.drawIsometricGrid(gfx, grid);
-
-    //let r = new drawing.Rectangle(Assets.assets.get("grass"), [
-    //    DrawTag.ISO,
-    //    DrawTag.TEXTURED,
-    //]);
-
-    //r.draw(
-    //    gfx,
-    //    [
-    //        new Vec3(0, 0, 0),
-    //        new Vec3(100, 0, 0),
-    //        new Vec3(100, 100, 0),
-    //        new Vec3(0, 100, 0),
-    //    ]);
-
     gfx.draw();
 }
 
@@ -142,6 +148,22 @@ function addDefaultKeybinds(input: Input, camera: Camera) {
     (c) => {
         c.movement.w = 1;
     });
+
+    input.addKeyAction("KeyQ", [], camera,
+    (c) => {
+        c.scaling = 0.0;
+    },
+    (c) => {
+        c.scaling = 1.0;
+    });
+
+    input.addKeyAction("KeyE", [], camera, 
+    (c) => {
+        c.scaling = 0.0;
+    },
+    (c) => {
+        c.scaling = -1.0;
+    });
 }
 
 (async () => {