troytt
/
diablo2-web
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

fix(frontend): load full 34-frame /ui/cursor.png atlas and render Loadingscreen.dc6 at 1.13c 256x256 centered size

This commit is contained in:
troytt 2026-09-28 09:14:47 +00:00
parent 99e23b9a53
commit d4cd19d96c
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/bnet-main.ts
View File

@ -88,7 +88,7 @@ async function main(): Promise<void> {
await renderer.load('/ui/frontend')
// Bind mouse & keyboard events onto the 800x600 front-end canvas
canvas.addEventListener('mousemove', (e) => {
window.addEventListener('mousemove', (e) => {
if (state.stage === 'in_game') return
const pt = renderer.eventToCanvasCoords(e)
renderer.handleMouseMove(pt.x, pt.y, performance.now())

19
src/frontend/frontend-renderer.ts
View File

@ -289,7 +289,7 @@ export class FrontendRenderer {
}
}
// Load cursor-hand.png
// Load full 34-frame cursor atlas (/ui/cursor.png, 256x176: protate, ohand, orotate, buysell)
promises.push(
new Promise<void>((resolve) => {
const img = new Image()
@ -298,7 +298,7 @@ export class FrontendRenderer {
resolve()
}
img.onerror = () => resolve()
img.src = '/ui/cursor-hand.png'
img.src = '/ui/cursor.png'
}),
)
@ -1513,8 +1513,15 @@ export class FrontendRenderer {
if (!img) return
const idx = Math.max(0, Math.min(doorStrip.frames.length - 1, this.state.doorFrame))
const f = doorStrip.frames[idx]!
// Center the 640x480 door loading frame in the 800x600 canvas at (80, 60) (or scale 800x600)
ctx.drawImage(img, f.x, f.y, f.w, f.h, 80, 60, 640, 480)
// Per D2Client.dll 0x6fb71935..0x6fb71971:
// Loadingscreen.dc6 is 256x256 (0x100x0x100), drawn 1:1 centered at:
// x = (screenW / 2) - 0x80 = 400 - 128 = 272
// y_bottom = (screenH / 2) + 0x80 = 300 + 128 = 428 -> y_top = 428 - 256 = 172
const drawW = f.w
const drawH = f.h
const drawX = Math.floor((800 - drawW) / 2)
const drawY = Math.floor((600 - drawH) / 2)
ctx.drawImage(img, f.x, f.y, f.w, f.h, drawX, drawY, drawW, drawH)
}
/**
@ -1526,8 +1533,8 @@ export class FrontendRenderer {
const x = ((e.clientX - rect.left) / rect.width) * 800
const y = ((e.clientY - rect.top) / rect.height) * 600
return {
x: Math.max(0, Math.min(800, x)),
y: Math.max(0, Math.min(600, y)),
x: Math.max(0, Math.min(792, x)),
y: Math.max(0, Math.min(592, y)),
}
}