From 69be8d2ef8121661a1b3f5a0ea42d534585f3e73 Mon Sep 17 00:00:00 2001 From: Matthias Schiffer Date: Wed, 31 Oct 2018 18:41:28 +0100 Subject: view: rename tile module to sprite --- src/view/map.ts | 16 ++++++------ src/view/sprite.ts | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/view/tile.ts | 74 ------------------------------------------------------ 3 files changed, 82 insertions(+), 82 deletions(-) create mode 100644 src/view/sprite.ts delete mode 100644 src/view/tile.ts (limited to 'src') diff --git a/src/view/map.ts b/src/view/map.ts index 954e39e..d75ea98 100644 --- a/src/view/map.ts +++ b/src/view/map.ts @@ -2,12 +2,12 @@ import MapData from '../model/data/MapData'; import { mapValues, nextPowerOf2 } from '../util'; import Renderer from './renderer/Renderer'; -import { TileCoords, TileView, TileViewBuilder } from './tile'; +import { SpriteCoords, SpriteView, SpriteViewBuilder } from './sprite'; import { loadImages, mkTexture } from './util/image'; interface TileMap { texture: WebGLTexture; - tiles: Map; + tiles: Map; } function loadTiles(tiles: Map): Promise> { @@ -27,7 +27,7 @@ function mkTileMap( canvas.width = canvas.height = canvasSize; let x = 0, y = 0; - const map: Map = new Map(); + const map: Map = new Map(); const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; for (const [k, tile] of tiles) { @@ -47,7 +47,7 @@ function mkTileMap( }; } -function addTile(builder: TileViewBuilder, tileMap: TileMap, x: number, y: number, tile: string) { +function addSprite(builder: SpriteViewBuilder, tileMap: TileMap, x: number, y: number, tile: string) { if (tile === ' ') return; @@ -55,19 +55,19 @@ function addTile(builder: TileViewBuilder, tileMap: TileMap, x: number, y: numbe if (!tilePos) throw new Error('invalid tile specifier in map data'); - builder.addTile([x, y, x + 1, y + 1], tilePos); + builder.addSprite([x, y, x + 1, y + 1], tilePos); } -export async function loadMap(r: Renderer, map: MapData): Promise { +export async function loadMap(r: Renderer, map: MapData): Promise { const tiles = await loadTiles(map.tiles); const tileMap = mkTileMap(r.getContext(), tiles); - const builder = new TileViewBuilder(r, tileMap.texture); + const builder = new SpriteViewBuilder(r, tileMap.texture); for (const layer of map.layers) for (let x = 0; x < map.width; x++) for (let y = 0; y < map.height; y++) - addTile(builder, tileMap, x, y, layer[y][x]); + addSprite(builder, tileMap, x, y, layer[y][x]); return builder.build(); } diff --git a/src/view/sprite.ts b/src/view/sprite.ts new file mode 100644 index 0000000..18c91c7 --- /dev/null +++ b/src/view/sprite.ts @@ -0,0 +1,74 @@ +import Renderer from './renderer/Renderer'; + +export type SpriteCoords = [number, number, number, number]; + +export class SpriteViewBuilder { + private static pushSprite(buf: number[], coords: SpriteCoords): void { + const [x1, y1, x2, y2] = coords; + + buf.push(x1); buf.push(y1); + buf.push(x2); buf.push(y1); + buf.push(x1); buf.push(y2); + + buf.push(x1); buf.push(y2); + buf.push(x2); buf.push(y1); + buf.push(x2); buf.push(y2); + } + + private readonly vertexData: number[] = []; + private readonly textureData: number[] = []; + + constructor(private readonly r: Renderer, private readonly texture: WebGLTexture) {} + + public addSprite(vertexCoords: SpriteCoords, texCoords: SpriteCoords): void { + SpriteViewBuilder.pushSprite(this.vertexData, vertexCoords); + SpriteViewBuilder.pushSprite(this.textureData, texCoords); + } + + public build(): SpriteView { + return new SpriteView(this.r, this.texture, this.vertexData, this.textureData); + } +} + +export class SpriteView { + private readonly vertexCount: number; + private readonly vertexBuffer: WebGLBuffer; + private readonly textureBuffer: WebGLBuffer; + + constructor( + private readonly r: Renderer, + private readonly texture: WebGLTexture, + vertexData: number[], + textureData: number[], + ) { + const gl = r.getContext(); + + this.vertexBuffer = r.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); + + this.textureBuffer = r.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureData), gl.STATIC_DRAW); + + this.vertexCount = vertexData.length / 2; + } + + public render(): void { + const gl = this.r.getContext(); + + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.uniform1i(this.r.getSamplerLoc(), 0); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.vertexAttribPointer(this.r.getVertexPosLoc(), 2, gl.FLOAT, false, 0, 0); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer); + gl.vertexAttribPointer(this.r.getTextureCoordLoc(), 2, gl.FLOAT, false, 0, 0); + + gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount); + } +} diff --git a/src/view/tile.ts b/src/view/tile.ts deleted file mode 100644 index 3dd7231..0000000 --- a/src/view/tile.ts +++ /dev/null @@ -1,74 +0,0 @@ -import Renderer from './renderer/Renderer'; - -export type TileCoords = [number, number, number, number]; - -export class TileViewBuilder { - private static pushTile(buf: number[], coords: TileCoords): void { - const [x1, y1, x2, y2] = coords; - - buf.push(x1); buf.push(y1); - buf.push(x2); buf.push(y1); - buf.push(x1); buf.push(y2); - - buf.push(x1); buf.push(y2); - buf.push(x2); buf.push(y1); - buf.push(x2); buf.push(y2); - } - - private readonly vertexData: number[] = []; - private readonly textureData: number[] = []; - - constructor(private readonly r: Renderer, private readonly texture: WebGLTexture) {} - - public addTile(vertexCoords: TileCoords, texCoords: TileCoords): void { - TileViewBuilder.pushTile(this.vertexData, vertexCoords); - TileViewBuilder.pushTile(this.textureData, texCoords); - } - - public build(): TileView { - return new TileView(this.r, this.texture, this.vertexData, this.textureData); - } -} - -export class TileView { - private readonly vertexCount: number; - private readonly vertexBuffer: WebGLBuffer; - private readonly textureBuffer: WebGLBuffer; - - constructor( - private readonly r: Renderer, - private readonly texture: WebGLTexture, - vertexData: number[], - textureData: number[], - ) { - const gl = r.getContext(); - - this.vertexBuffer = r.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); - - this.textureBuffer = r.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureData), gl.STATIC_DRAW); - - this.vertexCount = vertexData.length / 2; - } - - public render(): void { - const gl = this.r.getContext(); - - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.uniform1i(this.r.getSamplerLoc(), 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.vertexAttribPointer(this.r.getVertexPosLoc(), 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer); - gl.vertexAttribPointer(this.r.getTextureCoordLoc(), 2, gl.FLOAT, false, 0, 0); - - gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount); - } -} -- cgit v1.2.3