refactor(game/mapRenderer): 支持动态路径、地图背景图渲染和装饰物绘制
This commit is contained in:
Cloud Bot
@@ -5,14 +5,12 @@ import {
|
||||
GAME_WIDTH,
|
||||
GAME_HEIGHT,
|
||||
HUD_HEIGHT,
|
||||
PATH_WAYPOINTS,
|
||||
COLOR_PATH,
|
||||
COLOR_BUILDABLE,
|
||||
COLOR_HOVER,
|
||||
COLOR_BORDER,
|
||||
MAP_LABELS,
|
||||
INITIAL_KPI,
|
||||
} from './constants'
|
||||
import type { MapConfig } from './data/mapConfigs'
|
||||
import { ALL_MAPS } from './data/mapConfigs'
|
||||
|
||||
// ─── PATH TILES ────────────────────────────────────────────────────────────────
|
||||
|
||||
/** 将折线关键坐标点展开为完整路径格子集合 */
|
||||
export function buildPathTiles(
|
||||
@@ -35,57 +33,78 @@ export function buildPathTiles(
|
||||
return tiles
|
||||
}
|
||||
|
||||
export const PATH_TILES = buildPathTiles(PATH_WAYPOINTS)
|
||||
/**
|
||||
* 向后兼容导出：用地图1配置初始化（GameScene 内部用局部变量覆盖）
|
||||
*/
|
||||
export const PATH_TILES = buildPathTiles(ALL_MAPS[0].waypoints)
|
||||
|
||||
// ─── CELL SIZE ────────────────────────────────────────────────────────────────
|
||||
|
||||
/** 计算格子尺寸（正方形格子，取宽高中较小值保证正方形） */
|
||||
export function getCellSize() {
|
||||
const rawW = Math.floor(GAME_WIDTH / MAP_COLS) // 80
|
||||
const rawH = Math.floor((GAME_HEIGHT - HUD_HEIGHT) / MAP_ROWS) // 55
|
||||
const cell = Math.min(rawW, rawH) // 55 → 正方形
|
||||
const rawW = Math.floor(GAME_WIDTH / MAP_COLS)
|
||||
const rawH = Math.floor((GAME_HEIGHT - HUD_HEIGHT) / MAP_ROWS)
|
||||
const cell = Math.min(rawW, rawH)
|
||||
return { cellW: cell, cellH: cell }
|
||||
}
|
||||
|
||||
// ─── TILE RENDERING ───────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* 绘制所有地图格子
|
||||
* @param pathTiles 当前地图的路径格集合（若不传则用模块级默认值）
|
||||
* @param mapConfig 当前地图配置，用于读取颜色（可选，默认用地图1颜色）
|
||||
*/
|
||||
export function drawAllTiles(
|
||||
g: Phaser.GameObjects.Graphics,
|
||||
hovered: { col: number; row: number } | null
|
||||
hovered: { col: number; row: number } | null,
|
||||
pathTiles?: Set<string>,
|
||||
mapConfig?: MapConfig
|
||||
): void {
|
||||
const { cellW, cellH } = getCellSize()
|
||||
const tiles = pathTiles ?? PATH_TILES
|
||||
const pathColor = mapConfig?.pathColor ?? 0x3d2b1f
|
||||
const buildColor = mapConfig?.buildColor ?? 0x1e3a5f
|
||||
const hoverColor = 0x2d5a8e
|
||||
const borderColor = 0x0a1628
|
||||
|
||||
g.clear()
|
||||
|
||||
for (let row = 0; row < MAP_ROWS; row++) {
|
||||
for (let col = 0; col < MAP_COLS; col++) {
|
||||
const isPath = PATH_TILES.has(`${col},${row}`)
|
||||
const isPath = tiles.has(`${col},${row}`)
|
||||
const isHovered =
|
||||
!isPath && hovered !== null &&
|
||||
hovered.col === col && hovered.row === row
|
||||
|
||||
const fillColor = isPath
|
||||
? COLOR_PATH
|
||||
: isHovered ? COLOR_HOVER : COLOR_BUILDABLE
|
||||
const fillColor = isPath ? pathColor : isHovered ? hoverColor : buildColor
|
||||
|
||||
const x = col * cellW
|
||||
const y = HUD_HEIGHT + row * cellH
|
||||
|
||||
g.fillStyle(fillColor, 1)
|
||||
g.fillRect(x + 1, y + 1, cellW - 2, cellH - 2)
|
||||
g.lineStyle(1, COLOR_BORDER, 0.6)
|
||||
g.lineStyle(1, borderColor, 0.6)
|
||||
g.strokeRect(x, y, cellW, cellH)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── MAP LABELS ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* 渲染地图装饰性标签
|
||||
* 渲染地图装饰性标签，返回创建的文字对象（便于切图时销毁）
|
||||
*/
|
||||
export function renderMapLabels(scene: Phaser.Scene): void {
|
||||
export function renderMapLabels(
|
||||
scene: Phaser.Scene,
|
||||
labels?: { col: number; row: number; text: string }[]
|
||||
): Phaser.GameObjects.Text[] {
|
||||
const { cellW, cellH } = getCellSize()
|
||||
for (const label of MAP_LABELS) {
|
||||
const list = labels ?? ALL_MAPS[0].labels
|
||||
return list.map(label => {
|
||||
const x = label.col * cellW + cellW / 2
|
||||
const y = HUD_HEIGHT + label.row * cellH + cellH / 2
|
||||
scene.add
|
||||
return scene.add
|
||||
.text(x, y, label.text, {
|
||||
fontFamily: 'VT323, monospace',
|
||||
fontSize: '14px',
|
||||
@@ -93,9 +112,68 @@ export function renderMapLabels(scene: Phaser.Scene): void {
|
||||
})
|
||||
.setOrigin(0.5, 0.5)
|
||||
.setAlpha(0.5)
|
||||
})
|
||||
}
|
||||
|
||||
// ─── BACKGROUND ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* 渲染地图背景图（铺满地图区域，HUD 下方）
|
||||
* 返回创建的 Image 对象，切图时需 destroy
|
||||
*/
|
||||
export function renderMapBackground(
|
||||
scene: Phaser.Scene,
|
||||
bgKey: string
|
||||
): Phaser.GameObjects.Image | null {
|
||||
if (!scene.textures.exists(bgKey)) return null
|
||||
|
||||
const { cellW, cellH } = getCellSize()
|
||||
const mapW = MAP_COLS * cellW
|
||||
const mapH = MAP_ROWS * cellH
|
||||
|
||||
return scene.add
|
||||
.image(0, HUD_HEIGHT, bgKey)
|
||||
.setDisplaySize(mapW, mapH)
|
||||
.setDepth(-1)
|
||||
.setOrigin(0, 0)
|
||||
}
|
||||
|
||||
// ─── DECORATIONS ─────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* 在非路径格子上渲染装饰物图片，返回对象数组（切图时销毁）
|
||||
*/
|
||||
export function renderDecorations(
|
||||
scene: Phaser.Scene,
|
||||
decorations: MapConfig['decorations'],
|
||||
pathTiles: Set<string>
|
||||
): Phaser.GameObjects.Image[] {
|
||||
const { cellW, cellH } = getCellSize()
|
||||
const result: Phaser.GameObjects.Image[] = []
|
||||
|
||||
for (const deco of decorations) {
|
||||
const key = `${deco.col},${deco.row}`
|
||||
// 跳过路径格
|
||||
if (pathTiles.has(key)) continue
|
||||
// 检查贴图是否已加载
|
||||
if (!scene.textures.exists(deco.key)) continue
|
||||
|
||||
const x = deco.col * cellW + cellW / 2
|
||||
const y = HUD_HEIGHT + deco.row * cellH + cellH / 2
|
||||
|
||||
const img = scene.add
|
||||
.image(x, y, deco.key)
|
||||
.setDisplaySize(cellW * 0.7, cellH * 0.7)
|
||||
.setDepth(1)
|
||||
.setAlpha(0.6)
|
||||
result.push(img)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
// ─── HUD ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
/** HUD 进度条参数 */
|
||||
export const BAR_W = 300
|
||||
export const BAR_H = 16
|
||||
@@ -110,39 +188,33 @@ export function renderHUD(scene: Phaser.Scene): {
|
||||
kpiText: Phaser.GameObjects.Text
|
||||
hcText: Phaser.GameObjects.Text
|
||||
} {
|
||||
// HUD 背景
|
||||
const hudBg = scene.add.graphics()
|
||||
hudBg.fillStyle(0x0a1628, 0.92)
|
||||
hudBg.fillRect(0, 0, GAME_WIDTH, HUD_HEIGHT)
|
||||
hudBg.lineStyle(1, 0x1e3a5f, 1)
|
||||
hudBg.strokeRect(0, 0, GAME_WIDTH, HUD_HEIGHT)
|
||||
|
||||
// 左侧标题
|
||||
scene.add.text(16, HUD_HEIGHT / 2, '大厂保卫战', {
|
||||
fontFamily: "'Press Start 2P', monospace",
|
||||
fontSize: '10px',
|
||||
color: '#A78BFA',
|
||||
}).setOrigin(0, 0.5)
|
||||
|
||||
// KPI 标签
|
||||
scene.add.text(BAR_X - 8, HUD_HEIGHT / 2, 'KPI', {
|
||||
fontFamily: "'Press Start 2P', monospace",
|
||||
fontSize: '8px',
|
||||
color: '#E2E8F0',
|
||||
}).setOrigin(1, 0.5)
|
||||
|
||||
// 进度条背景轨道
|
||||
const trackBar = scene.add.graphics()
|
||||
trackBar.fillStyle(0x1a1a2e, 1)
|
||||
trackBar.fillRect(BAR_X, BAR_Y, BAR_W, BAR_H)
|
||||
trackBar.lineStyle(1, 0x7c3aed, 0.6)
|
||||
trackBar.strokeRect(BAR_X, BAR_Y, BAR_W, BAR_H)
|
||||
|
||||
// KPI 进度前景
|
||||
const kpiBar = scene.add.graphics()
|
||||
updateKPIBar(kpiBar, INITIAL_KPI)
|
||||
|
||||
// KPI 百分比文字
|
||||
const kpiText = scene.add.text(
|
||||
BAR_X + BAR_W / 2, HUD_HEIGHT / 2,
|
||||
`${INITIAL_KPI}%`,
|
||||
@@ -153,7 +225,6 @@ export function renderHUD(scene: Phaser.Scene): {
|
||||
}
|
||||
).setOrigin(0.5, 0.5).setDepth(1)
|
||||
|
||||
// 右侧 HC 数值
|
||||
const hcText = scene.add.text(
|
||||
GAME_WIDTH - 16, HUD_HEIGHT / 2,
|
||||
`HC: 200`,
|
||||
|
||||
Reference in New Issue
Block a user