diff options
author | Matthias Schiffer <mschiffer@universe-factory.net> | 2018-10-26 23:11:14 +0200 |
---|---|---|
committer | Matthias Schiffer <mschiffer@universe-factory.net> | 2018-10-26 23:11:14 +0200 |
commit | 4b680776a3c0896a7dbe9943e1fa5c8bed0109b0 (patch) | |
tree | f8b71be4e70f93cdc66958a49cd5e4a5171377e1 /src/view/MapLoader.ts | |
parent | bc6d79b088154e2fca56b9c18ee5ea0bf17875f8 (diff) | |
download | rpgedit-4b680776a3c0896a7dbe9943e1fa5c8bed0109b0.tar rpgedit-4b680776a3c0896a7dbe9943e1fa5c8bed0109b0.zip |
MapLoader: use square tile texture rather than long Nx1 rectangle
By placing the tiles in a square texture, the dimensions are bounded by the
square root of the dimension in the old solution. This way we can fit a
significantly higher number of tiles into it without using up all the
accuracy of the coordinates.
Diffstat (limited to 'src/view/MapLoader.ts')
-rw-r--r-- | src/view/MapLoader.ts | 42 |
1 files changed, 31 insertions, 11 deletions
diff --git a/src/view/MapLoader.ts b/src/view/MapLoader.ts index 290f095..6953321 100644 --- a/src/view/MapLoader.ts +++ b/src/view/MapLoader.ts @@ -4,6 +4,11 @@ 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]>; +} + function loadImage(url: string): Promise<HTMLImageElement> { return new Promise((resolve, reject) => { const img = new Image(); @@ -36,27 +41,42 @@ function mkTexture(gl: WebGLRenderingContext, src: HTMLCanvasElement|HTMLImageEl return texture; } -function mkTileTexture(gl: WebGLRenderingContext, tiles: Map<string, HTMLImageElement>): -[WebGLTexture, Map<string, number>] { +function mkTileMap( + gl: WebGLRenderingContext, + tiles: Map<string, HTMLImageElement>, +): TileMap { + const tileSize = MapView.tileSize; + + const canvasDim = nextPowerOf2(Math.sqrt(tiles.size)); + const canvasSize = canvasDim * tileSize; + const canvas = document.createElement('canvas'); - canvas.width = nextPowerOf2(tiles.size) * MapView.tileSize; - canvas.height = MapView.tileSize; + canvas.width = canvas.height = canvasSize; - let i = 0; - const ret: Map<string, number> = new Map(); + let x = 0, y = 0; + const map: Map<string, [number, number, number, number]> = new Map(); const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; for (const [k, tile] of tiles) { - ctx.drawImage(tile, i * MapView.tileSize, 0); - ret.set(k, i++); + ctx.drawImage(tile, x * tileSize, y * tileSize); + map.set(k, [x / canvasDim, y / canvasDim, (x + 1) / canvasDim, (y + 1) / canvasDim]); + + x++; + if (x === canvasDim) { + x = 0; + y++; + } } - return [mkTexture(gl, canvas), ret]; + return { + texture: mkTexture(gl, canvas), + tiles: map, + }; } export async function loadMap(r: Renderer, map: MapState): Promise<MapView> { const tiles = await loadTiles(map.data.tiles); - const [tileTexture, tileMap] = mkTileTexture(r.getContext(), tiles); + const tileMap = mkTileMap(r.getContext(), tiles); - return new MapView(r, map, tileTexture, tileMap); + return new MapView(r, map, tileMap); } |