fix(skill): 修复雷云风暴 (Thunder Storm #57) 施法后脚底缺少持续雷云环绕特效 (thunderstormback) 及命中敌人缺失天降闪电打击 (thunderstorm1 / LightningboltBig) 动画缺陷 #433

New Issue

troytt · 2026-09-24T08:08:45Z

troytt commented

2026-09-24 08:08:45 +00:00

1. 缺陷概述 (Issue Summary)

在当前网页端移植版本中，法师（Sorceress）释放 24 级闪电系核心 Buff 技能 雷云风暴 (Thunder Storm, Skill ID: 57) 时，存在两项严重的视觉表现与机制缺失缺陷：

脚底持续雷云特效缺失：施法激活雷云风暴后，角色脚下完全没有任何视觉特效（既无施法瞬态电光，也无持续环绕的旋转雷云圈），玩家无法直观感知雷云风暴是否处于激活状态；
天降闪电打击特效缺失：当雷云风暴按照周期（110~25 帧）索敌并命中 17 subtiles (340px) 范围内的敌人时，目标身上仅生成微弱的地面小光斑（light_cast_2），完全缺失了原版暗黑2标志性的自天际垂直轰然劈下的巨大闪电落雷动画 (thunderstorm1 / LightningboltBig) 及落雷音效。

2. Diablo II v1.13c Ground Truth 权威数据与规范依据

严格遵循暗黑破坏神 II v1.13c 反编译逻辑与官方 MPQ 数据表（Skills.txt, Missiles.txt, Overlay.txt, States.txt）：

2.1 `Skills.txt` (Row 57: Thunder Storm)

Skill ID: 57 (Thunder Storm), charclass: sor
aurastate: thunderstorm（激活状态标识）
stsound: sorceress_thunder_cast（施法音效）
castoverlay: light_cast_2
prgoverlay: lightning
srvmissilea / cltmissilea: thunderstorm1（权威落雷投射物定义）
periodic: 1, perdelay: (100-dm56) * par4/100 + par3（周期性索敌打击节奏）
Param1: 800 (基础持续 32 秒), Param2: 200 (+8 秒/级)
Param3: 25 (最小打击间隔 25 帧 = 1.0 秒), Param4: 100, Param7: 17 (索敌半径 17 格 = 340px)

2.2 `Overlay.txt` (Row 98 ~ 100)

Row 100 thunderstormcast: Filename ThunderstormCast, 10 frames, AnimRate 16, Trans 3, PreDraw 0（施法瞬态脚下雷光迸发）
Row 99 thunderstormback: Filename ThunderstormCast_operate, 19 frames, AnimRate 16, Trans 3, PreDraw 1（持续状态地表预绘制雷云光圈）
- 资源规格：宽度 81px，高度 60px，Offset left: -41, top: -21，完美环绕对齐角色足下地表平面。

2.3 `Missiles.txt` (Row 166: thunderstorm1)

Missile ID: 166 (thunderstorm1)
CelFile: LightningboltBig
AnimLen: 8 frames, AnimSpeed: 16
Box & Offsets: 宽度 36px，高度 113px，Offset left: -18, top: -106
- 视觉特征：顶部从 top: -106px 的空中天际 纵向劈贯而下，直接灌击在目标怪物足部坐标上，呈现震撼的天罚落雷！
Sound: sorceress_thunder_bolt（权威天降惊雷打击音效）

2.4 本地静态资源已就绪状态

项目中已完整打包该技能所需的全部 DCC/CEL 元数据及纹理，但均未被运行时消费：

public/overlays/thunderstormback.json & thunderstormback.png
public/overlays/thunderstormcast.json & thunderstormcast.png
public/missiles/thunderstorm1.json & thunderstorm1.png
public/missiles/lightningboltbig.json & lightningboltbig.png

3. 代码根因深度剖析 (Root Cause Analysis)

3.1 施法分支缺少脚底光环生成

在 src/scene/act-scene.ts 约第 1752-1770 行：

if (skillId === 57) {
  // Thunder Storm (Skill 57): activate thunderstorm buff on player
  const slvl = 1
  const duration = calculateThunderStormDuration(slvl)
  const interval = calculateThunderStormInterval(slvl)
  const dmgRange = calculateSkillDamage(57, slvl)
  const tsDmg = Math.round((dmgRange.min + dmgRange.max) / 2)

  player.thunderstormTicks = duration
  player.thunderstormInterval = interval
  player.thunderstormNextStrike = interval
  player.thunderstormDamage = tsDmg
  player.thunderstormSlvl = slvl

  player.cooldown = 0
  engine.metrics.casts += 1
  status.textContent = '雷云风暴已激活'
  return true
}

对比同文件中的冰甲与能量护盾：

engine.spawnOverlay('chillingarmor', { x: player.x, y: player.y }, 'player', { loop: true })
engine.spawnOverlay('energyshield', { x: player.x, y: player.y }, 'player', { loop: true })

雷云风暴此处彻底遗漏了 engine.spawnOverlay 调用，未生成 thunderstormcast（施法瞬态）与 thunderstormback（持续循环）。

3.2 周期性索敌命中仅使用地面小光斑，缺失天降落雷动画

在 src/game/engine.ts 约第 602-628 行：

if (nearestMonster) {
  const dmg = player.thunderstormDamage ?? 50
  damageMonster(this.world, nearestMonster.index, dmg)
  this.spawnOverlay('light_cast_2', { x: nearestMonster.x, y: nearestMonster.y }, `monster-${nearestMonster.index}`)
  this.world.events.push({
    kind: 'monsterHit',
    monsterIndex: nearestMonster.index,
    damage: dmg,
    x: nearestMonster.x,
    y: nearestMonster.y,
  })
  if (nearestMonster.hp <= 0) {
    killMonster(this.world, nearestMonster.index)
  }
}

引擎仅调用了 spawnOverlay('light_cast_2', ...)，light_cast_2 仅为一个 5 帧的小微弱火花，误将 Skills.txt 的 castoverlay 当作打击动画。
权威投射物 thunderstorm1 (LightningboltBig) 是一个自顶向下贯穿 113px 的天降雷柱，此处完全未实例化投射物或落雷打击特效。

3.3 缺少 Buff 到期清理逻辑

在 src/game/engine.ts 的 Tick 循环中：

if (player.thunderstormTicks && player.thunderstormTicks > 0) {
  player.thunderstormTicks -= 1
  ...
}

当 player.thunderstormTicks <= 0 时，缺乏像 coldArmorTicks 一样对绑定在 player 身上的 thunderstormback 进行 ov.expired = true 清理的收尾逻辑。

4. 修复方案设计 (Proposed Architecture & Implementation Plan)

4.1 施法阶段：激活脚底雷云与施法光斑

在 src/scene/act-scene.ts 释放 Skill 57 时：

产生施法瞬态 Overlay：engine.spawnOverlay('thunderstormcast', { x: player.x, y: player.y }, 'player')
挂载持续循环 Overlay：engine.spawnOverlay('thunderstormback', { x: player.x, y: player.y }, 'player', { loop: true })
- 依赖 Issue #432 中的非光环 Overlay 生命周期保护，防止被后续火弹/传送等施法清理。

4.2 打击阶段：生成 `thunderstorm1` 天降落雷动画

在 src/game/engine.ts 索敌命中后：

产生天降落雷投射物/动画实体：
- 调度 missileType: 'thunderstorm1'（对应 LightningboltBig），坐标锚定在 { x: nearestMonster.x, y: nearestMonster.y }，播放 8 帧垂直劈击动画。
保持受击附加电火花 light_cast_2 或 lightning，并推送受击事件。
播放 sorceress_thunder_bolt 打击音效。

4.3 状态管理与生命周期回收

在 src/game/engine.ts 中：
当 player.thunderstormTicks <= 0 时，扫描清理所有 ov.overlayName === 'thunderstormback' && ov.casterId === 'player' 的特效，确保特效与 Buff 状态完全同步。

4.4 测试验证 (Verification Plan)

单元测试回归：
- 更新 tests/skills/sor/skill-057-thunder-storm.test.ts，验证施法时存在 thunderstormback Overlay；
- 更新 tests/challenger-m4-thunder-storm-energy-shield-mastery.test.ts，断言索敌命中时生成 thunderstorm1 (LightningboltBig) 动画实体。
端到端运行验证：
- 施放雷云风暴，检查人物脚底有连续旋转环绕的地表雷云圈；
- 走动并施放其他技能，验证雷云圈不消失；
- 靠近怪物，验证怪物头顶降下粗大闪电劈击动画，打击感与音画完全对齐原版 1.13c。

### 1. 缺陷概述 (Issue Summary) 在当前网页端移植版本中，法师（Sorceress）释放 24 级闪电系核心 Buff 技能 **雷云风暴 (Thunder Storm, Skill ID: 57)** 时，存在两项严重的视觉表现与机制缺失缺陷： 1. **脚底持续雷云特效缺失**：施法激活雷云风暴后，角色脚下完全没有任何视觉特效（既无施法瞬态电光，也无持续环绕的旋转雷云圈），玩家无法直观感知雷云风暴是否处于激活状态； 2. **天降闪电打击特效缺失**：当雷云风暴按照周期（110~25 帧）索敌并命中 17 subtiles (340px) 范围内的敌人时，目标身上仅生成微弱的地面小光斑（`light_cast_2`），**完全缺失了原版暗黑2标志性的自天际垂直轰然劈下的巨大闪电落雷动画 (`thunderstorm1` / `LightningboltBig`)** 及落雷音效。 --- ### 2. Diablo II v1.13c Ground Truth 权威数据与规范依据严格遵循暗黑破坏神 II v1.13c 反编译逻辑与官方 MPQ 数据表（`Skills.txt`, `Missiles.txt`, `Overlay.txt`, `States.txt`）： #### 2.1 `Skills.txt` (Row 57: Thunder Storm) - **Skill ID**: 57 (`Thunder Storm`), **charclass**: `sor` - **aurastate**: `thunderstorm`（激活状态标识） - **stsound**: `sorceress_thunder_cast`（施法音效） - **castoverlay**: `light_cast_2` - **prgoverlay**: `lightning` - **srvmissilea / cltmissilea**: `thunderstorm1`（**权威落雷投射物定义**） - **periodic**: `1`, **perdelay**: `(100-dm56) * par4/100 + par3`（周期性索敌打击节奏） - **Param1**: `800` (基础持续 32 秒), **Param2**: `200` (+8 秒/级) - **Param3**: `25` (最小打击间隔 25 帧 = 1.0 秒), **Param4**: `100`, **Param7**: `17` (索敌半径 17 格 = 340px) #### 2.2 `Overlay.txt` (Row 98 ~ 100) - **Row 100 `thunderstormcast`**: Filename `ThunderstormCast`, 10 frames, AnimRate 16, Trans 3, PreDraw 0（施法瞬态脚下雷光迸发） - **Row 99 `thunderstormback`**: Filename `ThunderstormCast_operate`, 19 frames, AnimRate 16, Trans 3, **PreDraw 1**（持续状态地表预绘制雷云光圈） - 资源规格：宽度 81px，高度 60px，Offset `left: -41, top: -21`，完美环绕对齐角色足下地表平面。 #### 2.3 `Missiles.txt` (Row 166: thunderstorm1) - **Missile ID**: 166 (`thunderstorm1`) - **CelFile**: `LightningboltBig` - **AnimLen**: 8 frames, **AnimSpeed**: 16 - **Box & Offsets**: 宽度 36px，高度 113px，Offset `left: -18, top: -106` - **视觉特征**：顶部从 **`top: -106px` 的空中天际** 纵向劈贯而下，直接灌击在目标怪物足部坐标上，呈现震撼的天罚落雷！ - **Sound**: `sorceress_thunder_bolt`（权威天降惊雷打击音效） #### 2.4 本地静态资源已就绪状态项目中已完整打包该技能所需的全部 DCC/CEL 元数据及纹理，但均未被运行时消费： - `public/overlays/thunderstormback.json` & `thunderstormback.png` - `public/overlays/thunderstormcast.json` & `thunderstormcast.png` - `public/missiles/thunderstorm1.json` & `thunderstorm1.png` - `public/missiles/lightningboltbig.json` & `lightningboltbig.png` --- ### 3. 代码根因深度剖析 (Root Cause Analysis) #### 3.1 施法分支缺少脚底光环生成在 [`src/scene/act-scene.ts`](file:///usr/local/google/home/taodao/diablo2-web/src/scene/act-scene.ts) 约第 1752-1770 行： ```typescript if (skillId === 57) { // Thunder Storm (Skill 57): activate thunderstorm buff on player const slvl = 1 const duration = calculateThunderStormDuration(slvl) const interval = calculateThunderStormInterval(slvl) const dmgRange = calculateSkillDamage(57, slvl) const tsDmg = Math.round((dmgRange.min + dmgRange.max) / 2) player.thunderstormTicks = duration player.thunderstormInterval = interval player.thunderstormNextStrike = interval player.thunderstormDamage = tsDmg player.thunderstormSlvl = slvl player.cooldown = 0 engine.metrics.casts += 1 status.textContent = '雷云风暴已激活' return true } ``` 对比同文件中的冰甲与能量护盾： ```typescript engine.spawnOverlay('chillingarmor', { x: player.x, y: player.y }, 'player', { loop: true }) engine.spawnOverlay('energyshield', { x: player.x, y: player.y }, 'player', { loop: true }) ``` 雷云风暴此处**彻底遗漏了** `engine.spawnOverlay` 调用，未生成 `thunderstormcast`（施法瞬态）与 `thunderstormback`（持续循环）。 #### 3.2 周期性索敌命中仅使用地面小光斑，缺失天降落雷动画在 [`src/game/engine.ts`](file:///usr/local/google/home/taodao/diablo2-web/src/game/engine.ts) 约第 602-628 行： ```typescript if (nearestMonster) { const dmg = player.thunderstormDamage ?? 50 damageMonster(this.world, nearestMonster.index, dmg) this.spawnOverlay('light_cast_2', { x: nearestMonster.x, y: nearestMonster.y }, `monster-${nearestMonster.index}`) this.world.events.push({ kind: 'monsterHit', monsterIndex: nearestMonster.index, damage: dmg, x: nearestMonster.x, y: nearestMonster.y, }) if (nearestMonster.hp <= 0) { killMonster(this.world, nearestMonster.index) } } ``` - 引擎仅调用了 `spawnOverlay('light_cast_2', ...)`，`light_cast_2` 仅为一个 5 帧的小微弱火花，误将 `Skills.txt` 的 `castoverlay` 当作打击动画。 - 权威投射物 `thunderstorm1` (`LightningboltBig`) 是一个自顶向下贯穿 113px 的天降雷柱，此处完全未实例化投射物或落雷打击特效。 #### 3.3 缺少 Buff 到期清理逻辑在 [`src/game/engine.ts`](file:///usr/local/google/home/taodao/diablo2-web/src/game/engine.ts) 的 Tick 循环中： ```typescript if (player.thunderstormTicks && player.thunderstormTicks > 0) { player.thunderstormTicks -= 1 ... } ``` 当 `player.thunderstormTicks <= 0` 时，缺乏像 `coldArmorTicks` 一样对绑定在 player 身上的 `thunderstormback` 进行 `ov.expired = true` 清理的收尾逻辑。 --- ### 4. 修复方案设计 (Proposed Architecture & Implementation Plan) #### 4.1 施法阶段：激活脚底雷云与施法光斑在 `src/scene/act-scene.ts` 释放 Skill 57 时： 1. 产生施法瞬态 Overlay：`engine.spawnOverlay('thunderstormcast', { x: player.x, y: player.y }, 'player')` 2. 挂载持续循环 Overlay：`engine.spawnOverlay('thunderstormback', { x: player.x, y: player.y }, 'player', { loop: true })` - 依赖 Issue #432 中的非光环 Overlay 生命周期保护，防止被后续火弹/传送等施法清理。 #### 4.2 打击阶段：生成 `thunderstorm1` 天降落雷动画在 `src/game/engine.ts` 索敌命中后： 1. 产生天降落雷投射物/动画实体： - 调度 `missileType: 'thunderstorm1'`（对应 `LightningboltBig`），坐标锚定在 `{ x: nearestMonster.x, y: nearestMonster.y }`，播放 8 帧垂直劈击动画。 2. 保持受击附加电火花 `light_cast_2` 或 `lightning`，并推送受击事件。 3. 播放 `sorceress_thunder_bolt` 打击音效。 #### 4.3 状态管理与生命周期回收在 `src/game/engine.ts` 中：当 `player.thunderstormTicks <= 0` 时，扫描清理所有 `ov.overlayName === 'thunderstormback' && ov.casterId === 'player'` 的特效，确保特效与 Buff 状态完全同步。 #### 4.4 测试验证 (Verification Plan) 1. **单元测试回归**： - 更新 `tests/skills/sor/skill-057-thunder-storm.test.ts`，验证施法时存在 `thunderstormback` Overlay； - 更新 `tests/challenger-m4-thunder-storm-energy-shield-mastery.test.ts`，断言索敌命中时生成 `thunderstorm1` (`LightningboltBig`) 动画实体。 2. **端到端运行验证**： - 施放雷云风暴，检查人物脚底有连续旋转环绕的地表雷云圈； - 走动并施放其他技能，验证雷云圈不消失； - 靠近怪物，验证怪物头顶降下粗大闪电劈击动画，打击感与音画完全对齐原版 1.13c。

troytt referenced this issue from a commit

2026-09-24 14:29:51 +00:00

fix(skill): implement Thunder Storm ambient aura and sky strike (Fixes #433)

troytt closed this issue

2026-09-24 14:29:51 +00:00

troytt commented

2026-09-24 14:30:10 +00:00

Verification & Resolution Summary for Issue #433

Commit: 967a545 (fix(skill): implement Thunder Storm ambient aura and sky strike (Fixes #433))
Remote: Pushed to origin/main (branch main).
State: Closed.

1. Implementation Details

Missile Collision Bypass (src/game/skills.ts):
- Added thunderstorm1 and thunderstorm to isHarmlessEmitter in tickProjectiles.
- Bypasses tick-1 monster collision destruction, allowing the vertical lightning bolt DCC animation (LightningboltBig, 8 frames) to play to completion.
Periodic Sky-Strike Spawning & Cleanup (src/game/engine.ts):
- In GameEngine.tick, when a monster is targeted by Thunder Storm periodic strike:
  - Retains damageMonster(this.world, nearestMonster.index, dmg).
  - Retains spawnOverlay('light_cast_2', ...).
  - Spawns vertical sky-strike lightning projectile (thunderstorm1) at monster coordinates (ttl: 8, pierce: true, damage: 0).
  - Emits monsterHit and missileHit events.
- Cleans up thunderstormback state overlay when !player.thunderstormTicks || player.thunderstormTicks <= 0.
Dynamic Skill Level & Synergies (src/scene/act-scene.ts):
- Resolved dynamic slvl from hudManager (fallback 1) instead of static slvl = 1.
- Resolved Lightning Mastery (Skill 63) level and integrated multiplicative damage bonus.
- Stored player.thunderstormDamageRange.
Unit Test Suite (tests/skills/sor/issue-433-thunder-storm-visuals.test.ts):
- 15 unit tests covering canonical asset metadata, ambient feet aura lifecycle and movement tracking, periodic strike targeting and 8-frame collision bypass, dynamic duration/cadence/mastery scaling.

2. Verification Results

npm run typecheck (tsc --noEmit): Passed (0 errors).
Vitest suites:
- tests/skills/sor/issue-433-thunder-storm-visuals.test.ts (15/15 passed)
- tests/skills/sor/skill-057-thunder-storm.test.ts (15/15 passed)
- tests/challenger-m4-thunder-storm-energy-shield-mastery.test.ts (15/15 passed)
- tests/challenger-m4-thunderstorm-energyshield-mastery-stress.test.ts (20/20 passed)
- tests/skills/sor/issue-432-buff-visual-persistence.test.ts (9/9 passed)
Total: 74/74 tests passed (100%).

### Verification & Resolution Summary for Issue #433 - **Commit**: `967a545` (`fix(skill): implement Thunder Storm ambient aura and sky strike (Fixes #433)`) - **Remote**: Pushed to `origin/main` (branch `main`). - **State**: Closed. #### 1. Implementation Details 1. **Missile Collision Bypass (`src/game/skills.ts`)**: - Added `thunderstorm1` and `thunderstorm` to `isHarmlessEmitter` in `tickProjectiles`. - Bypasses tick-1 monster collision destruction, allowing the vertical lightning bolt DCC animation (`LightningboltBig`, 8 frames) to play to completion. 2. **Periodic Sky-Strike Spawning & Cleanup (`src/game/engine.ts`)**: - In `GameEngine.tick`, when a monster is targeted by Thunder Storm periodic strike: - Retains `damageMonster(this.world, nearestMonster.index, dmg)`. - Retains `spawnOverlay('light_cast_2', ...)`. - Spawns vertical sky-strike lightning projectile (`thunderstorm1`) at monster coordinates (`ttl: 8`, `pierce: true`, `damage: 0`). - Emits `monsterHit` and `missileHit` events. - Cleans up `thunderstormback` state overlay when `!player.thunderstormTicks || player.thunderstormTicks <= 0`. 3. **Dynamic Skill Level & Synergies (`src/scene/act-scene.ts`)**: - Resolved dynamic `slvl` from `hudManager` (fallback 1) instead of static `slvl = 1`. - Resolved Lightning Mastery (`Skill 63`) level and integrated multiplicative damage bonus. - Stored `player.thunderstormDamageRange`. 4. **Unit Test Suite (`tests/skills/sor/issue-433-thunder-storm-visuals.test.ts`)**: - 15 unit tests covering canonical asset metadata, ambient feet aura lifecycle and movement tracking, periodic strike targeting and 8-frame collision bypass, dynamic duration/cadence/mastery scaling. #### 2. Verification Results - `npm run typecheck` (`tsc --noEmit`): Passed (0 errors). - Vitest suites: - `tests/skills/sor/issue-433-thunder-storm-visuals.test.ts` (15/15 passed) - `tests/skills/sor/skill-057-thunder-storm.test.ts` (15/15 passed) - `tests/challenger-m4-thunder-storm-energy-shield-mastery.test.ts` (15/15 passed) - `tests/challenger-m4-thunderstorm-energyshield-mastery-stress.test.ts` (20/20 passed) - `tests/skills/sor/issue-432-buff-visual-persistence.test.ts` (9/9 passed) - Total: 74/74 tests passed (100%).

Sign in to join this conversation.

No Label

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: troytt/diablo2-web#433

fix(skill): 修复雷云风暴 (Thunder Storm #57) 施法后脚底缺少持续雷云环绕特效 (thunderstormback) 及命中敌人缺失天降闪电打击 (thunderstorm1 / LightningboltBig) 动画缺陷 #433