diff --git a/assets/grass2.png b/assets/grass2.png new file mode 100644 index 0000000..d7a2554 Binary files /dev/null and b/assets/grass2.png differ diff --git a/src/js/assets.js b/src/js/assets.js index 411a306..04ebab7 100644 --- a/src/js/assets.js +++ b/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; diff --git a/src/js/assets.ts b/src/js/assets.ts index d2ca573..f344dbb 100644 --- a/src/js/assets.ts +++ b/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")); diff --git a/src/js/common.js b/src/js/common.js index d217270..81687d0 100644 --- a/src/js/common.js +++ b/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]; } diff --git a/src/js/common.ts b/src/js/common.ts index 2f98ee1..fdf1768 100644 --- a/src/js/common.ts +++ b/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]; } diff --git a/src/js/graphics.js b/src/js/graphics.js index 2086534..8a20bed 100644 --- a/src/js/graphics.js +++ b/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; + } } } diff --git a/src/js/graphics.ts b/src/js/graphics.ts index fe09d75..ae198ec 100644 --- a/src/js/graphics.ts +++ b/src/js/graphics.ts @@ -263,10 +263,15 @@ async function loadTexture(path: string): Promise { 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; + } } } diff --git a/src/js/script.js b/src/js/script.js index 6d79b8c..5082478 100644 --- a/src/js/script.js +++ b/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 * zoom; + let right = gfx.ctx.canvas.width; 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"; diff --git a/src/js/script.ts b/src/js/script.ts index a012e7d..2013f27 100644 --- a/src/js/script.ts +++ b/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 * zoom; + let right = gfx.ctx.canvas.width; 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 () => {