fix(game): 修复地图层级混乱问题,格子改为半透明叠加让背景图正确显示

This commit is contained in:
Cloud Bot
2026-03-24 07:37:12 +00:00
parent 5318ecbc3f
commit 4a68fee5f2

View File

@@ -64,28 +64,37 @@ export function drawAllTiles(
const { cellW, cellH } = getCellSize() const { cellW, cellH } = getCellSize()
const tiles = pathTiles ?? PATH_TILES const tiles = pathTiles ?? PATH_TILES
const pathColor = mapConfig?.pathColor ?? 0x3d2b1f const pathColor = mapConfig?.pathColor ?? 0x3d2b1f
const buildColor = mapConfig?.buildColor ?? 0x1e3a5f const hoverColor = 0x7c3aed
const hoverColor = 0x2d5a8e
const borderColor = 0x0a1628
g.clear() g.clear()
for (let row = 0; row < MAP_ROWS; row++) { for (let row = 0; row < MAP_ROWS; row++) {
for (let col = 0; col < MAP_COLS; col++) { for (let col = 0; col < MAP_COLS; col++) {
const isPath = tiles.has(`${col},${row}`) const key = `${col},${row}`
const isHovered = const isPath = tiles.has(key)
!isPath && hovered !== null && const isHovered = !isPath && hovered?.col === col && hovered?.row === row
hovered.col === col && hovered.row === row
const fillColor = isPath ? pathColor : isHovered ? hoverColor : buildColor
const x = col * cellW const x = col * cellW
const y = HUD_HEIGHT + row * cellH const y = HUD_HEIGHT + row * cellH
g.fillStyle(fillColor, 1) if (isPath) {
g.fillRect(x + 1, y + 1, cellW - 2, cellH - 2) // 路径格:半透明深色叠加,让背景隐约可见
g.lineStyle(1, borderColor, 0.6) g.fillStyle(pathColor, 0.78)
g.fillRect(x, y, cellW, cellH)
// 路径边框:稍亮一点
g.lineStyle(1, 0x6b4226, 0.9)
g.strokeRect(x, y, cellW, cellH) g.strokeRect(x, y, cellW, cellH)
} else if (isHovered) {
// 悬停格:紫色高亮半透明
g.fillStyle(hoverColor, 0.35)
g.fillRect(x, y, cellW, cellH)
g.lineStyle(2, 0xa78bfa, 0.9)
g.strokeRect(x, y, cellW, cellH)
} else {
// 可建格:只画细边框,背景图完全透出
g.lineStyle(1, 0x334155, 0.35)
g.strokeRect(x, y, cellW, cellH)
}
} }
} }
} }
@@ -93,7 +102,7 @@ export function drawAllTiles(
// ─── MAP LABELS ─────────────────────────────────────────────────────────────── // ─── MAP LABELS ───────────────────────────────────────────────────────────────
/** /**
* 渲染地图装饰性标签,返回创建的文字对象(便于切图时销毁) * 渲染地图区域标签,返回创建的文字对象(便于切图时销毁)
*/ */
export function renderMapLabels( export function renderMapLabels(
scene: Phaser.Scene, scene: Phaser.Scene,
@@ -107,11 +116,14 @@ export function renderMapLabels(
return scene.add return scene.add
.text(x, y, label.text, { .text(x, y, label.text, {
fontFamily: 'VT323, monospace', fontFamily: 'VT323, monospace',
fontSize: '14px', fontSize: '13px',
color: '#A78BFA', color: '#e2e8f0',
backgroundColor: 'rgba(0,0,0,0.55)',
padding: { x: 5, y: 2 },
}) })
.setOrigin(0.5, 0.5) .setOrigin(0.5, 0.5)
.setAlpha(0.5) .setDepth(2)
.setAlpha(0.85)
}) })
} }
@@ -141,35 +153,18 @@ export function renderMapBackground(
// ─── DECORATIONS ───────────────────────────────────────────────────────────── // ─── DECORATIONS ─────────────────────────────────────────────────────────────
/** /**
* 在非路径格子上渲染装饰物图片,返回对象数组(切图时销毁 * 渲染地图区域标签文字(替代图片装饰物,不破坏背景图视觉
* 返回对象数组(切图时销毁)
*/ */
export function renderDecorations( export function renderDecorations(
scene: Phaser.Scene, scene: Phaser.Scene,
decorations: MapConfig['decorations'], decorations: MapConfig['decorations'],
pathTiles: Set<string> pathTiles: Set<string>
): Phaser.GameObjects.Image[] { ): Phaser.GameObjects.Image[] {
const { cellW, cellH } = getCellSize() // 装饰物改为纯文字标注,不再叠加图片,直接返回空数组
const result: Phaser.GameObjects.Image[] = [] // 视觉信息已由地图标签renderMapLabels和背景图承载
void scene; void decorations; void pathTiles
for (const deco of decorations) { return []
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 ──────────────────────────────────────────────────────────────────────