import { EntityView } from './entity'; 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 StaticMapTile { type: 'static'; image: HTMLImageElement; } interface EntityTile { type: 'entity'; entity: EntityView; } type MapTile = StaticMapTile | EntityTile; interface StaticTilesetTile { type: 'static'; coords: SpriteCoords; } type TilesetTile = StaticTilesetTile | EntityTile; interface Tileset { texture: WebGLTexture; tiles: TilesetTile[]; } async function loadTile(r: Renderer, tile: string): Promise { const name = tile.substr(1); switch (tile[0]) { case '-': return { type: 'static', image: await loadImage(`resources/sprite/tile/${name}.png`), }; case '@': return { type: 'entity', entity: await EntityView.load(r, name), }; default: throw new Error('invalid tile specifier'); } } function loadTiles(r: Renderer, tiles: string[]): Promise { return Promise.all(tiles.map((tile) => loadTile(r, tile))); } function mkTileset(r: Renderer, mapTiles: MapTile[]): Tileset { const tileSize = 32; const canvasDim = nextPowerOf2(Math.sqrt(mapTiles.length)); const canvasSize = canvasDim * tileSize; const canvas = document.createElement('canvas'); canvas.width = canvas.height = canvasSize; let x = 0; let y = 0; const tiles: TilesetTile[] = []; const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; for (const tile of mapTiles) { switch (tile.type) { case 'static': ctx.drawImage(tile.image, x * tileSize, y * tileSize); tiles.push({ type: 'static', coords: [ x / canvasDim, y / canvasDim, (x + 1) / canvasDim, (y + 1) / canvasDim, ], }); x++; if (x === canvasDim) { x = 0; y++; } break; case 'entity': tiles.push(tile); break; } } const [texture] = mkTexture(r, canvas); return { texture, tiles, }; } function addSprite( builder: SpriteViewBuilder, entityTiles: Array<[[number, number], EntityView]>, tileset: Tileset, x: number, y: number, tile: number, ): void { if (!tile) return; const tilesetTile = tileset.tiles[tile - 1]; switch (tilesetTile.type) { case 'static': builder.addSprite([x, y, x + 1, y + 1], tilesetTile.coords); break; case 'entity': entityTiles.push([[x + 0.5, y + 0.5], tilesetTile.entity]); break; } } class MapLayerView { public constructor( private r: Renderer, private staticTiles: SpriteView, private entityTiles: Array<[[number, number], EntityView]>, ) {} public render(time: number): void { this.r.setTranslation([0, 0]); this.staticTiles.render(); for (const [coords, entity] of this.entityTiles) { this.r.setTranslation(coords); entity.renderByTime(time); } } } function buildMapLayer(r: Renderer, tileset: Tileset, layer: number[][]): MapLayerView { const builder = new SpriteViewBuilder(r, tileset.texture); const entityTiles: Array<[[number, number], EntityView]> = []; for (let x = 0; x < layer[0].length; x++) for (let y = 0; y < layer.length; y++) addSprite(builder, entityTiles, tileset, x, y, layer[y][x]); return new MapLayerView(r, builder.build(), entityTiles); } export class MapView { public static async load(r: Renderer, map: MapData): Promise { const tiles = await loadTiles(r, map.tiles); const tileset = mkTileset(r, tiles); const layers = map.layers.map((layer) => buildMapLayer(r, tileset, layer.tiles)); return new MapView(layers); } private constructor(private layers: MapLayerView[]) {} public render(time: number): void { for (const layer of this.layers) layer.render(time); } }