1151 lines
45 KiB
TypeScript
1151 lines
45 KiB
TypeScript
/**
|
||
* Act map scene: real Diablo II levels, walked by the player.
|
||
*
|
||
* Two data paths feed the same loop, and both stay because they answer different
|
||
* questions:
|
||
*
|
||
* - **pack** (default): a prebaked `scene.json` plus indexed PNG pages produced
|
||
* by `scripts/pack-act-assets.ts`. Nothing is decoded — the browser turns a PNG
|
||
* into a texture, and the JSON already carries painter's order and the
|
||
* collision grid. Pages load by need: the ones covering the spawn viewport
|
||
* first, the rest in the background while the player is already walking.
|
||
* - **live**: the archives themselves over HTTP ranges, decoded in the browser
|
||
* (DS1 + DT1 + PL2). Slower, needs no bake step, and works for any level the
|
||
* pack does not cover. `?live=1` forces it.
|
||
*
|
||
* No monsters are loaded on either path: this page exists to walk real maps.
|
||
*/
|
||
import { MpqArchive } from '../mpq/archive.ts'
|
||
import { httpRangeSource } from '../mpq/source.ts'
|
||
import { MountedArchives } from '../mpq/mount.ts'
|
||
import { loadActTables, resolveActTown, resolveLevel } from '../game/acts.ts'
|
||
import type { LevelInfo } from '../game/acts.ts'
|
||
import { decodeDs1 } from '../formats/ds1.ts'
|
||
import { decodeDt1 } from '../formats/dt1.ts'
|
||
import { decodePl2 } from '../formats/pl2.ts'
|
||
import type { Palette } from '../formats/pal.ts'
|
||
import type { SpriteSheet } from '../formats/sprite.ts'
|
||
import {
|
||
ORTHO_CELL_HEIGHT, ORTHO_CELL_WIDTH, buildIsoMapScene, findIsoSpawn, isBlockedAt, levelSeed,
|
||
} from '../game/d2map.ts'
|
||
import type { CollisionGrid } from '../game/d2map.ts'
|
||
import { depthInsertIndex } from '../game/map.ts'
|
||
import { buildAtlas } from '../render/atlas.ts'
|
||
import type { AtlasFrame, SpriteAtlas } from '../render/atlas.ts'
|
||
import { SpriteRenderer } from '../render/renderer.ts'
|
||
import type { AtlasHandle } from '../render/renderer.ts'
|
||
import { loadCharacterSheet, facingToDirection } from '../game/character.ts'
|
||
import { ACT_NAMES_ZH, sceneNameZh, variantLabelZh } from '../game/level-names-zh.ts'
|
||
import { GameLoop } from '../sim/loop.ts'
|
||
import { KeyboardInput } from '../sim/input.ts'
|
||
|
||
/** Archives the live path mounts, in load order. */
|
||
const DATA_ARCHIVES = ['d2data.mpq', 'd2exp.mpq', 'Patch_D2.mpq'] as const
|
||
/** Character archive: optional, and the map itself does not need it. */
|
||
const CHARACTER_ARCHIVE = 'd2char.mpq'
|
||
/** Archive locations tried in order when `?base=` is absent. */
|
||
const DEFAULT_BASES = ['samples/d2', '/diablo2/data']
|
||
/** Pack locations tried in order when `?pack=` is absent. */
|
||
const DEFAULT_PACKS = ['samples/d2-packs', '/diablo2/packs']
|
||
/** Act count the page offers. */
|
||
const ACT_COUNT = 5
|
||
/** Walk speed in scene pixels per second (cells are 80×40). */
|
||
const WALK_SPEED = 170
|
||
/** Character collision box at the feet, in scene pixels. */
|
||
const FEET_WIDTH = 20
|
||
const FEET_HEIGHT = 10
|
||
/** Atlas pages fetched at once while filling in the background. */
|
||
const PAGE_CONCURRENCY = 3
|
||
/** Placeholder marker size, in scene pixels. */
|
||
const MARKER_WIDTH = 16
|
||
const MARKER_HEIGHT = 26
|
||
|
||
/** Live scene state, also published for automated checks. */
|
||
export interface ActSceneState {
|
||
ready: boolean
|
||
/** Where the map came from: a prebaked pack or the archives. */
|
||
source: 'pack' | 'live' | ''
|
||
act: number
|
||
level: string
|
||
quadrant: string
|
||
quadrants: string[]
|
||
/** The archive/pack location actually used. */
|
||
base: string
|
||
cellsX: number
|
||
cellsY: number
|
||
widthPx: number
|
||
heightPx: number
|
||
floors: number
|
||
walls: number
|
||
frames: number
|
||
/** Atlas pages loaded and total. */
|
||
pagesLoaded: number
|
||
pagesTotal: number
|
||
/** Pages that had arrived when the first frame was drawn. */
|
||
pagesAtFirstFrame: number
|
||
/** Milliseconds from boot to the first drawn frame. */
|
||
firstFrameMs: number
|
||
/** Page indices the spawn viewport needed, for diagnostics. */
|
||
priorityPages: number[]
|
||
/** Draws skipped because their page had not arrived yet. */
|
||
skippedDraws: number
|
||
/** Objects the pack places (their art still needs the DCC/COF decoder). */
|
||
objects: number
|
||
/** Roof draws, painted in their own pass after the character. */
|
||
roofs: number
|
||
/** Whether the composited Sorceress sprite is in use (else the marker). */
|
||
character: boolean
|
||
/** DCC members that went into the character sprite. */
|
||
characterMembers: number
|
||
/** Frames the character path has actually drawn; 0 while the marker is in use. */
|
||
characterFrames: number
|
||
/** Last group the character path selected (walk or stand, times 8 directions). */
|
||
characterGroup: number
|
||
/** Milliseconds from boot to the first rendered frame. */
|
||
loadMs: number
|
||
missing: number
|
||
walkable: number
|
||
x: number
|
||
y: number
|
||
facing: number
|
||
tick: number
|
||
tickRate: number
|
||
drawCalls: number
|
||
/** Current zoom factor and the canvas backing-store size. */
|
||
zoom: number
|
||
canvasWidth: number
|
||
canvasHeight: number
|
||
error: string | null
|
||
}
|
||
|
||
declare global {
|
||
interface Window {
|
||
/** Act scene state for automation and debugging. */
|
||
__d2webAct?: ActSceneState
|
||
}
|
||
}
|
||
|
||
const state: ActSceneState = {
|
||
ready: false, source: '', act: 1, level: '', quadrant: '', quadrants: [], base: '', roofs: 0,
|
||
cellsX: 0, cellsY: 0, widthPx: 0, heightPx: 0, floors: 0, walls: 0, frames: 0,
|
||
pagesLoaded: 0, pagesTotal: 0, pagesAtFirstFrame: -1, firstFrameMs: 0, priorityPages: [],
|
||
character: false, characterMembers: 0, characterFrames: 0, characterGroup: -1,
|
||
skippedDraws: 0, objects: 0, loadMs: 0,
|
||
missing: 0, walkable: 0, x: 0, y: 0, facing: 0, tick: 0, tickRate: 0,
|
||
drawCalls: 0, zoom: 0, canvasWidth: 0, canvasHeight: 0, error: null,
|
||
}
|
||
window.__d2webAct = state
|
||
|
||
/** One tile to draw. */
|
||
interface Drawable {
|
||
readonly frame: AtlasFrame
|
||
readonly x: number
|
||
readonly y: number
|
||
readonly cellX: number
|
||
readonly cellY: number
|
||
/** Atlas page index this frame lives on. */
|
||
readonly page: number
|
||
}
|
||
|
||
/** Everything the render loop needs, from either data path. */
|
||
interface MapRuntime {
|
||
readonly source: 'pack' | 'live'
|
||
readonly base: string
|
||
readonly level: string
|
||
readonly act: number
|
||
readonly quadrants: readonly string[]
|
||
/**
|
||
* Which query parameter names the currently shown map block.
|
||
*
|
||
* The pack path selects a prebaked map by its entry label (`?level=`), the live
|
||
* path selects a DS1 file inside one level (`?quadrant=`). Crossing the two
|
||
* silently falls back to the act's town, so each runtime declares its own.
|
||
*/
|
||
readonly quadrantParam: 'level' | 'quadrant'
|
||
readonly quadrant: string
|
||
readonly cellsX: number
|
||
readonly cellsY: number
|
||
readonly widthPx: number
|
||
readonly heightPx: number
|
||
readonly grid: CollisionGrid
|
||
readonly floors: readonly Drawable[]
|
||
readonly walls: readonly Drawable[]
|
||
/** Roof draws: painted after the character, so a roof covers what walks under it. */
|
||
readonly roofs: readonly Drawable[]
|
||
readonly spawn: { x: number; y: number }
|
||
readonly objects: number
|
||
readonly frames: number
|
||
/** Whether the real character art is in use. */
|
||
readonly notes: readonly string[]
|
||
/** Handles by page index; a hole means "not loaded yet". */
|
||
readonly pages: (AtlasHandle | null)[]
|
||
/** Archive directories to try for the character archive, in order. */
|
||
readonly charBases: readonly string[]
|
||
/** Act palette for the character atlas, when the pack carries one. */
|
||
readonly palette: Palette | null
|
||
/** Pages the first frame needs (spawn viewport). */
|
||
readonly priorityPages: readonly number[]
|
||
/** Priority pages first, then everything else. */
|
||
readonly loadOrder: readonly number[]
|
||
/** Upload specific pages, a few in flight at a time. */
|
||
loadPages(renderer: SpriteRenderer, indices: readonly number[], onProgress: () => void): Promise<void>
|
||
}
|
||
|
||
/**
|
||
* Match the canvas backing store to its on-screen size.
|
||
*
|
||
* The canvas fills the window, so its pixel size has to follow the window *and*
|
||
* the device pixel ratio, or the browser scales a small buffer up and every tile
|
||
* edge goes soft. The backing store is capped because a 4K retina window would
|
||
* otherwise ask for a 30-megapixel framebuffer the software GL path cannot keep
|
||
* up with.
|
||
*
|
||
* @param canvas - the canvas element.
|
||
* @returns the CSS size the camera should treat as the viewport.
|
||
*/
|
||
function syncCanvasSize(canvas: HTMLCanvasElement): { width: number; height: number } {
|
||
const dpr = Math.min(window.devicePixelRatio || 1, 2)
|
||
const cssWidth = Math.max(320, canvas.clientWidth || window.innerWidth)
|
||
const cssHeight = Math.max(240, canvas.clientHeight || window.innerHeight)
|
||
const maxPixels = 1920 * 1200
|
||
const scale = Math.min(dpr, Math.sqrt(maxPixels / (cssWidth * cssHeight)))
|
||
const width = Math.max(1, Math.round(cssWidth * scale))
|
||
const height = Math.max(1, Math.round(cssHeight * scale))
|
||
if (canvas.width !== width || canvas.height !== height) {
|
||
canvas.width = width
|
||
canvas.height = height
|
||
}
|
||
return { width: cssWidth, height: cssHeight }
|
||
}
|
||
|
||
/**
|
||
* The zoom that makes a map cover the viewport.
|
||
*
|
||
* "Fill the screen" means the map should not sit in the middle with empty space
|
||
* around it, so this is the *cover* scale (`max`), not the fit scale (`min`): a
|
||
* map wider than the viewport is zoomed until it covers, and a small map is
|
||
* zoomed in until it does. The result is clamped so a tiny 17×20 level does not
|
||
* turn into a handful of giant pixels.
|
||
*
|
||
* @param mapWidth - map width in scene pixels.
|
||
* @param mapHeight - map height in scene pixels.
|
||
* @param viewport - viewport size in CSS pixels.
|
||
* @returns the zoom factor.
|
||
*/
|
||
function coverZoom(mapWidth: number, mapHeight: number, viewport: { width: number; height: number }): number {
|
||
if (mapWidth <= 0 || mapHeight <= 0) return 1.6
|
||
const cover = Math.max(viewport.width / mapWidth, viewport.height / mapHeight)
|
||
return Math.min(6, Math.max(0.9, cover))
|
||
}
|
||
|
||
/**
|
||
* Read a URL parameter.
|
||
*
|
||
* @param key - parameter name.
|
||
* @param fallback - value when absent.
|
||
* @returns the value.
|
||
*/
|
||
function param(key: string, fallback: string): string {
|
||
return new URLSearchParams(location.search).get(key) ?? fallback
|
||
}
|
||
|
||
/**
|
||
* Fetch JSON, with the HTTP status in the error when it fails.
|
||
*
|
||
* @param url - location.
|
||
* @returns the parsed JSON.
|
||
*/
|
||
async function fetchJson<T>(url: string): Promise<T> {
|
||
const response = await fetch(url)
|
||
if (!response.ok) throw new Error(`${url}: HTTP ${String(response.status)}`)
|
||
return await response.json() as T
|
||
}
|
||
|
||
/** A pack's index file. */
|
||
interface PackIndex {
|
||
readonly palettes?: Record<string, number[]>
|
||
readonly levels: readonly {
|
||
readonly act: number
|
||
readonly slug: string
|
||
readonly label: string
|
||
readonly levelName: string
|
||
readonly path: string
|
||
readonly pages: number
|
||
}[]
|
||
}
|
||
|
||
/** A pack's per-map scene file. */
|
||
interface PackSceneJson {
|
||
readonly act: number
|
||
readonly levelName: string
|
||
readonly ds1: string
|
||
readonly cellsX: number
|
||
readonly cellsY: number
|
||
readonly originX: number
|
||
readonly originY: number
|
||
readonly widthPx: number
|
||
readonly heightPx: number
|
||
readonly pages: readonly { readonly file: string; readonly width: number; readonly height: number }[]
|
||
readonly frames: readonly (readonly number[])[]
|
||
readonly framePlacement: readonly (readonly number[])[]
|
||
readonly floors: readonly (readonly number[])[]
|
||
readonly walls: readonly (readonly number[])[]
|
||
/** Roof draws, painted after everything else (absent in older packs). */
|
||
readonly roofs?: readonly (readonly number[])[]
|
||
readonly objects: readonly unknown[]
|
||
readonly collision: { readonly width: number; readonly height: number; readonly runs: readonly (readonly number[])[] }
|
||
readonly spawn: readonly number[] | null
|
||
readonly stats: { readonly missingTiles: number; readonly walkable: number }
|
||
}
|
||
|
||
/**
|
||
* Build the runtime for a prebaked pack.
|
||
*
|
||
* @param packBase - directory holding `index.json`.
|
||
* @param act - act to open.
|
||
* @param wantedLevel - `?level=` label, when the caller picked one.
|
||
* @returns the runtime, or null when no pack covers this act.
|
||
*/
|
||
async function loadPackRuntime(
|
||
packBase: string,
|
||
act: number,
|
||
wantedLevel: string,
|
||
viewport: { width: number; height: number },
|
||
charBases: readonly string[],
|
||
): Promise<MapRuntime | null> {
|
||
let index: PackIndex
|
||
try {
|
||
index = await fetchJson<PackIndex>(`${packBase}/index.json`)
|
||
} catch {
|
||
return null
|
||
}
|
||
const forAct = index.levels.filter(entry => entry.act === act)
|
||
if (forAct.length === 0) return null
|
||
const entry = (wantedLevel === ''
|
||
? undefined
|
||
: forAct.find(candidate => candidate.label === wantedLevel)
|
||
?? forAct.find(candidate => candidate.slug === wantedLevel))
|
||
?? forAct.find(candidate => candidate.slug === 'town')
|
||
?? forAct[0]!
|
||
const scene = await fetchJson<PackSceneJson>(`${packBase}/${entry.path}/scene.json`)
|
||
|
||
const frames: AtlasFrame[] = scene.framePlacement.map(place => ({
|
||
x: place[1] ?? 0, y: place[2] ?? 0, width: place[3] ?? 1, height: place[4] ?? 1,
|
||
}))
|
||
const toDrawable = (row: readonly number[]): Drawable => {
|
||
const frameIndex = row[0] ?? 0
|
||
return {
|
||
frame: frames[frameIndex] ?? { x: 0, y: 0, width: 1, height: 1 },
|
||
x: row[1] ?? 0,
|
||
y: row[2] ?? 0,
|
||
cellX: row[3] ?? 0,
|
||
cellY: row[4] ?? 0,
|
||
page: scene.framePlacement[frameIndex]?.[0] ?? 0,
|
||
}
|
||
}
|
||
const floors = scene.floors.map(toDrawable)
|
||
const walls = scene.walls.map(toDrawable)
|
||
const roofs = (scene.roofs ?? []).map(toDrawable)
|
||
|
||
// Collision arrives as runs; expanding it here keeps the JSON small and yields
|
||
// exactly the grid the live path would have produced.
|
||
const blocked = new Uint8Array(scene.collision.width * scene.collision.height)
|
||
let at = 0
|
||
for (const run of scene.collision.runs) {
|
||
const value = run[0] ?? 0
|
||
const length = run[1] ?? 0
|
||
if (value !== 0) blocked.fill(value, at, Math.min(at + length, blocked.length))
|
||
at += length
|
||
}
|
||
const grid: CollisionGrid = {
|
||
originX: scene.originX,
|
||
originY: scene.originY,
|
||
cellsX: scene.cellsX,
|
||
cellsY: scene.cellsY,
|
||
blocked,
|
||
gridWidth: scene.collision.width,
|
||
}
|
||
const spawn = scene.spawn === null || scene.spawn === undefined
|
||
? (findIsoSpawn(grid) ?? { x: scene.widthPx / 2, y: scene.heightPx / 2 })
|
||
: { x: scene.spawn[0] ?? 0, y: scene.spawn[1] ?? 0 }
|
||
|
||
// The pack carries the act palette, which the character atlas needs; without it
|
||
// the character simply stays a marker rather than rendering in wrong colours.
|
||
const paletteRgb = index.palettes?.[`act${String(scene.act)}`]
|
||
const packPalette: Palette | null = paletteRgb === undefined
|
||
? null
|
||
: { rgb: Uint8Array.from(paletteRgb), size: 256 }
|
||
const pages: (AtlasHandle | null)[] = scene.pages.map(() => null)
|
||
const priority = pagesNeededForViewport(floors, walls, spawn, viewport, coverZoom(scene.widthPx, scene.heightPx, viewport))
|
||
const loadOrder = [...priority, ...pages.map((_, index) => index).filter(index => !priority.includes(index))]
|
||
|
||
return {
|
||
source: 'pack',
|
||
base: packBase,
|
||
charBases,
|
||
palette: packPalette,
|
||
level: scene.levelName,
|
||
act: scene.act,
|
||
quadrants: forAct.map(candidate => candidate.label),
|
||
quadrantParam: 'level',
|
||
quadrant: entry.label,
|
||
cellsX: scene.cellsX,
|
||
cellsY: scene.cellsY,
|
||
widthPx: scene.widthPx,
|
||
heightPx: scene.heightPx,
|
||
grid,
|
||
floors,
|
||
walls,
|
||
roofs,
|
||
spawn,
|
||
objects: scene.objects.length,
|
||
frames: scene.frames.length,
|
||
notes: [`首屏页 ${priority.join(',')}，共 ${String(pages.length)} 页`],
|
||
pages,
|
||
priorityPages: priority,
|
||
loadOrder,
|
||
async loadPages(renderer, indices, onProgress) {
|
||
const queue = indices.filter(index => pages[index] === null)
|
||
let cursor = 0
|
||
const workers = Array.from({ length: Math.min(PAGE_CONCURRENCY, queue.length) }, async () => {
|
||
for (;;) {
|
||
const index = queue[cursor]
|
||
cursor += 1
|
||
if (index === undefined) return
|
||
const page = scene.pages[index]!
|
||
const response = await fetch(`${packBase}/${entry.path}/${page.file}`)
|
||
if (!response.ok) throw new Error(`${page.file}: HTTP ${String(response.status)}`)
|
||
const bitmap = await createImageBitmap(await response.blob())
|
||
try {
|
||
pages[index] = renderer.addAtlas(bitmap, page.width, page.height)
|
||
} finally {
|
||
bitmap.close()
|
||
}
|
||
onProgress()
|
||
}
|
||
})
|
||
await Promise.all(workers)
|
||
},
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Which pages the first frame needs.
|
||
*
|
||
* Only the pages whose tiles intersect a box around the spawn point: later pages
|
||
* can be megabytes, and none of their tiles are on screen yet.
|
||
*
|
||
* @param floors - floor draws.
|
||
* @param walls - wall draws.
|
||
* @param spawn - spawn point in scene pixels.
|
||
* @returns page indices, ascending.
|
||
*/
|
||
function pagesNeededForViewport(
|
||
floors: readonly Drawable[],
|
||
walls: readonly Drawable[],
|
||
spawn: { x: number; y: number },
|
||
viewport: { width: number; height: number },
|
||
zoom: number,
|
||
): number[] {
|
||
// The first frame must cover what is *actually* on screen: a full-screen
|
||
// canvas shows far more world than the fixed 960×560 it used to assume, and a
|
||
// page that is not loaded draws nothing at all.
|
||
const halfWidth = viewport.width / zoom / 2 + 96
|
||
const halfHeight = viewport.height / zoom / 2 + 96
|
||
const left = spawn.x - halfWidth
|
||
const right = spawn.x + halfWidth
|
||
const top = spawn.y - halfHeight
|
||
const bottom = spawn.y + halfHeight
|
||
const needed = new Set<number>()
|
||
for (const draw of [...floors, ...walls]) {
|
||
if (draw.x + draw.frame.width < left || draw.x > right) continue
|
||
if (draw.y + draw.frame.height < top || draw.y > bottom) continue
|
||
needed.add(draw.page)
|
||
}
|
||
if (needed.size === 0) needed.add(0)
|
||
return [...needed].sort((a, b) => a - b)
|
||
}
|
||
|
||
/**
|
||
* Build the runtime by reading and decoding the archives.
|
||
*
|
||
* @param base - directory holding the archives.
|
||
* @param act - act to open.
|
||
* @param renderer - renderer that receives the atlas.
|
||
* @param wantedQuadrant - `?quadrant=` member name, when given.
|
||
* @returns the runtime.
|
||
*/
|
||
async function loadLiveRuntime(
|
||
base: string,
|
||
act: number,
|
||
renderer: SpriteRenderer,
|
||
wantedQuadrant: string,
|
||
): Promise<MapRuntime> {
|
||
const archives = new MountedArchives()
|
||
const notes: string[] = []
|
||
for (const name of [...DATA_ARCHIVES, CHARACTER_ARCHIVE]) {
|
||
try {
|
||
const source = await httpRangeSource(`${base}/${name}`, name)
|
||
archives.add(name, await MpqArchive.open(source))
|
||
} catch (err) {
|
||
notes.push(`${name}: ${(err as Error).message}`)
|
||
}
|
||
}
|
||
if (archives.size === 0) throw new Error(`no archive could be mounted from ${base}`)
|
||
|
||
const tables = await loadActTables(archives)
|
||
const wantedLevel = param('level', '')
|
||
const town: LevelInfo = wantedLevel === ''
|
||
? resolveActTown(tables, act)
|
||
: resolveLevel(tables, Number(wantedLevel), act)
|
||
const quadrants = town.ds1Names.map(name => name.split('\\').pop() ?? name)
|
||
const wanted = wantedQuadrant === '' ? (quadrants[0] ?? '') : wantedQuadrant
|
||
const index = Math.max(0, quadrants.indexOf(wanted))
|
||
|
||
const level = decodeDs1(await archives.read(town.ds1Names[index]!))
|
||
const libraries = []
|
||
for (const name of town.dt1Names) libraries.push(decodeDt1(await archives.read(name)))
|
||
const pl2 = decodePl2(await archives.read(town.paletteName))
|
||
const palette: Palette = { rgb: pl2.rgb, size: 256 }
|
||
const scene = buildIsoMapScene(level, libraries, levelSeed(town.ds1Names[index] ?? town.levelName))
|
||
const atlas = buildAtlasThatFits(renderer, scene.sheet, palette)
|
||
const frames = atlas.groups[0] ?? []
|
||
const toDrawable = (row: { frameIndex: number; x: number; y: number; cellX: number; cellY: number }): Drawable => ({
|
||
frame: frames[row.frameIndex] ?? { x: 0, y: 0, width: 1, height: 1 },
|
||
x: row.x,
|
||
y: row.y,
|
||
cellX: row.cellX,
|
||
cellY: row.cellY,
|
||
page: 0,
|
||
})
|
||
return {
|
||
source: 'live',
|
||
base,
|
||
charBases: [base],
|
||
palette,
|
||
level: town.levelName,
|
||
act,
|
||
quadrants,
|
||
quadrantParam: 'quadrant',
|
||
quadrant: quadrants[index] ?? '',
|
||
cellsX: scene.cellsX,
|
||
cellsY: scene.cellsY,
|
||
widthPx: scene.widthPx,
|
||
heightPx: scene.heightPx,
|
||
grid: scene,
|
||
floors: scene.floors.map(toDrawable),
|
||
walls: scene.walls.map(toDrawable),
|
||
roofs: scene.roofs.map(toDrawable),
|
||
spawn: findIsoSpawn(scene) ?? { x: scene.widthPx / 2, y: scene.heightPx / 2 },
|
||
objects: level.objects.length,
|
||
frames: scene.frames.length,
|
||
notes,
|
||
pages: [renderer.defaultAtlasHandle],
|
||
priorityPages: [0],
|
||
loadOrder: [0],
|
||
loadPages: async () => {},
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Build the tile atlas at the first width the renderer accepts.
|
||
*
|
||
* @param renderer - the sprite renderer, used as the size oracle.
|
||
* @param sheet - the scene's tile sheet.
|
||
* @param palette - the act palette.
|
||
* @returns the uploaded atlas.
|
||
*/
|
||
function buildAtlasThatFits(renderer: SpriteRenderer, sheet: SpriteSheet, palette: Palette): SpriteAtlas {
|
||
let lastError: unknown = null
|
||
for (const width of [4096, 8192, 16384]) {
|
||
const atlas = buildAtlas(sheet, palette, undefined, { width })
|
||
try {
|
||
renderer.setAtlas(atlas)
|
||
return atlas
|
||
} catch (err) {
|
||
lastError = err
|
||
console.warn(`atlas ${String(atlas.width)}x${String(atlas.height)} rejected: ${(err as Error).message}`)
|
||
}
|
||
}
|
||
throw lastError instanceof Error ? lastError : new Error('no atlas size the renderer accepts')
|
||
}
|
||
|
||
/**
|
||
* Fill in the remaining pages without blocking the first frames.
|
||
*
|
||
* @param runtime - the runtime.
|
||
* @param renderer - renderer to upload into.
|
||
*/
|
||
function preloadRemaining(runtime: MapRuntime, renderer: SpriteRenderer): void {
|
||
const rest = runtime.loadOrder.slice(1)
|
||
if (rest.length === 0) return
|
||
void runtime.loadPages(renderer, rest, () => {
|
||
state.pagesLoaded = runtime.pages.filter(page => page !== null).length
|
||
}).catch((err: unknown) => {
|
||
console.warn(`page preload: ${(err as Error).message}`)
|
||
})
|
||
}
|
||
|
||
/** A composited character, uploaded as its own atlas page. */
|
||
interface LoadedCharacter {
|
||
readonly handle: AtlasHandle
|
||
/** `atlas.groups[direction][frame]`, ready to draw. */
|
||
readonly groups: readonly (readonly AtlasFrame[])[]
|
||
readonly directions: number
|
||
readonly walk: number
|
||
readonly stand: number
|
||
readonly members: number
|
||
}
|
||
|
||
/**
|
||
* Load the player's art from the character archive.
|
||
*
|
||
* The map comes from the pack, but a character is not map data: it is eight DCC
|
||
* layers plus a COF, ~1–3 MB that the archive serves on demand. Loading it after
|
||
* the first frame means the map is walkable while the Sorceress is still
|
||
* arriving, and if the archive is unreachable the page keeps the marker.
|
||
*
|
||
* @param base - archive directory.
|
||
* @param palette - the act palette (from the pack index).
|
||
* @param renderer - renderer to upload into.
|
||
* @returns the character, or null when it could not be loaded.
|
||
*/
|
||
async function loadCharacterArt(
|
||
bases: readonly string[],
|
||
palette: Palette,
|
||
renderer: SpriteRenderer,
|
||
): Promise<LoadedCharacter | null> {
|
||
try {
|
||
const archives = new MountedArchives()
|
||
let mounted = false
|
||
for (const base of bases) {
|
||
try {
|
||
archives.add(CHARACTER_ARCHIVE, await MpqArchive.open(await httpRangeSource(`${base}/${CHARACTER_ARCHIVE}`, CHARACTER_ARCHIVE)))
|
||
mounted = true
|
||
break
|
||
} catch (err) {
|
||
console.warn(`${base}/${CHARACTER_ARCHIVE}: ${(err as Error).message}`)
|
||
}
|
||
}
|
||
if (!mounted) return null
|
||
const walk = await loadCharacterSheet(archives, 'so', 'wl', 'hth')
|
||
const stand = await loadCharacterSheet(archives, 'so', 'nu', 'hth')
|
||
const joined: SpriteSheet = { groups: [...walk.sheet.groups, ...stand.sheet.groups], width: null }
|
||
const atlas = buildAtlas(joined, palette, undefined, { width: 1024 })
|
||
const handle = renderer.addAtlas({ pixels: atlas.pixels, width: atlas.width, height: atlas.height })
|
||
const walkCount = walk.sheet.groups.length
|
||
return {
|
||
handle,
|
||
groups: atlas.groups,
|
||
directions: walk.directions,
|
||
walk: 0,
|
||
stand: walkCount,
|
||
members: walk.members.length + stand.members.length,
|
||
}
|
||
} catch (err) {
|
||
console.warn(`character art unavailable: ${(err as Error).message}`)
|
||
return null
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Run the loop for a runtime.
|
||
*
|
||
* @param runtime - the map.
|
||
* @param renderer - the renderer (already holding the atlas or the first pages).
|
||
* @param started - `performance.now()` when boot began.
|
||
*/
|
||
function runScene(runtime: MapRuntime, renderer: SpriteRenderer, started: number): void {
|
||
const canvas = document.querySelector<HTMLCanvasElement>('#view')!
|
||
const status = document.querySelector<HTMLElement>('#status')!
|
||
const hud = document.querySelector<HTMLElement>('#hud')!
|
||
const actSelect = document.querySelector<HTMLSelectElement>('#act')!
|
||
const variantSelect = document.querySelector<HTMLSelectElement>('#variant')!
|
||
|
||
const player = { x: runtime.spawn.x, y: runtime.spawn.y, facing: 0, walkFrame: 0, moving: false }
|
||
const input = new KeyboardInput()
|
||
input.attach()
|
||
let skippedDraws = 0
|
||
|
||
// Zoom: default to "cover the window", with manual override for looking around.
|
||
let character: LoadedCharacter | null = null
|
||
let zoom = coverZoom(runtime.widthPx, runtime.heightPx, syncCanvasSize(canvas))
|
||
let manualZoom = false
|
||
const setZoom = (value: number): void => {
|
||
manualZoom = true
|
||
zoom = Math.min(8, Math.max(0.4, value))
|
||
}
|
||
const onWheel = (event: WheelEvent): void => {
|
||
event.preventDefault()
|
||
setZoom(zoom * (event.deltaY < 0 ? 1.12 : 1 / 1.12))
|
||
}
|
||
const onKeyZoom = (event: KeyboardEvent): void => {
|
||
if (event.code === 'Equal' || event.code === 'NumpadAdd') setZoom(zoom * 1.15)
|
||
if (event.code === 'Minus' || event.code === 'NumpadSubtract') setZoom(zoom / 1.15)
|
||
if (event.code === 'Digit0') { manualZoom = false; zoom = coverZoom(runtime.widthPx, runtime.heightPx, syncCanvasSize(canvas)) }
|
||
}
|
||
const onResize = (): void => {
|
||
const size = syncCanvasSize(canvas)
|
||
if (!manualZoom) zoom = coverZoom(runtime.widthPx, runtime.heightPx, size)
|
||
state.zoom = Number(zoom.toFixed(2))
|
||
}
|
||
canvas.addEventListener('wheel', onWheel, { passive: false })
|
||
window.addEventListener('keydown', onKeyZoom)
|
||
window.addEventListener('resize', onResize)
|
||
|
||
const loop = new GameLoop({
|
||
tickRate: 25,
|
||
onTick: () => {
|
||
const movement = input.movement()
|
||
player.moving = movement.x !== 0 || movement.y !== 0
|
||
if (player.moving) {
|
||
// Input is screen-space: the diamond lattice is rotated 45° from the
|
||
// screen axes, so "north" walks along a cell diagonal.
|
||
const length = Math.hypot(movement.x, movement.y)
|
||
const step = (WALK_SPEED / 25) / length
|
||
if (!collides(runtime.grid, player.x + movement.x * step, player.y)) player.x += movement.x * step
|
||
if (!collides(runtime.grid, player.x, player.y + movement.y * step)) player.y += movement.y * step
|
||
player.facing = facingOf(movement.x, movement.y)
|
||
player.walkFrame = (player.walkFrame + 1) % 24
|
||
} else {
|
||
player.walkFrame = 0
|
||
}
|
||
state.tick = loop.tick
|
||
state.x = player.x
|
||
state.y = player.y
|
||
state.facing = player.facing
|
||
},
|
||
onRender: () => {
|
||
if (state.pagesAtFirstFrame < 0) {
|
||
state.pagesAtFirstFrame = runtime.pages.filter(page => page !== null).length
|
||
state.firstFrameMs = Math.round(performance.now() - started)
|
||
}
|
||
renderer.begin({ x: player.x, y: player.y - 16, zoom }, [0.03, 0.03, 0.04])
|
||
skippedDraws = 0
|
||
const drawTiles = (list: readonly Drawable[], from: number, to: number): void => {
|
||
for (let index = from; index < to; index += 1) {
|
||
const draw = list[index]!
|
||
const page = runtime.pages[draw.page]
|
||
if (page === null || page === undefined) { skippedDraws += 1; continue }
|
||
renderer.draw(draw.frame, draw.x, draw.y, { atlas: page })
|
||
}
|
||
}
|
||
drawTiles(runtime.floors, 0, runtime.floors.length)
|
||
const cell = cellOf(runtime.grid, player.x, player.y)
|
||
const insertAt = depthInsertIndex(runtime.walls, cell.x, cell.y)
|
||
drawTiles(runtime.walls, 0, insertAt)
|
||
if (character === null) {
|
||
// Placeholder until the character archive has been read.
|
||
renderer.drawSolid(player.x - MARKER_WIDTH / 2, player.y - MARKER_HEIGHT, MARKER_WIDTH, MARKER_HEIGHT, [0.85, 0.75, 0.45, 1])
|
||
renderer.drawSolid(player.x - MARKER_WIDTH / 2, player.y - 6, MARKER_WIDTH, 6, [0.35, 0.25, 0.15, 1])
|
||
} else {
|
||
const direction = facingToDirection(player.facing, character.directions)
|
||
const groupIndex = (player.moving ? character.walk : character.stand) + direction
|
||
const group = character.groups[groupIndex] ?? character.groups[character.walk + direction]
|
||
const frameIndex = player.moving
|
||
? Math.floor(player.walkFrame / 3) % Math.max(1, group?.length ?? 1)
|
||
: 0
|
||
const frame = group?.[frameIndex]
|
||
if (frame !== undefined) {
|
||
// Feet at the player's position: the composited frame is anchored by its
|
||
// bottom edge, which is where the COF puts the sprite's origin.
|
||
renderer.draw(frame, player.x - frame.width / 2, player.y - frame.height + FEET_HEIGHT / 2, { atlas: character.handle })
|
||
state.characterFrames += 1
|
||
state.characterGroup = groupIndex
|
||
}
|
||
}
|
||
drawTiles(runtime.walls, insertAt, runtime.walls.length)
|
||
// Roofs last, in their own pass: the engine paints them after every other
|
||
// layer so they cover the floor, the walls and anything walking under them.
|
||
drawTiles(runtime.roofs, 0, runtime.roofs.length)
|
||
renderer.flush()
|
||
state.drawCalls = 1
|
||
state.tickRate = loop.tickRate
|
||
state.zoom = Number(zoom.toFixed(2))
|
||
state.canvasWidth = canvas.width
|
||
state.canvasHeight = canvas.height
|
||
state.pagesLoaded = runtime.pages.filter(page => page !== null).length
|
||
state.skippedDraws = skippedDraws
|
||
hud.textContent = `${runtime.level} · ${runtime.quadrant} · ${runtime.source === 'pack' ? '资源包' : '读归档'}`
|
||
+ ` · ${String(runtime.cellsX)}×${String(runtime.cellsY)} 格 · ${String(runtime.floors.length)} 地面 / ${String(runtime.walls.length)} 墙`
|
||
+ ` · 页 ${String(state.pagesLoaded)}/${String(state.pagesTotal)}`
|
||
+ ` · 对象 ${String(runtime.objects)} · ${loop.tickRate.toFixed(1)} tps · pos ${player.x.toFixed(0)},${player.y.toFixed(0)}`
|
||
+ (skippedDraws > 0 ? ` · 待页 ${String(skippedDraws)}` : '')
|
||
},
|
||
})
|
||
loop.start()
|
||
state.ready = true
|
||
state.loadMs = Math.round(performance.now() - started)
|
||
// Only the live path fills the selectors here: the pack path already built them from
|
||
// the index (`populatePackSelectors`), and overwriting them with the single level this
|
||
// runtime knows would collapse the three-level hierarchy back into one flat list.
|
||
if (runtime.source === 'live') populateLiveSelectors(runtime)
|
||
void variantSelect
|
||
status.textContent = 'WASD / 方向键移动。'
|
||
+ (runtime.source === 'pack'
|
||
? `资源包：首屏 ${String(state.pagesLoaded)}/${String(state.pagesTotal)} 页，${String(state.loadMs)} ms 出画面，其余页后台补。`
|
||
: '本次直接读归档并解码（较慢）：资源包不可用时会走这条路。')
|
||
+ (state.character
|
||
? ` 角色为真·女法师（DCC+COF 合成，${String(state.characterMembers)} 层）。`
|
||
: ' 角色暂为占位棋子：d2char.mpq 不可用时会退回这里。')
|
||
+ ' 可破坏物品的位置与美术成员已进包，静态帧待接。'
|
||
|
||
preloadRemaining(runtime, renderer)
|
||
if (runtime.palette !== null) {
|
||
const paletteForCharacter = runtime.palette
|
||
void loadCharacterArt(runtime.charBases, paletteForCharacter, renderer).then((loaded) => {
|
||
character = loaded
|
||
state.character = loaded !== null
|
||
if (loaded !== null) state.characterMembers = loaded.members
|
||
// The status line is written before this promise settles, so refresh it: leaving
|
||
// "占位棋子" on screen while the real sprite is already drawing is a lie the user
|
||
// actually sees (it showed up in a screenshot review).
|
||
status.textContent = status.textContent.replace(
|
||
loaded === null
|
||
? ' 角色暂为占位棋子：d2char.mpq 不可用时会退回这里。'
|
||
: / 角色[^。]*。/u,
|
||
loaded === null
|
||
? ' 角色暂为占位棋子：d2char.mpq 不可用时会退回这里。'
|
||
: ` 角色为真·女法师（DCC+COF 合成，${String(loaded.members)} 层）。`,
|
||
)
|
||
})
|
||
}
|
||
|
||
window.addEventListener('beforeunload', () => {
|
||
loop.stop()
|
||
input.detach()
|
||
if (character?.handle) renderer.deleteAtlas(character.handle)
|
||
for (const page of runtime.pages) {
|
||
if (page !== null) renderer.deleteAtlas(page)
|
||
}
|
||
renderer.dispose()
|
||
})
|
||
}
|
||
|
||
/**
|
||
* Whether a feet box at a point overlaps blocked sub-tiles.
|
||
*
|
||
* @param grid - the collision grid.
|
||
* @param x - feet centre x.
|
||
* @param y - feet centre y.
|
||
* @returns true when blocked.
|
||
*/
|
||
function collides(grid: CollisionGrid, x: number, y: number): boolean {
|
||
if (isBlockedAt(grid, x, y)) return true
|
||
for (const [dx, dy] of [[-1, -1], [1, -1], [-1, 1], [1, 1], [0, -1], [0, 1], [-1, 0], [1, 0]] as const) {
|
||
if (isBlockedAt(grid, x + (dx * FEET_WIDTH) / 2, y + (dy * FEET_HEIGHT) / 2)) return true
|
||
}
|
||
return false
|
||
}
|
||
|
||
/**
|
||
* The cell containing a scene point.
|
||
*
|
||
* @param grid - the collision grid.
|
||
* @param x - scene x.
|
||
* @param y - scene y.
|
||
* @returns rounded-down cell coordinates.
|
||
*/
|
||
function cellOf(grid: CollisionGrid, x: number, y: number): { x: number; y: number } {
|
||
const px = x - grid.originX
|
||
const py = y - grid.originY
|
||
return {
|
||
x: Math.floor((px / ORTHO_CELL_WIDTH + py / ORTHO_CELL_HEIGHT) / 2),
|
||
y: Math.floor((py / ORTHO_CELL_HEIGHT - px / ORTHO_CELL_WIDTH) / 2),
|
||
}
|
||
}
|
||
|
||
/**
|
||
* The facing index for a screen-space direction.
|
||
*
|
||
* @param x - screen x direction, -1..1.
|
||
* @param y - screen y direction, -1..1 (down positive).
|
||
* @returns the facing index, 0 = south, turning clockwise (west).
|
||
*/
|
||
function facingOf(x: number, y: number): number {
|
||
const angle = Math.atan2(-x, y)
|
||
return Math.round((angle / (Math.PI / 4)) + 8) % 8
|
||
}
|
||
|
||
/**
|
||
* Copy a runtime's description into the published state.
|
||
*
|
||
* @param runtime - the runtime.
|
||
* @param base - location the data came from.
|
||
*/
|
||
function publish(runtime: MapRuntime, base: string): void {
|
||
state.source = runtime.source
|
||
state.base = base
|
||
state.act = runtime.act
|
||
state.level = runtime.level
|
||
state.quadrant = runtime.quadrant
|
||
state.quadrants = [...runtime.quadrants]
|
||
state.cellsX = runtime.cellsX
|
||
state.cellsY = runtime.cellsY
|
||
state.widthPx = runtime.widthPx
|
||
state.heightPx = runtime.heightPx
|
||
state.floors = runtime.floors.length
|
||
state.walls = runtime.walls.length
|
||
state.frames = runtime.frames
|
||
state.pagesTotal = runtime.pages.length
|
||
state.pagesLoaded = runtime.pages.filter(page => page !== null).length
|
||
state.priorityPages = [...runtime.priorityPages]
|
||
state.objects = runtime.objects
|
||
state.roofs = runtime.roofs.length
|
||
state.missing = 0
|
||
state.walkable = 1 - [...runtime.grid.blocked].reduce((sum, value) => sum + value, 0) / runtime.grid.blocked.length
|
||
}
|
||
|
||
/**
|
||
* Fill the level picker from a pack index and wire it to navigation.
|
||
*
|
||
* Every baked map is one entry, grouped by act. Picking one reloads the page with
|
||
* `?act=` and `?level=`, which is the same query the loader already understands,
|
||
* so the picker needs no second loading path.
|
||
*
|
||
* @param packBase - directory holding `index.json`.
|
||
* @param current - the act and the entry label currently displayed (`runtime.quadrant`),
|
||
* so the list marks exactly the map that is on screen.
|
||
*/
|
||
async function populatePackSelectors(packBase: string, current: { act: number; label: string }): Promise<void> {
|
||
const actSelect = document.querySelector<HTMLSelectElement>('#act')
|
||
const sceneSelect = document.querySelector<HTMLSelectElement>('#scene')
|
||
const variantSelect = document.querySelector<HTMLSelectElement>('#variant')
|
||
if (actSelect === null || sceneSelect === null || variantSelect === null) return
|
||
let index: PackIndex
|
||
try {
|
||
index = await fetchJson<PackIndex>(`${packBase}/index.json`)
|
||
} catch {
|
||
return
|
||
}
|
||
|
||
/** A scene type: one `Levels.txt` level, with every baked DS1 variant under it. */
|
||
interface Scene {
|
||
readonly slug: string
|
||
readonly name: string
|
||
readonly variants: readonly PackIndex['levels'][number][]
|
||
}
|
||
|
||
const scenesByAct = new Map<number, Scene[]>()
|
||
for (const entry of index.levels) {
|
||
let scenes = scenesByAct.get(entry.act)
|
||
if (scenes === undefined) { scenes = []; scenesByAct.set(entry.act, scenes) }
|
||
let scene = scenes.find(candidate => candidate.slug === entry.slug)
|
||
if (scene === undefined) {
|
||
scene = { slug: entry.slug, name: sceneNameZh(entry.slug, entry.levelName), variants: [] }
|
||
scenes.push(scene)
|
||
}
|
||
;(scene.variants as PackIndex['levels'][number][]).push(entry)
|
||
}
|
||
|
||
/** The suffix after the level slug, which is the DS1's own name fragment. */
|
||
const suffixOf = (entry: PackIndex['levels'][number]): string =>
|
||
entry.label.startsWith(`${entry.slug}-`) ? entry.label.slice(entry.slug.length + 1) : entry.label
|
||
|
||
const optionFor = (value: string, text: string, selected: boolean): HTMLOptionElement => {
|
||
const option = document.createElement('option')
|
||
option.value = value
|
||
option.textContent = text
|
||
option.selected = selected
|
||
return option
|
||
}
|
||
|
||
const acts = [...scenesByAct.keys()].sort((left, right) => left - right)
|
||
actSelect.replaceChildren(...acts.map(act => optionFor(
|
||
String(act),
|
||
`${ACT_NAMES_ZH[act] ?? `第 ${String(act)} 章`}`,
|
||
act === current.act,
|
||
)))
|
||
actSelect.disabled = acts.length === 0
|
||
|
||
const scenes = scenesByAct.get(current.act) ?? []
|
||
const currentEntry = index.levels.find(entry => entry.act === current.act && entry.label === current.label)
|
||
const currentSceneSlug = currentEntry?.slug ?? scenes[0]?.slug ?? ''
|
||
sceneSelect.replaceChildren(...scenes.map(scene => optionFor(
|
||
scene.slug,
|
||
scene.name,
|
||
scene.slug === currentSceneSlug,
|
||
)))
|
||
sceneSelect.disabled = scenes.length === 0
|
||
|
||
const populateVariants = (slug: string, selectedLabel: string): void => {
|
||
const scene = scenes.find(candidate => candidate.slug === slug)
|
||
const variants = scene?.variants ?? []
|
||
// A single-variant scene still shows its own DS1 so the third selector is never
|
||
// an empty box; the option text repeats the scene name only when it is the only one.
|
||
variantSelect.replaceChildren(...variants.map(entry => {
|
||
const suffix = suffixOf(entry)
|
||
const label = variants.length > 1 ? variantLabelZh(suffix) : `${scene?.name ?? entry.levelName}（${suffix}）`
|
||
return optionFor(entry.label, label, entry.label === selectedLabel)
|
||
}))
|
||
variantSelect.disabled = variants.length === 0
|
||
}
|
||
populateVariants(currentSceneSlug, current.label)
|
||
variantSelect.dataset.scene = currentSceneSlug
|
||
|
||
const go = (params: URLSearchParams): void => { location.search = params.toString() }
|
||
const navigateToLabel = (label: string, act: number): void => {
|
||
const params = new URLSearchParams(location.search)
|
||
params.set('act', String(act))
|
||
params.set('level', label)
|
||
go(params)
|
||
}
|
||
|
||
actSelect.onchange = () => {
|
||
const act = Number(actSelect.value)
|
||
const first = scenesByAct.get(act)?.[0]
|
||
// Keep the address bar and the map in sync: an act with no baked scene yet (there
|
||
// are none today) simply leaves the current map alone.
|
||
if (first === undefined) return
|
||
navigateToLabel(first.variants[0]?.label ?? '', act)
|
||
}
|
||
sceneSelect.onchange = () => {
|
||
const scene = scenes.find(candidate => candidate.slug === sceneSelect.value)
|
||
if (scene === undefined) return
|
||
populateVariants(scene.slug, '')
|
||
navigateToLabel(scene.variants[0]?.label ?? '', current.act)
|
||
}
|
||
variantSelect.onchange = () => { navigateToLabel(variantSelect.value, current.act) }
|
||
}
|
||
|
||
/**
|
||
* Build the three selectors for the live (no pack) path.
|
||
*
|
||
* Without a pack index there is no scene catalog to offer: the live loader only knows
|
||
* the act's town, so `场景` shows that one level and `细分场景` lists the DS1 files the
|
||
* level actually contains — which is the same distinction the pack path draws between
|
||
* a scene and its variants.
|
||
*
|
||
* @param runtime - the freshly loaded runtime.
|
||
*/
|
||
function populateLiveSelectors(runtime: MapRuntime): void {
|
||
const actSelect = document.querySelector<HTMLSelectElement>('#act')
|
||
const sceneSelect = document.querySelector<HTMLSelectElement>('#scene')
|
||
const variantSelect = document.querySelector<HTMLSelectElement>('#variant')
|
||
if (actSelect === null || sceneSelect === null || variantSelect === null) return
|
||
actSelect.value = String(runtime.act)
|
||
actSelect.disabled = false
|
||
const option = document.createElement('option')
|
||
option.value = runtime.level
|
||
option.textContent = runtime.level
|
||
option.selected = true
|
||
sceneSelect.replaceChildren(option)
|
||
sceneSelect.disabled = false
|
||
variantSelect.replaceChildren(...runtime.quadrants.map(name => {
|
||
const item = document.createElement('option')
|
||
item.value = name
|
||
item.textContent = name
|
||
item.selected = name === runtime.quadrant
|
||
return item
|
||
}))
|
||
variantSelect.disabled = runtime.quadrants.length === 0
|
||
actSelect.onchange = () => {
|
||
const params = new URLSearchParams(location.search)
|
||
params.set('act', actSelect.value)
|
||
params.delete('level')
|
||
params.delete('quadrant')
|
||
location.search = params.toString()
|
||
}
|
||
sceneSelect.onchange = () => { /* one scene only in live mode */ }
|
||
variantSelect.onchange = () => {
|
||
const params = new URLSearchParams(location.search)
|
||
params.set('act', String(runtime.act))
|
||
params.set(runtime.quadrantParam, variantSelect.value)
|
||
params.delete(runtime.quadrantParam === 'level' ? 'quadrant' : 'level')
|
||
location.search = params.toString()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Boot the page: pack first, archives second.
|
||
*/
|
||
async function boot(): Promise<void> {
|
||
const canvas = document.querySelector<HTMLCanvasElement>('#view')!
|
||
const status = document.querySelector<HTMLElement>('#status')!
|
||
const actSelect = document.querySelector<HTMLSelectElement>('#act')!
|
||
const sceneSelect = document.querySelector<HTMLSelectElement>('#scene')!
|
||
const variantSelect = document.querySelector<HTMLSelectElement>('#variant')!
|
||
actSelect.disabled = false
|
||
sceneSelect.disabled = true
|
||
variantSelect.disabled = true
|
||
const started = performance.now()
|
||
const act = Math.min(ACT_COUNT, Math.max(1, Number(param('act', '1'))))
|
||
state.act = act
|
||
actSelect.value = String(act)
|
||
actSelect.addEventListener('change', () => {
|
||
const params = new URLSearchParams(location.search)
|
||
params.set('act', actSelect.value)
|
||
params.delete('level')
|
||
location.search = params.toString()
|
||
})
|
||
// The canvas fills the window, so its size decides how much world the first
|
||
// frame needs and therefore which atlas pages must load before it.
|
||
const viewport = syncCanvasSize(canvas)
|
||
|
||
try {
|
||
const forcedLive = param('live', '') === '1'
|
||
if (!forcedLive) {
|
||
const packParam = param('pack', '')
|
||
const packBases = packParam === '' ? DEFAULT_PACKS : [packParam]
|
||
for (const packBase of packBases) {
|
||
status.textContent = `正在读取资源包 ${packBase}/index.json …`
|
||
const baseParamForChar = param('base', '')
|
||
const charBases = baseParamForChar === '' ? DEFAULT_BASES : [baseParamForChar]
|
||
const runtime = await loadPackRuntime(packBase, act, param('level', ''), viewport, charBases)
|
||
if (runtime === null) continue
|
||
publish(runtime, packBase)
|
||
void populatePackSelectors(packBase, { act: runtime.act, label: runtime.quadrant })
|
||
const renderer = new SpriteRenderer(canvas, {
|
||
onContextLost: () => {
|
||
status.textContent = 'WebGL 上下文丢失，正在尝试恢复…'
|
||
},
|
||
onContextRestored: () => {
|
||
status.textContent = 'WebGL 上下文已恢复，正在重新加载…'
|
||
location.reload()
|
||
},
|
||
})
|
||
// The first frame waits only for the spawn-area pages.
|
||
await runtime.loadPages(renderer, runtime.priorityPages, () => {
|
||
state.pagesLoaded = runtime.pages.filter(page => page !== null).length
|
||
})
|
||
runScene(runtime, renderer, started)
|
||
return
|
||
}
|
||
}
|
||
|
||
const baseParam = param('base', '')
|
||
const bases = baseParam === '' ? DEFAULT_BASES : [baseParam]
|
||
let lastError: unknown = null
|
||
for (const base of bases) {
|
||
try {
|
||
status.textContent = `正在读取归档 ${base}（HTTP range）并解码 …`
|
||
const renderer = new SpriteRenderer(canvas, {
|
||
onContextLost: () => {
|
||
status.textContent = 'WebGL 上下文丢失，正在尝试恢复…'
|
||
},
|
||
onContextRestored: () => {
|
||
status.textContent = 'WebGL 上下文已恢复，正在重新加载…'
|
||
location.reload()
|
||
},
|
||
})
|
||
const runtime = await loadLiveRuntime(base, act, renderer, param('quadrant', ''))
|
||
publish(runtime, base)
|
||
runScene(runtime, renderer, started)
|
||
return
|
||
} catch (err) {
|
||
lastError = err
|
||
console.warn(`${base}: ${(err as Error).message}`)
|
||
}
|
||
}
|
||
throw lastError instanceof Error ? lastError : new Error('no data location worked')
|
||
} catch (err) {
|
||
state.error = (err as Error).message
|
||
status.textContent = `启动失败：${state.error}`
|
||
actSelect.disabled = false
|
||
sceneSelect.disabled = false
|
||
variantSelect.disabled = false
|
||
}
|
||
}
|
||
|
||
void boot()
|