扫描线与网格背景的视觉层次：从 CRT 到赛博朋克

> 扫描线和网格不是"装饰"，它们是"空间感"的来源。

## 视觉层次：为什么需要"背景纹理"

在 1280×720 的画布上，如果背景是纯黑（`#0A0A0F`），画面会显得"空"——玩家会觉得"这个游戏很简单"。扫描线和网格的作用是**填充空间**，让画面有"深度"。

NEON RUNNER 2077 里的背景纹理有三层：

1. **网格**（MenuScene + GameScene）— 紫色细线，60-80px 间距

2. **扫描线**（MenuScene）— 黑色横线，每 3px 一条

3. **边框**（GameScene）— 青色矩形框，距离边缘 40-130px

## 网格：空间感的来源

`MenuScene` 里的网格：

```ts

private drawBackgroundGrid(width: number, height: number): void {

  const g = this.add.graphics().setDepth(0).setAlpha(0.25);

  g.lineStyle(1, COLORS.NEON_PURPLE, 0.3);

  const step = 60;

  for (let x = 0; x <= width; x += step) {

    g.beginPath();

    g.moveTo(x, 0);

    g.lineTo(x, height);

    g.strokePath();

  }

  for (let y = 0; y <= height; y += step) {

    g.beginPath();

    g.moveTo(0, y);

    g.lineTo(width, y);

    g.strokePath();

  }

}

```

60px 间距的紫色细线，透明度 0.3。这个网格在 MenuScene 里作为"背景"，在 GameScene 里也有一个类似的（80px 间距，透明度 0.18）。

### 为什么 MenuScene 的网格比 GameScene 的更明显

MenuScene 的网格透明度 0.3，GameScene 的网格透明度 0.18。这个差异是有意为之的：

- **MenuScene**：玩家在"看"菜单，网格是"氛围"的一部分

- **GameScene**：玩家在"战斗"，网格会"抢戏"，所以更淡

## 扫描线：CRT 的数字回声

`MenuScene` 里的扫描线：

```ts

private drawScanLines(width: number, height: number): void {

  const g = this.add.graphics().setDepth(20).setAlpha(0.08);

  g.fillStyle(0x000000, 1);

  for (let y = 0; y < height; y += 3) {

    g.fillRect(0, y, width, 1);

  }

}

```

每 3 像素画一条 1 像素高的黑线，透明度 0.08。这个效果模拟的是 CRT 显示器的扫描线——老式电视的电子束从左到右、从上到下扫过屏幕，留下一条条暗线。

### 为什么扫描线只在 MenuScene 里

GameScene 里没有扫描线。这个设计是有意为之的：

- **MenuScene**：玩家在"看"菜单，扫描线增加"复古感"

- **GameScene**：玩家在"战斗"，扫描线会干扰视线

## 边框：竞技场的边界

`GameScene` 里的边框：

```ts

g.lineStyle(2, COLORS.NEON_CYAN, 0.5);

g.strokeRect(40, 90, width - 80, height - 130);

```

青色矩形框，距离边缘 40px（左右）和 90px（上）/ 130px（下）。这个边框定义了"竞技场"的边界——玩家和敌人在这个框里活动。

### 为什么上下边距比左右大

上下边距（90px / 130px）比左右边距（40px）大，是因为 HUD 占据了屏幕顶部和底部：

- 顶部：HP + EN（28px + 56px = 84px）

- 底部：HUD 没有占用，但留出空间给未来功能

所以竞技场的顶部从 90px 开始，底部到 590px（720 - 130）。

## 视觉层次：谁在谁上面

NEON RUNNER 2077 里的视觉层次（从下到上）：

```

1. 背景网格（setDepth 0）

2. 扫描线（setDepth 20）

3. 全息面板（setDepth 5）

4. 菜单按钮（setDepth 6-7）

5. 故障标题（setDepth 默认）

6. HUD（setDepth 100-101）

```

`setDepth()` 是 Phaser 里控制渲染顺序的 API。数值越大，越靠上。HUD 的 `setDepth(100)` 确保它永远在最上面——玩家在任何场景里都能看到 HUD。

## 下一章预告

扫描线和网格讲完了，但 NEON RUNNER 2077 的视觉风格里还有一个关键元素——**相机特效**。那些淡入淡出、闪光、抖动的效果是怎么做出来的？下一章我会拆解这个设计。

> 背景设计的核心原则：**背景要淡，前景要亮**。玩家在战斗中不会去欣赏背景，但背景的"存在感"决定了整个场景的氛围。