From 69b494f844fc6af1f5e4862ebc93813d598f83c4 Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Sat, 8 Dec 2018 13:19:30 +0100 Subject: Dynamically size canvas --- src/renderer/index.css | 10 +--------- src/renderer/index.ts | 13 +++++++++---- src/renderer/view/renderer/renderer.ts | 31 ++++++++++++++++--------------- 3 files changed, 26 insertions(+), 28 deletions(-) (limited to 'src') diff --git a/src/renderer/index.css b/src/renderer/index.css index afdf217..672c410 100644 --- a/src/renderer/index.css +++ b/src/renderer/index.css @@ -3,18 +3,10 @@ html, body, div { height: 100%; } -#app { - text-align: center; -} - -canvas { - position: relative; - top: calc(50% - 384px); -} - * { margin: 0px; padding: 0px; border: 0px; background: #223; + overflow: hidden; } diff --git a/src/renderer/index.ts b/src/renderer/index.ts index 039c3b6..1fa9956 100644 --- a/src/renderer/index.ts +++ b/src/renderer/index.ts @@ -10,12 +10,17 @@ window.onload = async () => { return; const canvas = document.createElement('canvas'); - canvas.width = 1024; - canvas.height = 768; + const renderer = new Renderer(canvas); - app.append(canvas); + const resize = () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + renderer.resize(); + }; + window.addEventListener('resize', resize); + resize(); - const renderer = new Renderer(canvas); + app.append(canvas); GameContext.load(renderer); }; diff --git a/src/renderer/view/renderer/renderer.ts b/src/renderer/view/renderer/renderer.ts index 93f8589..9f711d3 100644 --- a/src/renderer/view/renderer/renderer.ts +++ b/src/renderer/view/renderer/renderer.ts @@ -1,3 +1,4 @@ +import { nextPowerOf2 } from '../../util'; import { Shaders } from './shaders'; import { mat4, vec2 } from 'gl-matrix'; @@ -23,8 +24,6 @@ export class Renderer { this.gl.enable(this.gl.BLEND); this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA); this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1); - - this.setSize(); } public createBuffer(): WebGLBuffer { @@ -73,27 +72,29 @@ export class Renderer { vec2.scale(out, out, 1 / this.coordScale); } - private mkContext(): WebGLRenderingContext { - const gl = ( - this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl') - ); - if (!gl) - throw new Error('unable to initialize WebGL context'); - - return gl; - } - - private setSize(): void { + public resize(): void { const w = this.canvas.width; const h = this.canvas.height; + const ws = nextPowerOf2(w); + const hs = nextPowerOf2(h); - this.gl.viewport(0, 0, w, h); + this.gl.viewport((w - ws) / 2, (h - hs) / 2, ws, hs); this.clear(); const scale = this.viewScale * this.coordScale; mat4.identity(this.viewport); - mat4.scale(this.viewport, this.viewport, [2 * scale / w, -2 * scale / h, 1.0]); + mat4.scale(this.viewport, this.viewport, [2 * scale / ws, -2 * scale / hs, 1.0]); this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport); } + + private mkContext(): WebGLRenderingContext { + const gl = ( + this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl') + ); + if (!gl) + throw new Error('unable to initialize WebGL context'); + + return gl; + } } -- cgit v1.2.3