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

model: add mutable MapState (empty for now)

Browse source
This commit is contained in:
Matthias Schiffer 2018-10-26 21:59:46 +02:00
parent ebc56db63c
commit bc6d79b088
Signed by: neocturne
GPG key ID: 16EF3F64CB201D9C
5 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/index.ts
View file

@ -1,4 +1,5 @@
import MapData from './model/MapData'; import MapData from './model/data/MapData';
import MapState from './model/state/MapState';
import {loadMap} from './view/MapLoader'; import {loadMap} from './view/MapLoader';
import Renderer from './view/renderer/Renderer'; import Renderer from './view/renderer/Renderer';
@ -13,9 +14,10 @@ window.onload = () => {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.addEventListener('load', async function() { xhr.addEventListener('load', async function() {
const mapDef = new MapData(JSON.parse(this.responseText)); const mapData = new MapData(JSON.parse(this.responseText));
const map = new MapState(mapData);
const mapView = await loadMap(renderer, mapDef); const mapView = await loadMap(renderer, map);
mapView.draw(); mapView.draw();
}); });

2
src/model/MapData.ts → src/model/data/MapData.ts
View file

@ -1,4 +1,4 @@
import {mapFromObject} from '../util'; import {mapFromObject} from '../../util';
interface Input { interface Input {
readonly tiles: {[key: string]: string}; readonly tiles: {[key: string]: string};

6
src/model/state/MapState.ts Normal file
View file

@ -0,0 +1,6 @@
import MapData from '../data/MapData';
export default class MapState {
public constructor(public readonly data: MapData) {
}
}

8
src/view/MapLoader.ts
View file

@ -1,6 +1,6 @@
import {mapValues, mapValuesAsync, nextPowerOf2} from '../util'; import {mapValues, mapValuesAsync, nextPowerOf2} from '../util';
import MapData from '../model/MapData'; import MapState from '../model/state/MapState';
import MapView from './MapView'; import MapView from './MapView';
import Renderer from './renderer/Renderer'; import Renderer from './renderer/Renderer';
@ -54,9 +54,9 @@ function mkTileTexture(gl: WebGLRenderingContext, tiles: Map<string, HTMLImageEl
return [mkTexture(gl, canvas), ret]; return [mkTexture(gl, canvas), ret];
} }
export async function loadMap(r: Renderer, mapData: MapData): Promise<MapView> { export async function loadMap(r: Renderer, map: MapState): Promise<MapView> {
const tiles = await loadTiles(mapData.tiles); const tiles = await loadTiles(map.data.tiles);
const [tileTexture, tileMap] = mkTileTexture(r.getContext(), tiles); const [tileTexture, tileMap] = mkTileTexture(r.getContext(), tiles);
return new MapView(r, mapData, tileTexture, tileMap); return new MapView(r, map, tileTexture, tileMap);
} }

18
src/view/MapView.ts
View file

@ -1,6 +1,6 @@
import {nextPowerOf2} from '../util'; import {nextPowerOf2} from '../util';
import MapData from '../model/MapData'; import MapState from '../model/state/MapState';
import Renderer from './renderer/Renderer'; import Renderer from './renderer/Renderer';
export default class MapView { export default class MapView {
@ -13,7 +13,7 @@ export default class MapView {
constructor( constructor(
private readonly r: Renderer, private readonly r: Renderer,
private readonly map: MapData, private readonly map: MapState,
private readonly tileTexture: WebGLTexture, private readonly tileTexture: WebGLTexture,
private readonly tileMap: Map<string, number>, private readonly tileMap: Map<string, number>,
) { ) {
@ -22,9 +22,9 @@ export default class MapView {
const tileCount = nextPowerOf2(tileMap.size); const tileCount = nextPowerOf2(tileMap.size);
for (let x = 0; x < map.width; x++) for (let x = 0; x < map.data.width; x++)
for (let y = 0; y < map.height; y++) for (let y = 0; y < map.data.height; y++)
this.addTile(vertexData, textureData, x, y, map.layers[0][y][x], tileCount); this.addTile(vertexData, textureData, x, y, map.data.layers[0][y][x], tileCount);
const gl = r.getContext(); const gl = r.getContext();
@ -52,7 +52,7 @@ export default class MapView {
gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
gl.vertexAttribPointer(this.r.getTextureCoordLoc(), 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(this.r.getTextureCoordLoc(), 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6 * this.map.width * this.map.height); gl.drawArrays(gl.TRIANGLES, 0, 6 * this.map.data.width * this.map.data.height);
} }
private addTile(vertexData: number[], textureData: number[], x: number, y: number, tile: string, tileCount: number) { private addTile(vertexData: number[], textureData: number[], x: number, y: number, tile: string, tileCount: number) {
@ -68,11 +68,11 @@ export default class MapView {
vertexData.push(x + 1); vertexData.push(y); vertexData.push(x + 1); vertexData.push(y);
vertexData.push(x + 1); vertexData.push(y + 1); vertexData.push(x + 1); vertexData.push(y + 1);
textureData.push((tileID) / tileCount); textureData.push(0); textureData.push(tileID / tileCount); textureData.push(0);
textureData.push((tileID + 1) / tileCount); textureData.push(0); textureData.push((tileID + 1) / tileCount); textureData.push(0);
textureData.push((tileID) / tileCount); textureData.push(1); textureData.push(tileID / tileCount); textureData.push(1);
textureData.push((tileID) / tileCount); textureData.push(1); textureData.push(tileID / tileCount); textureData.push(1);
textureData.push((tileID + 1) / tileCount); textureData.push(0); textureData.push((tileID + 1) / tileCount); textureData.push(0);
textureData.push((tileID + 1) / tileCount); textureData.push(1); textureData.push((tileID + 1) / tileCount); textureData.push(1);
} }