neocturne/rpgedit
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

view: refactor generic parts of MapView into a TileView

Browse source
This commit is contained in:
Matthias Schiffer 2018-10-31 14:24:38 +01:00
parent 272e37a408
commit af04cbe359
Signed by: neocturne
GPG key ID: 16EF3F64CB201D9C
5 changed files with 103 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/index.ts
View file

@ -18,7 +18,7 @@ window.onload = () => {
const map = new MapState(mapData);
const mapView = await loadMap(renderer, map);
mapView.draw();
mapView.render();
});
xhr.open('GET', 'resources/map/test.json', true);

6
src/view/MapLoader.ts
View file

@ -1,12 +1,14 @@
import { mapValues, mapValuesAsync, nextPowerOf2 } from '../util';
import { TileCoords } from './tile';
import MapState from '../model/state/MapState';
import MapView from './MapView';
import Renderer from './renderer/Renderer';
export interface TileMap {
texture: WebGLTexture;
tiles: Map<string, [number, number, number, number]>;
tiles: Map<string, TileCoords>;
}
function loadImage(url: string): Promise<HTMLImageElement> {
@ -54,7 +56,7 @@ function mkTileMap(
canvas.width = canvas.height = canvasSize;
let x = 0, y = 0;
const map: Map<string, [number, number, number, number]> = new Map();
const map: Map<string, TileCoords> = new Map();
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
for (const [k, tile] of tiles) {

78
src/view/MapView.ts
View file

@ -1,74 +1,38 @@
import MapState from '../model/state/MapState';
import { TileMap } from './MapLoader';
import Renderer from './renderer/Renderer';
import { TileView, TileViewBuilder } from './tile';
export default class MapView {
private readonly vertexBuffer: WebGLBuffer;
private readonly textureBuffer: WebGLBuffer;
private static addTile(builder: TileViewBuilder, tileMap: TileMap, x: number, y: number, tile: string) {
if (tile === ' ')
return;
const tilePos = tileMap.tiles.get(tile);
if (!tilePos)
throw new Error('invalid tile specifier in map data');
builder.addTile([x, y, x + 1, y + 1], tilePos);
}
private readonly tileView: TileView;
constructor(
private readonly r: Renderer,
private readonly map: MapState,
private readonly tileMap: TileMap,
r: Renderer,
map: MapState,
tileMap: TileMap,
) {
const vertexData: number[] = [];
const textureData: number[] = [];
const builder = new TileViewBuilder(r, tileMap.texture);
for (let x = 0; x < map.data.width; x++)
for (let y = 0; y < map.data.height; y++)
for (const layer of map.data.layers)
this.addTile(vertexData, textureData, x, y, layer[y][x]);
MapView.addTile(builder, tileMap, x, y, layer[y][x]);
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.tileView = builder.build();
}
public draw(): void {
const gl = this.r.getContext();
gl.clear(gl.COLOR_BUFFER_BIT);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.tileMap.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, 6 * this.map.data.width * this.map.data.height);
}
private pushTile(buf: number[], coords: [number, number, number, number]) {
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 addTile(vertexData: number[], textureData: number[], x: number, y: number, tile: string) {
if (tile === ' ')
return;
const tilePos = this.tileMap.tiles.get(tile);
if (!tilePos)
throw new Error('invalid tile specifier in map data');
this.pushTile(vertexData, [x, y, x + 1, y + 1]);
this.pushTile(textureData, tilePos);
public render(): void {
this.tileView.render();
}
}

74
src/view/tile.ts Normal file
View file

@ -0,0 +1,74 @@
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 primitiveCount: 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.primitiveCount = vertexData.length / 3;
}
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.primitiveCount);
}
}

1
tslint.json
View file

@ -8,6 +8,7 @@
"curly": [true, "as-needed"],
"indent": [true, "tabs"],
"interface-name": false,
"max-classes-per-file": false,
"no-bitwise": false,
"one-variable-per-declaration": false,
"quotemark": [true, "single", "avoid-escape", "avoid-template"]