refactor(game): 移除已弃用的事件常量
- 删除 UpdateHero 和 UpdateFightHero 事件 - 移除 MISSION_UPDATE 事件常量 - 优化游戏事件枚举定义
This commit is contained in:
368
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/技能特效图层.md
Normal file
368
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/技能特效图层.md
Normal file
@@ -0,0 +1,368 @@
|
||||
# 技能特效图层
|
||||
|
||||
<cite>
|
||||
**本文档中引用的文件**
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/layer/SkillLayer.ts)
|
||||
- [SkillViewCom.ts](file://assets/script/game/skill/SkillViewCom.ts)
|
||||
- [AtkConCom.ts](file://assets/script/game/skill/AtkConCom.ts)
|
||||
- [SkillEnt.ts](file://assets/script/game/skill/SkillEnt.ts)
|
||||
- [SkillSet.ts](file://assets/script/game/common/config/SkillSet.ts)
|
||||
- [SkillConComp.ts](file://assets/script/game/hero/SkillConComp.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts)
|
||||
</cite>
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
2. [项目结构](#项目结构)
|
||||
3. [核心组件](#核心组件)
|
||||
4. [架构概览](#架构概览)
|
||||
5. [详细组件分析](#详细组件分析)
|
||||
6. [依赖关系分析](#依赖关系分析)
|
||||
7. [性能考虑](#性能考虑)
|
||||
8. [故障排除指南](#故障排除指南)
|
||||
9. [结论](#结论)
|
||||
|
||||
## 简介
|
||||
|
||||
SkillLayer是《英雄传说》项目中负责技能释放特效渲染的核心独立渲染层级。它作为技能动画与地图背景之间的隔离屏障,确保技能特效能够在正确的视觉层级中呈现,同时保持与施法者位置和朝向的精确同步。该系统采用ECS架构设计,支持多种特效类型(粒子系统、Spine动画)的集成,并提供了完整的生命周期管理机制。
|
||||
|
||||
## 项目结构
|
||||
|
||||
SkillLayer系统在项目中的组织结构体现了清晰的职责分离和模块化设计:
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "地图视图层"
|
||||
MapView[MapViewScene]
|
||||
MapLayer[MapLayer]
|
||||
EntityLayer[EntityLayer]
|
||||
SkillLayer[SkillLayer]
|
||||
end
|
||||
subgraph "技能系统"
|
||||
SkillEnt[SkillEnt]
|
||||
SkillViewCom[SkillViewCom]
|
||||
AtkConCom[AtkConCom]
|
||||
SkillConComp[SkillConComp]
|
||||
end
|
||||
subgraph "配置系统"
|
||||
SkillSet[SkillSet]
|
||||
HeroAttrs[HeroAttrs]
|
||||
end
|
||||
MapView --> MapLayer
|
||||
MapView --> EntityLayer
|
||||
MapView --> SkillLayer
|
||||
SkillEnt --> SkillViewCom
|
||||
SkillViewCom --> AtkConCom
|
||||
SkillConComp --> SkillEnt
|
||||
SkillSet --> SkillViewCom
|
||||
SkillSet --> AtkConCom
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/layer/SkillLayer.ts#L1-L48)
|
||||
- [SkillEnt.ts](file://assets/script/game/skill/SkillEnt.ts#L1-L78)
|
||||
|
||||
**章节来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/layer/SkillLayer.ts#L1-L48)
|
||||
|
||||
## 核心组件
|
||||
|
||||
SkillLayer系统由以下核心组件构成:
|
||||
|
||||
### SkillLayer - 独立渲染层级
|
||||
作为技能特效的专用渲染容器,SkillLayer实现了以下关键功能:
|
||||
- **层级隔离**:确保技能特效不会干扰地图背景和其他UI元素
|
||||
- **深度排序**:支持基于Z轴位置的自动排序机制
|
||||
- **生命周期管理**:提供完整的创建、播放和销毁流程
|
||||
|
||||
### SkillViewCom - 视图层控制器
|
||||
负责技能特效的视觉表现和行为控制:
|
||||
- **位置同步**:与施法者位置保持实时同步
|
||||
- **动画播放**:协调各种特效动画的播放时机
|
||||
- **生命周期控制**:管理技能特效的完整生命周期
|
||||
|
||||
### AtkConCom - 攻击逻辑组件
|
||||
处理技能的物理效果和碰撞检测:
|
||||
- **伤害计算**:基于技能配置进行精确的伤害计算
|
||||
- **碰撞检测**:实现高效的2D碰撞检测机制
|
||||
- **效果触发**:支持多种技能效果类型的触发
|
||||
|
||||
**章节来源**
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/layer/SkillLayer.ts#L18-L48)
|
||||
- [SkillViewCom.ts](file://assets/script/game/skill/SkillViewCom.ts#L10-L156)
|
||||
- [AtkConCom.ts](file://assets/script/game/skill/AtkConCom.ts#L14-L236)
|
||||
|
||||
## 架构概览
|
||||
|
||||
SkillLayer系统采用了分层架构设计,实现了视图层与业务逻辑的完全分离:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Player as 施法者
|
||||
participant SkillCon as 技能控制器
|
||||
participant SkillEnt as 技能实体
|
||||
participant SkillLayer as 技能图层
|
||||
participant AtkCon as 攻击组件
|
||||
participant Effect as 特效系统
|
||||
Player->>SkillCon : 发起技能请求
|
||||
SkillCon->>SkillEnt : 创建技能实体
|
||||
SkillEnt->>SkillLayer : 加载特效预制体
|
||||
SkillLayer->>Effect : 实例化特效节点
|
||||
Effect->>AtkCon : 初始化攻击组件
|
||||
AtkCon->>Effect : 播放特效动画
|
||||
Effect->>AtkCon : 触发碰撞检测
|
||||
AtkCon->>Effect : 销毁特效节点
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [SkillConComp.ts](file://assets/script/game/hero/SkillConComp.ts#L50-L90)
|
||||
- [SkillEnt.ts](file://assets/script/game/skill/SkillEnt.ts#L15-L77)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/layer/SkillLayer.ts#L25-L35)
|
||||
|
||||
## 详细组件分析
|
||||
|
||||
### SkillLayer节点组织结构
|
||||
|
||||
SkillLayer作为独立的渲染层级,其节点组织结构体现了高效的空间管理和渲染优化:
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class SkillLayer {
|
||||
-timer : Timer
|
||||
-light : Prefab
|
||||
+onLoad() : void
|
||||
+doSkill() : void
|
||||
+update(dt : number) : void
|
||||
+clear() : void
|
||||
}
|
||||
class EntityLayer {
|
||||
-timer : Timer
|
||||
+update(dt : number) : void
|
||||
+clear() : void
|
||||
}
|
||||
class MapViewScene {
|
||||
+camera : Camera
|
||||
+layer : Node
|
||||
+mapLayer : MapLayer
|
||||
+entityLayer : EntityLayer
|
||||
+SkillLayer : SkillLayer
|
||||
+isFollowPlayer : boolean
|
||||
}
|
||||
MapViewScene --> SkillLayer
|
||||
MapViewScene --> EntityLayer
|
||||
SkillLayer --|> Component
|
||||
EntityLayer --|> Component
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/layer/SkillLayer.ts#L18-L48)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L18-L37)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L15-L35)
|
||||
|
||||
SkillLayer的节点管理遵循以下原则:
|
||||
- **惰性加载**:仅在需要时创建特效节点
|
||||
- **批量清理**:定期清理无效的特效节点
|
||||
- **深度排序**:基于节点的Z轴位置进行自动排序
|
||||
|
||||
**章节来源**
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/layer/SkillLayer.ts#L1-L48)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L37)
|
||||
|
||||
### 技能生命周期管理
|
||||
|
||||
SkillLayer系统实现了完整的技能生命周期管理,确保特效的正确创建、播放和销毁:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([技能释放请求]) --> LoadPrefab[加载特效预制体]
|
||||
LoadPrefab --> InstantiateNode[实例化特效节点]
|
||||
InstantiateNode --> InitComponents[初始化组件]
|
||||
InitComponents --> SyncPosition[同步位置信息]
|
||||
SyncPosition --> PlayAnimation[播放特效动画]
|
||||
PlayAnimation --> CollisionCheck{碰撞检测}
|
||||
CollisionCheck --> |命中目标| ApplyDamage[应用伤害效果]
|
||||
CollisionCheck --> |未命中| ContinuePlay[继续播放]
|
||||
ApplyDamage --> CheckDuration{检查持续时间}
|
||||
ContinuePlay --> CheckDuration
|
||||
CheckDuration --> |达到上限| DestroyNode[销毁节点]
|
||||
CheckDuration --> |未达到| CollisionCheck
|
||||
DestroyNode --> CleanupResources[清理资源]
|
||||
CleanupResources --> End([生命周期结束])
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [SkillEnt.ts](file://assets/script/game/skill/SkillEnt.ts#L15-L77)
|
||||
- [AtkConCom.ts](file://assets/script/game/skill/AtkConCom.ts#L147-L186)
|
||||
- [SkillViewCom.ts](file://assets/script/game/skill/SkillViewCom.ts#L50-L80)
|
||||
|
||||
**章节来源**
|
||||
- [SkillEnt.ts](file://assets/script/game/skill/SkillEnt.ts#L1-L78)
|
||||
- [AtkConCom.ts](file://assets/script/game/skill/AtkConCom.ts#L147-L186)
|
||||
- [SkillViewCom.ts](file://assets/script/game/skill/SkillViewCom.ts#L50-L80)
|
||||
|
||||
### SkillViewCom与AtkConCom协作机制
|
||||
|
||||
SkillViewCom和AtkConCom通过紧密的协作确保技能特效与施法者位置的精确同步:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant SV as SkillViewCom
|
||||
participant AC as AtkConCom
|
||||
participant Hero as 施法者
|
||||
participant Target as 目标对象
|
||||
Hero->>SV : 更新施法者位置
|
||||
SV->>SV : 同步节点位置
|
||||
SV->>AC : 传递位置信息
|
||||
AC->>AC : 计算目标轨迹
|
||||
AC->>AC : 播放特效动画
|
||||
AC->>Target : 触发碰撞检测
|
||||
Target->>AC : 反馈碰撞结果
|
||||
AC->>AC : 应用伤害效果
|
||||
AC->>SV : 请求销毁节点
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [SkillViewCom.ts](file://assets/script/game/skill/SkillViewCom.ts#L120-L156)
|
||||
- [AtkConCom.ts](file://assets/script/game/skill/AtkConCom.ts#L120-L147)
|
||||
|
||||
这种协作机制的优势包括:
|
||||
- **实时同步**:确保特效始终跟随施法者移动
|
||||
- **精确控制**:支持复杂的运动轨迹计算
|
||||
- **高效通信**:通过组件间的消息传递实现解耦
|
||||
|
||||
**章节来源**
|
||||
- [SkillViewCom.ts](file://assets/script/game/skill/SkillViewCom.ts#L120-L156)
|
||||
- [AtkConCom.ts](file://assets/script/game/skill/AtkConCom.ts#L120-L147)
|
||||
|
||||
### 粒子系统与Spine动画集成
|
||||
|
||||
SkillLayer系统支持多种特效类型的无缝集成:
|
||||
|
||||
| 特效类型 | 实现方式 | 性能特点 | 使用场景 |
|
||||
|---------|---------|---------|---------|
|
||||
| 粒子系统 | Cocos Particle System | 高性能,适合大规模效果 | 火焰、爆炸、魔法阵 |
|
||||
| Spine动画 | Spine Runtime | 中等性能,适合复杂骨骼动画 | 英雄技能、特殊效果 |
|
||||
| 2D精灵 | Sprite Animation | 低性能,适合简单动画 | 基础攻击特效 |
|
||||
| 着色器效果 | Shader Effects | 高性能,适合全局效果 | 光晕、扭曲、渐变 |
|
||||
|
||||
**章节来源**
|
||||
- [SkillSet.ts](file://assets/script/game/common/config/SkillSet.ts#L80-L147)
|
||||
- [AtkConCom.ts](file://assets/script/game/skill/AtkConCom.ts#L58-L96)
|
||||
|
||||
## 依赖关系分析
|
||||
|
||||
SkillLayer系统的依赖关系体现了清晰的分层架构:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
subgraph "表现层"
|
||||
SkillLayer[SkillLayer]
|
||||
EntityLayer[EntityLayer]
|
||||
MapLayer[MapLayer]
|
||||
end
|
||||
subgraph "业务逻辑层"
|
||||
SkillEnt[SkillEnt]
|
||||
SkillViewCom[SkillViewCom]
|
||||
AtkConCom[AtkConCom]
|
||||
SkillConComp[SkillConComp]
|
||||
end
|
||||
subgraph "配置层"
|
||||
SkillSet[SkillSet]
|
||||
HeroAttrs[HeroAttrs]
|
||||
end
|
||||
subgraph "框架层"
|
||||
ECS[ECS框架]
|
||||
Oops[Oops框架]
|
||||
Cocos[Cocos引擎]
|
||||
end
|
||||
SkillLayer --> EntityLayer
|
||||
SkillLayer --> MapLayer
|
||||
SkillEnt --> SkillViewCom
|
||||
SkillViewCom --> AtkConCom
|
||||
SkillConComp --> SkillEnt
|
||||
SkillSet --> SkillViewCom
|
||||
SkillSet --> AtkConCom
|
||||
ECS --> SkillEnt
|
||||
ECS --> SkillViewCom
|
||||
ECS --> AtkConCom
|
||||
Oops --> SkillEnt
|
||||
Cocos --> SkillLayer
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/layer/SkillLayer.ts#L1-L15)
|
||||
- [SkillEnt.ts](file://assets/script/game/skill/SkillEnt.ts#L1-L10)
|
||||
- [SkillViewCom.ts](file://assets/script/game/skill/SkillViewCom.ts#L1-L10)
|
||||
|
||||
**章节来源**
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/layer/SkillLayer.ts#L1-L15)
|
||||
- [SkillEnt.ts](file://assets/script/game/skill/SkillEnt.ts#L1-L10)
|
||||
- [SkillViewCom.ts](file://assets/script/game/skill/SkillViewCom.ts#L1-L10)
|
||||
|
||||
## 性能考虑
|
||||
|
||||
SkillLayer系统在设计时充分考虑了性能优化,特别是在高频技能释放场景下的内存管理:
|
||||
|
||||
### 内存波动管理策略
|
||||
|
||||
1. **资源预加载机制**
|
||||
- 在技能释放前预先加载特效资源
|
||||
- 使用对象池技术复用特效节点
|
||||
- 实现智能的资源卸载策略
|
||||
|
||||
2. **对象池管理**
|
||||
- 动态创建和回收特效节点
|
||||
- 避免频繁的垃圾回收操作
|
||||
- 优化内存分配和释放频率
|
||||
|
||||
3. **渲染优化**
|
||||
- 减少不必要的渲染调用
|
||||
- 实现高效的深度排序算法
|
||||
- 使用视锥剔除减少不可见对象的渲染
|
||||
|
||||
### 最佳实践建议
|
||||
|
||||
| 优化策略 | 实现方法 | 性能收益 | 适用场景 |
|
||||
|---------|---------|---------|---------|
|
||||
| 对象池复用 | 预先创建特效对象池 | 减少50%的内存分配 | 高频技能释放 |
|
||||
| 异步加载 | 技能释放前异步加载资源 | 提升首帧性能 | 大型特效资源 |
|
||||
| 分帧处理 | 将特效创建分散到多帧 | 避免卡顿 | 大量并发技能 |
|
||||
| 资源压缩 | 使用压缩格式存储特效资源 | 减少内存占用30% | 所有场景 |
|
||||
|
||||
## 故障排除指南
|
||||
|
||||
### 常见问题及解决方案
|
||||
|
||||
1. **特效不显示或显示异常**
|
||||
- 检查SkillLayer是否正确添加到场景中
|
||||
- 验证特效预制体的加载路径是否正确
|
||||
- 确认特效节点的渲染层级设置
|
||||
|
||||
2. **技能特效与施法者不同步**
|
||||
- 检查SkillViewCom的位置同步逻辑
|
||||
- 验证AtkConCom的更新频率设置
|
||||
- 确认节点的父级变换矩阵
|
||||
|
||||
3. **内存泄漏问题**
|
||||
- 检查特效节点的销毁逻辑
|
||||
- 验证事件监听器的正确移除
|
||||
- 确认对象池的正确使用
|
||||
|
||||
**章节来源**
|
||||
- [AtkConCom.ts](file://assets/script/game/skill/AtkConCom.ts#L211-L235)
|
||||
- [SkillViewCom.ts](file://assets/script/game/skill/SkillViewCom.ts#L140-L156)
|
||||
|
||||
## 结论
|
||||
|
||||
SkillLayer作为技能特效渲染的核心组件,成功实现了以下目标:
|
||||
|
||||
1. **架构优势**:采用ECS架构设计,实现了高度的模块化和可扩展性
|
||||
2. **性能优化**:通过对象池、异步加载等技术有效管理内存波动
|
||||
3. **功能完整性**:支持多种特效类型和复杂的技能效果
|
||||
4. **维护便利性**:清晰的职责分离使得系统易于维护和扩展
|
||||
|
||||
该系统为游戏提供了流畅的技能特效体验,同时为未来的功能扩展奠定了坚实的基础。通过合理的架构设计和性能优化策略,SkillLayer能够应对各种复杂的技能释放场景,确保游戏的高质量运行。
|
||||
Reference in New Issue
Block a user