From 9f2e4e6996fb96d23e1ca29667130a2111a59de5 Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Thu, 1 Nov 2018 00:59:13 +0100 Subject: Do not use default exports --- src/controller/gamecontext.ts | 6 +-- src/index.ts | 2 +- src/model/data/MapData.ts | 25 ---------- src/model/data/map.ts | 23 +++++++++ src/view/entity.ts | 4 +- src/view/input/DirectionHandler.ts | 36 -------------- src/view/input/InputHandler.ts | 39 --------------- src/view/input/directionhandler.ts | 37 ++++++++++++++ src/view/input/inputhandler.ts | 39 +++++++++++++++ src/view/map.ts | 9 ++-- src/view/renderer/Renderer.ts | 96 ------------------------------------ src/view/renderer/Shaders.ts | 79 ----------------------------- src/view/renderer/default.fs | 10 ---- src/view/renderer/default.vs | 13 ----- src/view/renderer/renderer.ts | 96 ++++++++++++++++++++++++++++++++++++ src/view/renderer/shaders.ts | 79 +++++++++++++++++++++++++++++ src/view/renderer/shaders/default.fs | 10 ++++ src/view/renderer/shaders/default.vs | 13 +++++ src/view/sprite.ts | 2 +- 19 files changed, 309 insertions(+), 309 deletions(-) delete mode 100644 src/model/data/MapData.ts create mode 100644 src/model/data/map.ts delete mode 100644 src/view/input/DirectionHandler.ts delete mode 100644 src/view/input/InputHandler.ts create mode 100644 src/view/input/directionhandler.ts create mode 100644 src/view/input/inputhandler.ts delete mode 100644 src/view/renderer/Renderer.ts delete mode 100644 src/view/renderer/Shaders.ts delete mode 100644 src/view/renderer/default.fs delete mode 100644 src/view/renderer/default.vs create mode 100644 src/view/renderer/renderer.ts create mode 100644 src/view/renderer/shaders.ts create mode 100644 src/view/renderer/shaders/default.fs create mode 100644 src/view/renderer/shaders/default.vs diff --git a/src/controller/gamecontext.ts b/src/controller/gamecontext.ts index 792e160..c4b56b0 100644 --- a/src/controller/gamecontext.ts +++ b/src/controller/gamecontext.ts @@ -1,9 +1,9 @@ -import MapData from '../model/data/MapData'; +import { MapData } from '../model/data/map'; import { loadSimpleEntity } from '../view/entity'; -import DirectionHandler from '../view/input/DirectionHandler'; +import { DirectionHandler } from '../view/input/directionhandler'; import { loadMap } from '../view/map'; -import Renderer from '../view/renderer/Renderer'; +import { Renderer } from '../view/renderer/renderer'; import { SpriteView } from '../view/sprite'; import { getJSON } from '../util'; diff --git a/src/index.ts b/src/index.ts index a5ac4a2..da119a8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,6 @@ import { GameContext } from './controller/gamecontext'; -import Renderer from './view/renderer/Renderer'; +import { Renderer } from './view/renderer/renderer'; window.onload = async () => { const canvas = document.getElementById('rpgedit') as HTMLCanvasElement; diff --git a/src/model/data/MapData.ts b/src/model/data/MapData.ts deleted file mode 100644 index 0c44d94..0000000 --- a/src/model/data/MapData.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {mapFromObject} from '../../util'; - -interface Input { - readonly tiles: string[]; - readonly collision: boolean[][]; - readonly layers: number[][][]; -} - -export default class MapData { - public readonly tiles: string[]; - public readonly collision: boolean[][]; - public readonly layers: number[][][]; - - public readonly width: number; - public readonly height: number; - - constructor(data: Input) { - this.tiles = data.tiles; - this.collision = data.collision; - this.layers = data.layers; - - this.height = this.collision.length; - this.width = this.collision[0].length; - } -} diff --git a/src/model/data/map.ts b/src/model/data/map.ts new file mode 100644 index 0000000..50b9175 --- /dev/null +++ b/src/model/data/map.ts @@ -0,0 +1,23 @@ +export interface Input { + readonly tiles: string[]; + readonly collision: boolean[][]; + readonly layers: number[][][]; +} + +export class MapData { + public readonly tiles: string[]; + public readonly collision: boolean[][]; + public readonly layers: number[][][]; + + public readonly width: number; + public readonly height: number; + + constructor(data: Input) { + this.tiles = data.tiles; + this.collision = data.collision; + this.layers = data.layers; + + this.height = this.collision.length; + this.width = this.collision[0].length; + } +} diff --git a/src/view/entity.ts b/src/view/entity.ts index 57969a2..015875a 100644 --- a/src/view/entity.ts +++ b/src/view/entity.ts @@ -1,5 +1,5 @@ -import Renderer from './renderer/Renderer'; -import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite'; +import { Renderer } from './renderer/renderer'; +import { SpriteView, SpriteViewBuilder } from './sprite'; import { loadImage, mkTexture } from './util/image'; export async function loadSimpleEntity( diff --git a/src/view/input/DirectionHandler.ts b/src/view/input/DirectionHandler.ts deleted file mode 100644 index 691ba01..0000000 --- a/src/view/input/DirectionHandler.ts +++ /dev/null @@ -1,36 +0,0 @@ -import {Listenable} from '../../util'; -import InputHandler from './InputHandler'; - -import {vec2} from 'gl-matrix'; - -export const enum Keycode { - Left = 37, - Up = 38, - Right = 39, - Down = 40, -} - -export default class DirectionHandler extends Listenable<[vec2]> { - private readonly input: InputHandler; - - constructor() { - super(); - - this.input = new InputHandler(new Set([Keycode.Left, Keycode.Up, Keycode.Right, Keycode.Down])); - - this.input.addListener(() => { - const dir = vec2.create(); - - if (this.input.has(Keycode.Left)) - vec2.add(dir, dir, [-1, 0]); - if (this.input.has(Keycode.Up)) - vec2.add(dir, dir, [0, -1]); - if (this.input.has(Keycode.Right)) - vec2.add(dir, dir, [1, 0]); - if (this.input.has(Keycode.Down)) - vec2.add(dir, dir, [0, 1]); - - this.runListeners(dir); - }); - } -} diff --git a/src/view/input/InputHandler.ts b/src/view/input/InputHandler.ts deleted file mode 100644 index a6f1293..0000000 --- a/src/view/input/InputHandler.ts +++ /dev/null @@ -1,39 +0,0 @@ -import {Listenable} from '../../util'; - -export default class InputHandler extends Listenable<[]> { - private readonly keys: Set = new Set(); - - constructor(relevantKeys: Set) { - super(); - - window.addEventListener('keydown', (ev) => { - if (!relevantKeys.has(ev.keyCode)) - return; - - ev.preventDefault(); - - if (this.keys.has(ev.keyCode)) - return; - - this.keys.add(ev.keyCode); - this.runListeners(); - }); - - window.addEventListener('keyup', (ev) => { - if (!relevantKeys.has(ev.keyCode)) - return; - - ev.preventDefault(); - - if (!this.keys.has(ev.keyCode)) - return; - - this.keys.delete(ev.keyCode); - this.runListeners(); - }); - } - - public has(key: number): boolean { - return this.keys.has(key); - } -} diff --git a/src/view/input/directionhandler.ts b/src/view/input/directionhandler.ts new file mode 100644 index 0000000..0a3687e --- /dev/null +++ b/src/view/input/directionhandler.ts @@ -0,0 +1,37 @@ +import { InputHandler } from './inputhandler'; + +import { Listenable } from '../../util'; + +import { vec2 } from 'gl-matrix'; + +export const enum Keycode { + Left = 37, + Up = 38, + Right = 39, + Down = 40, +} + +export class DirectionHandler extends Listenable<[vec2]> { + private readonly input: InputHandler; + + constructor() { + super(); + + this.input = new InputHandler(new Set([Keycode.Left, Keycode.Up, Keycode.Right, Keycode.Down])); + + this.input.addListener(() => { + const dir = vec2.create(); + + if (this.input.has(Keycode.Left)) + vec2.add(dir, dir, [-1, 0]); + if (this.input.has(Keycode.Up)) + vec2.add(dir, dir, [0, -1]); + if (this.input.has(Keycode.Right)) + vec2.add(dir, dir, [1, 0]); + if (this.input.has(Keycode.Down)) + vec2.add(dir, dir, [0, 1]); + + this.runListeners(dir); + }); + } +} diff --git a/src/view/input/inputhandler.ts b/src/view/input/inputhandler.ts new file mode 100644 index 0000000..96f15dd --- /dev/null +++ b/src/view/input/inputhandler.ts @@ -0,0 +1,39 @@ +import { Listenable } from '../../util'; + +export class InputHandler extends Listenable<[]> { + private readonly keys: Set = new Set(); + + constructor(relevantKeys: Set) { + super(); + + window.addEventListener('keydown', (ev) => { + if (!relevantKeys.has(ev.keyCode)) + return; + + ev.preventDefault(); + + if (this.keys.has(ev.keyCode)) + return; + + this.keys.add(ev.keyCode); + this.runListeners(); + }); + + window.addEventListener('keyup', (ev) => { + if (!relevantKeys.has(ev.keyCode)) + return; + + ev.preventDefault(); + + if (!this.keys.has(ev.keyCode)) + return; + + this.keys.delete(ev.keyCode); + this.runListeners(); + }); + } + + public has(key: number): boolean { + return this.keys.has(key); + } +} diff --git a/src/view/map.ts b/src/view/map.ts index d7c9ce9..ff37737 100644 --- a/src/view/map.ts +++ b/src/view/map.ts @@ -1,10 +1,11 @@ -import MapData from '../model/data/MapData'; -import { nextPowerOf2 } from '../util'; - -import Renderer from './renderer/Renderer'; +import { Renderer } from './renderer/renderer'; import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite'; import { loadImage, mkTexture } from './util/image'; +import { MapData } from '../model/data/map'; + +import { nextPowerOf2 } from '../util'; + interface Tileset { texture: WebGLTexture; tiles: SpriteCoords[]; diff --git a/src/view/renderer/Renderer.ts b/src/view/renderer/Renderer.ts deleted file mode 100644 index 75dc265..0000000 --- a/src/view/renderer/Renderer.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { mat4, vec2 } from 'gl-matrix'; - -import Shaders from './Shaders'; - -export default class Renderer { - private readonly viewScale = 64; - - private readonly gl: WebGLRenderingContext; - private readonly shaders: Shaders; - - private readonly center: vec2 = vec2.create(); - private readonly translation: vec2 = vec2.create(); - private readonly viewport: mat4 = mat4.create(); - - constructor(private readonly canvas: HTMLCanvasElement) { - this.gl = this.mkContext(); - - this.shaders = new Shaders(this.gl); - - this.gl.clearColor(0.0, 0.0, 0.0, 1.0); - - 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 { - const ret = this.gl.createBuffer(); - if (!ret) - throw new Error('unable to create buffer'); - - return ret; - } - - public getContext(): WebGLRenderingContext { - return this.gl; - } - - public getVertexPosLoc(): number { - return this.shaders.vertexPosLoc; - } - - public getTextureCoordLoc(): number { - return this.shaders.textureCoordLoc; - } - - public getSamplerLoc(): WebGLUniformLocation { - return this.shaders.samplerLoc; - } - - public setCenter(v: vec2|number[]) { - this.snapToGrid(this.center, v); - } - - public setTranslation(v: vec2|number[]) { - vec2.sub(this.translation, v, this.center); - this.snapToGrid(this.translation, this.translation); - this.gl.uniform2fv(this.shaders.translateLoc, this.translation); - } - - public clear(): void { - this.gl.clear(this.gl.COLOR_BUFFER_BIT); - - this.setTranslation([0, 0]); - } - - public snapToGrid(out: vec2, a: vec2|number[]): void { - vec2.scale(out, a, this.viewScale); - vec2.round(out, out); - vec2.scale(out, out, 1 / this.viewScale); - } - - 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 { - const w = this.canvas.width; - const h = this.canvas.height; - - this.gl.viewport(0, 0, w, h); - this.clear(); - - mat4.identity(this.viewport); - mat4.scale(this.viewport, this.viewport, [2 * this.viewScale / w, -2 * this.viewScale / h, 1.0]); - this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport); - } -} diff --git a/src/view/renderer/Shaders.ts b/src/view/renderer/Shaders.ts deleted file mode 100644 index da75a18..0000000 --- a/src/view/renderer/Shaders.ts +++ /dev/null @@ -1,79 +0,0 @@ -import fragmentShaderSrc from './default.fs'; -import vertexShaderSrc from './default.vs'; - -export default class Shaders { - public readonly viewportLoc: WebGLUniformLocation; - public readonly translateLoc: WebGLUniformLocation; - - public readonly vertexPosLoc: number; - public readonly textureCoordLoc: number; - public readonly samplerLoc: WebGLUniformLocation; - - constructor(private readonly gl: WebGLRenderingContext) { - const shaderProgram = this.gl.createProgram(); - if (!shaderProgram) - throw new Error('Unable to create shader program'); - - const vertexShader = this.compileShader(this.gl.VERTEX_SHADER, vertexShaderSrc); - const fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentShaderSrc); - - this.gl.attachShader(shaderProgram, vertexShader); - this.gl.attachShader(shaderProgram, fragmentShader); - - this.gl.linkProgram(shaderProgram); - if (!this.gl.getProgramParameter(shaderProgram, this.gl.LINK_STATUS)) { - const err = this.gl.getProgramInfoLog(shaderProgram); - - this.gl.deleteShader(vertexShader); - this.gl.deleteShader(fragmentShader); - this.gl.deleteProgram(shaderProgram); - - throw new Error('Unable to link shader: ' + err); - } - - this.gl.useProgram(shaderProgram); - - this.vertexPosLoc = this.getAttribLocation(shaderProgram, 'aVertexPos'); - this.gl.enableVertexAttribArray(this.vertexPosLoc); - - this.textureCoordLoc = this.getAttribLocation(shaderProgram, 'aTextureCoord'); - this.gl.enableVertexAttribArray(this.textureCoordLoc); - - this.viewportLoc = this.getUniformLocation(shaderProgram, 'uViewport'); - this.translateLoc = this.getUniformLocation(shaderProgram, 'uTranslate'); - this.samplerLoc = this.getUniformLocation(shaderProgram, 'uSampler'); - } - - private compileShader(type: number, src: string): WebGLShader { - const shader = this.gl.createShader(type); - if (!shader) - throw new Error('Unable to create shader'); - - this.gl.shaderSource(shader, src); - this.gl.compileShader(shader); - - if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) { - const err = this.gl.getShaderInfoLog(shader); - this.gl.deleteShader(shader); - throw new Error('Unable to compile shader: ' + err); - } - - return shader; - } - - private getAttribLocation(program: WebGLProgram, name: string): number { - const ret = this.gl.getAttribLocation(program, name); - if (ret < 0) - throw new Error("unable to get location of attribute '" + name + "'"); - - return ret; - } - - private getUniformLocation(program: WebGLProgram, name: string): WebGLUniformLocation { - const ret = this.gl.getUniformLocation(program, name); - if (!ret) - throw new Error("unable to get location of uniform '" + name + "'"); - - return ret; - } -} diff --git a/src/view/renderer/default.fs b/src/view/renderer/default.fs deleted file mode 100644 index 2c8ad15..0000000 --- a/src/view/renderer/default.fs +++ /dev/null @@ -1,10 +0,0 @@ -precision highp float; - -varying vec2 vTextureCoord; - -uniform sampler2D uSampler; - - -void main(void) { - gl_FragColor = texture2D(uSampler, vTextureCoord); -} diff --git a/src/view/renderer/default.vs b/src/view/renderer/default.vs deleted file mode 100644 index 4715a17..0000000 --- a/src/view/renderer/default.vs +++ /dev/null @@ -1,13 +0,0 @@ -attribute vec2 aVertexPos; -attribute vec2 aTextureCoord; - -uniform mat4 uViewport; -uniform vec2 uTranslate; - -varying highp vec2 vTextureCoord; - - -void main(void) { - gl_Position = uViewport * vec4(aVertexPos + uTranslate, 0.0, 1.0); - vTextureCoord = aTextureCoord; -} diff --git a/src/view/renderer/renderer.ts b/src/view/renderer/renderer.ts new file mode 100644 index 0000000..062c868 --- /dev/null +++ b/src/view/renderer/renderer.ts @@ -0,0 +1,96 @@ +import { Shaders } from './shaders'; + +import { mat4, vec2 } from 'gl-matrix'; + +export class Renderer { + private readonly viewScale = 64; + + private readonly gl: WebGLRenderingContext; + private readonly shaders: Shaders; + + private readonly center: vec2 = vec2.create(); + private readonly translation: vec2 = vec2.create(); + private readonly viewport: mat4 = mat4.create(); + + constructor(private readonly canvas: HTMLCanvasElement) { + this.gl = this.mkContext(); + + this.shaders = new Shaders(this.gl); + + this.gl.clearColor(0.0, 0.0, 0.0, 1.0); + + 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 { + const ret = this.gl.createBuffer(); + if (!ret) + throw new Error('unable to create buffer'); + + return ret; + } + + public getContext(): WebGLRenderingContext { + return this.gl; + } + + public getVertexPosLoc(): number { + return this.shaders.vertexPosLoc; + } + + public getTextureCoordLoc(): number { + return this.shaders.textureCoordLoc; + } + + public getSamplerLoc(): WebGLUniformLocation { + return this.shaders.samplerLoc; + } + + public setCenter(v: vec2|number[]) { + this.snapToGrid(this.center, v); + } + + public setTranslation(v: vec2|number[]) { + vec2.sub(this.translation, v, this.center); + this.snapToGrid(this.translation, this.translation); + this.gl.uniform2fv(this.shaders.translateLoc, this.translation); + } + + public clear(): void { + this.gl.clear(this.gl.COLOR_BUFFER_BIT); + + this.setTranslation([0, 0]); + } + + public snapToGrid(out: vec2, a: vec2|number[]): void { + vec2.scale(out, a, this.viewScale); + vec2.round(out, out); + vec2.scale(out, out, 1 / this.viewScale); + } + + 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 { + const w = this.canvas.width; + const h = this.canvas.height; + + this.gl.viewport(0, 0, w, h); + this.clear(); + + mat4.identity(this.viewport); + mat4.scale(this.viewport, this.viewport, [2 * this.viewScale / w, -2 * this.viewScale / h, 1.0]); + this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport); + } +} diff --git a/src/view/renderer/shaders.ts b/src/view/renderer/shaders.ts new file mode 100644 index 0000000..8fd1fda --- /dev/null +++ b/src/view/renderer/shaders.ts @@ -0,0 +1,79 @@ +import fragmentShaderSrc from './shaders/default.fs'; +import vertexShaderSrc from './shaders/default.vs'; + +export class Shaders { + public readonly viewportLoc: WebGLUniformLocation; + public readonly translateLoc: WebGLUniformLocation; + + public readonly vertexPosLoc: number; + public readonly textureCoordLoc: number; + public readonly samplerLoc: WebGLUniformLocation; + + constructor(private readonly gl: WebGLRenderingContext) { + const shaderProgram = this.gl.createProgram(); + if (!shaderProgram) + throw new Error('Unable to create shader program'); + + const vertexShader = this.compileShader(this.gl.VERTEX_SHADER, vertexShaderSrc); + const fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentShaderSrc); + + this.gl.attachShader(shaderProgram, vertexShader); + this.gl.attachShader(shaderProgram, fragmentShader); + + this.gl.linkProgram(shaderProgram); + if (!this.gl.getProgramParameter(shaderProgram, this.gl.LINK_STATUS)) { + const err = this.gl.getProgramInfoLog(shaderProgram); + + this.gl.deleteShader(vertexShader); + this.gl.deleteShader(fragmentShader); + this.gl.deleteProgram(shaderProgram); + + throw new Error('Unable to link shader: ' + err); + } + + this.gl.useProgram(shaderProgram); + + this.vertexPosLoc = this.getAttribLocation(shaderProgram, 'aVertexPos'); + this.gl.enableVertexAttribArray(this.vertexPosLoc); + + this.textureCoordLoc = this.getAttribLocation(shaderProgram, 'aTextureCoord'); + this.gl.enableVertexAttribArray(this.textureCoordLoc); + + this.viewportLoc = this.getUniformLocation(shaderProgram, 'uViewport'); + this.translateLoc = this.getUniformLocation(shaderProgram, 'uTranslate'); + this.samplerLoc = this.getUniformLocation(shaderProgram, 'uSampler'); + } + + private compileShader(type: number, src: string): WebGLShader { + const shader = this.gl.createShader(type); + if (!shader) + throw new Error('Unable to create shader'); + + this.gl.shaderSource(shader, src); + this.gl.compileShader(shader); + + if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) { + const err = this.gl.getShaderInfoLog(shader); + this.gl.deleteShader(shader); + throw new Error('Unable to compile shader: ' + err); + } + + return shader; + } + + private getAttribLocation(program: WebGLProgram, name: string): number { + const ret = this.gl.getAttribLocation(program, name); + if (ret < 0) + throw new Error("unable to get location of attribute '" + name + "'"); + + return ret; + } + + private getUniformLocation(program: WebGLProgram, name: string): WebGLUniformLocation { + const ret = this.gl.getUniformLocation(program, name); + if (!ret) + throw new Error("unable to get location of uniform '" + name + "'"); + + return ret; + } +} diff --git a/src/view/renderer/shaders/default.fs b/src/view/renderer/shaders/default.fs new file mode 100644 index 0000000..2c8ad15 --- /dev/null +++ b/src/view/renderer/shaders/default.fs @@ -0,0 +1,10 @@ +precision highp float; + +varying vec2 vTextureCoord; + +uniform sampler2D uSampler; + + +void main(void) { + gl_FragColor = texture2D(uSampler, vTextureCoord); +} diff --git a/src/view/renderer/shaders/default.vs b/src/view/renderer/shaders/default.vs new file mode 100644 index 0000000..4715a17 --- /dev/null +++ b/src/view/renderer/shaders/default.vs @@ -0,0 +1,13 @@ +attribute vec2 aVertexPos; +attribute vec2 aTextureCoord; + +uniform mat4 uViewport; +uniform vec2 uTranslate; + +varying highp vec2 vTextureCoord; + + +void main(void) { + gl_Position = uViewport * vec4(aVertexPos + uTranslate, 0.0, 1.0); + vTextureCoord = aTextureCoord; +} diff --git a/src/view/sprite.ts b/src/view/sprite.ts index 02fa77a..3a5ebcb 100644 --- a/src/view/sprite.ts +++ b/src/view/sprite.ts @@ -1,4 +1,4 @@ -import Renderer from './renderer/Renderer'; +import { Renderer } from './renderer/renderer'; export type SpriteCoords = [number, number, number, number]; -- cgit v1.2.3