2D 遊戲等軸測視角地圖滾動核心算法與實作 (Win32 組語)

核心概念：四層座標轉換

等軸測地圖渲染的本質是解決四個座標系之間的轉換：

1. 陣列索引 → 地圖座標 (行, 列)
2. 地圖座標 → 絕對畫面像素座標
3. 絕對座標 → 視口相對座標
4. 視口座標 → 繪圖

地圖資料結構

• 一維陣列 mapInfo[400] 儲存 20×20 地圖塊類型 (0~3)
• 每塊 64×32 像素 (寬×高)
• sceneInfo[400] 儲存景物 (樹、房屋等)

關鍵轉換公式 (組語實作)

1. 索引 → 行列

; i = 索引, 20 列
xor edx, edx
mov eax, i
mov ebx, 20
div ebx          ; eax = 行, edx = 列
mov row, eax
mov col, edx

2. 行列 → 絕對像素座標 (等軸測投影)

; xAbs = row * 32 - col * 32 + xstart
mov eax, row
mov ebx, 32      ; 64/2
mul ebx
mov xAbs, eax
mov eax, col
mul ebx
sub xAbs, eax
add xAbs, xstart

; yAbs = col * 16 + row * 16 + ystart
mov eax, col
mov ebx, 16      ; 32/2
mul ebx
mov yAbs, eax
mov eax, row
mul ebx
add yAbs, eax
add yAbs, ystart

3. 視口轉換

mov eax, xAbs
sub eax, viewRect.left
mov vx, eax
mov eax, yAbs
sub eax, viewRect.top
mov vy, eax

4. 雙重 BitBlt 繪製 (透明色遮罩)

; 地圖塊
mov eax, i
cmp mapInfo[eax], 0
je  draw_tile0
cmp mapInfo[eax], 1
je  draw_tile1
; ...

draw_tile0:
invoke BitBlt, buffer, vx, vy, 64, 32, tile0, 64, 0, SRCAND  ; 遮罩
invoke BitBlt, buffer, vx, vy, 64, 32, tile0, 0, 0, SRCPAINT  ; 圖案
jmp next_tile

幀率控制邏輯

; 變數
timeOld    dd ?  ; 上次幀率統計時間
timeNew    dd ?  ; 目前時間
timeCur    dd ?  ; 上次畫面更新時間
frameCount dd ?  ; 幀計數

; 主迴圈
invoke GetTickCount
mov timeNew, eax

; 幀率統計 (每秒一次)
mov eax, timeNew
sub eax, timeOld
cmp eax, 1000
jle skip_fps
; 計算 FPS = frameCount
mov timeOld, timeNew
mov frameCount, 0
skip_fps:

; 幀率限制 (最多 100 FPS = 10ms/幀)
mov eax, timeNew
sub eax, timeCur
cmp eax, 10
jle skip_frame
mov timeCur, timeNew
inc frameCount
; 執行繪圖與邏輯
skip_frame:

精靈繪製與狀態機

• GetStatus 取得輸入狀態
• SetDir 依狀態設定方向
• DrawSprite 繪製主角動畫

效能優化建議 (未在原碼實作)

1. 視口剔除：僅繪製 vx, vy 在螢幕範圍內的塊
2. 髒矩形更新：僅重繪變動區域
3. 圖塊圖集：減少繪圖呼叫與材質切換
4. 雙緩衝：已使用 buffer DC 避免閃爍

總結

等軸測地圖滾動的核心在於 索引→行列→絕對座標→視口座標 的數學轉換。組語雖非現代主流，但展示了座標轉換的本質邏輯。現代引擎 (Unity, Godot, Cocos2d-x) 內建等軸測支援，開發者只需設定 Tilemap 與 Camera，底層原理一致。