refactor(game): 移除已弃用的事件常量
- 删除 UpdateHero 和 UpdateFightHero 事件 - 移除 MISSION_UPDATE 事件常量 - 优化游戏事件枚举定义
This commit is contained in:
panw
383
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/光照效果实现.md
Normal file
383
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/光照效果实现.md
Normal file
@@ -0,0 +1,383 @@
|
||||
# 光照效果实现
|
||||
|
||||
<cite>
|
||||
**本文档中引用的文件**
|
||||
- [light.ts](file://assets/script/game/map/view/map/layer/light.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [FlashSprite.ts](file://assets/script/game/map/FlashSprite.ts)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts)
|
||||
- [map.json](file://assets/resources/config/map/map.json)
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts)
|
||||
</cite>
|
||||
|
||||
## 目录
|
||||
1. [项目概述](#项目概述)
|
||||
2. [光照效果架构](#光照效果架构)
|
||||
3. [核心组件分析](#核心组件分析)
|
||||
4. [遮罩层实现方案](#遮罩层实现方案)
|
||||
5. [后处理效果实现](#后处理效果实现)
|
||||
6. [视野范围控制机制](#视野范围控制机制)
|
||||
7. [地图分块加载联动](#地图分块加载联动)
|
||||
8. [性能优化与适配](#性能优化与适配)
|
||||
9. [高级视觉效果扩展](#高级视觉效果扩展)
|
||||
10. [最佳实践建议](#最佳实践建议)
|
||||
|
||||
## 项目概述
|
||||
|
||||
本项目是一个基于Cocos Creator的游戏，采用ECS架构设计，实现了肉鸽游戏风格的迷雾探索玩法。光照效果作为核心视觉系统的重要组成部分，负责控制玩家视野范围，营造神秘感和探索氛围。
|
||||
|
||||
### 技术栈特点
|
||||
- **引擎版本**: Cocos Creator
|
||||
- **架构模式**: ECS（Entity-Component-System）
|
||||
- **渲染技术**: 支持多种光照实现方案
|
||||
- **性能考量**: 针对移动端优化的设计
|
||||
|
||||
## 光照效果架构
|
||||
|
||||
光照效果系统采用分层架构设计，包含以下核心层次：
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "光照效果系统架构"
|
||||
A[光照控制器] --> B[遮罩层管理器]
|
||||
A --> C[后处理效果处理器]
|
||||
B --> D[灰度图遮罩]
|
||||
B --> E[透明度渐变遮罩]
|
||||
C --> F[Shader处理]
|
||||
C --> G[SpriteMask处理]
|
||||
H[地图分块系统] --> A
|
||||
I[玩家位置系统] --> A
|
||||
J[相机跟随系统] --> A
|
||||
end
|
||||
subgraph "渲染管线"
|
||||
K[主摄像机] --> L[光照遮罩层]
|
||||
L --> M[游戏场景层]
|
||||
M --> N[UI层]
|
||||
end
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [light.ts](file://assets/script/game/map/view/map/layer/light.ts#L1-L18)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
|
||||
## 核心组件分析
|
||||
|
||||
### 基础光照组件
|
||||
|
||||
当前项目中的基础光照组件位于[`light.ts`](file://assets/script/game/map/view/map/layer/light.ts#L1-L18)，虽然目前处于空壳状态，但为未来的功能扩展预留了接口。
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class LightComponent {
|
||||
+start() void
|
||||
+onLoad() void
|
||||
+update(deltaTime) void
|
||||
+createFogMask() Mask
|
||||
+updateVisibility(playerPos) void
|
||||
+applyShaderEffect() void
|
||||
}
|
||||
class MapViewScene {
|
||||
+camera Camera
|
||||
+layer Node
|
||||
+mapLayer MapLayer
|
||||
+entityLayer EntityLayer
|
||||
+isFollowPlayer boolean
|
||||
+ratio Vec2
|
||||
+init() void
|
||||
+update(dt) void
|
||||
}
|
||||
class MapLayer {
|
||||
+bgImg Sprite
|
||||
+init() void
|
||||
+clear() void
|
||||
+bgImage Sprite
|
||||
+width number
|
||||
+height number
|
||||
}
|
||||
LightComponent --> MapViewScene : "控制"
|
||||
MapViewScene --> MapLayer : "管理"
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [light.ts](file://assets/script/game/map/view/map/layer/light.ts#L4-L18)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L15-L45)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L15-L46)
|
||||
|
||||
**章节来源**
|
||||
- [light.ts](file://assets/script/game/map/view/map/layer/light.ts#L1-L18)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L47)
|
||||
|
||||
### 地图视图管理系统
|
||||
|
||||
地图视图系统负责整体场景的渲染管理和光照效果的协调工作：
|
||||
|
||||
- **摄像机控制**: 实现玩家跟随和视野限制
|
||||
- **层级管理**: 确保光照效果正确叠加在游戏场景之上
|
||||
- **渲染优化**: 通过分层渲染减少不必要的绘制调用
|
||||
|
||||
**章节来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L15-L77)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
|
||||
## 遮罩层实现方案
|
||||
|
||||
### 方案一：灰度图遮罩层
|
||||
|
||||
灰度图遮罩是最经典的迷雾效果实现方式，通过调整纹理的灰度值来控制可见性。
|
||||
|
||||
#### 实现原理
|
||||
1. **纹理准备**: 使用黑白灰度图定义可见区域
|
||||
2. **Alpha混合**: 通过Shader实现灰度值到透明度的映射
|
||||
3. **动态更新**: 根据玩家位置实时更新遮罩纹理
|
||||
|
||||
#### 技术优势
|
||||
- **性能优异**: GPU原生支持，计算开销小
|
||||
- **视觉效果好**: 自然的渐变过渡
|
||||
- **易于调试**: 可直接编辑遮罩纹理
|
||||
|
||||
### 方案二：透明度渐变遮罩
|
||||
|
||||
基于透明度渐变的遮罩实现，适合需要复杂视觉效果的场景。
|
||||
|
||||
#### 实现特点
|
||||
- **渐变控制**: 支持多种渐变模式（圆形、矩形、不规则形状）
|
||||
- **多光源支持**: 可同时处理多个光源的遮罩效果
|
||||
- **边缘平滑**: 提供高质量的边缘处理
|
||||
|
||||
**章节来源**
|
||||
- [FlashSprite.ts](file://assets/script/game/map/FlashSprite.ts#L1-L28)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L49)
|
||||
|
||||
## 后处理效果实现
|
||||
|
||||
### Shader-Based光照效果
|
||||
|
||||
基于Shader的后处理效果提供了最灵活的光照控制能力：
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Player as 玩家位置
|
||||
participant System as 光照系统
|
||||
participant Shader as Shader处理器
|
||||
participant Render as 渲染管线
|
||||
Player->>System : 位置更新
|
||||
System->>System : 计算视野范围
|
||||
System->>Shader : 传递参数
|
||||
Shader->>Shader : 执行光照计算
|
||||
Shader->>Render : 输出处理结果
|
||||
Render->>Player : 显示最终画面
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts#L198-L235)
|
||||
|
||||
#### Shader实现要点
|
||||
1. **顶点着色器**: 处理几何变换和光照坐标计算
|
||||
2. **片段着色器**: 实现复杂的光照算法和遮罩效果
|
||||
3. **纹理采样**: 优化纹理访问模式，减少带宽消耗
|
||||
|
||||
### SpriteMask实现方案
|
||||
|
||||
SpriteMask是一种轻量级的遮罩实现方式：
|
||||
|
||||
#### 优势特点
|
||||
- **简单易用**: 不需要编写Shader代码
|
||||
- **兼容性强**: 支持所有平台和设备
|
||||
- **调试方便**: 可直接在编辑器中预览效果
|
||||
|
||||
#### 适用场景
|
||||
- 移动设备优化
|
||||
- 快速原型开发
|
||||
- 简单的遮罩需求
|
||||
|
||||
**章节来源**
|
||||
- [FlashSprite.ts](file://assets/script/game/map/FlashSprite.ts#L15-L28)
|
||||
|
||||
## 视野范围控制机制
|
||||
|
||||
### 动态视野算法
|
||||
|
||||
视野范围控制是光照效果的核心功能，其实现涉及多个方面的协调：
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[玩家位置检测] --> B{视野类型判断}
|
||||
B --> |静态视野| C[固定半径遮罩]
|
||||
B --> |动态视野| D[渐进式展开]
|
||||
B --> |追踪视野| E[跟随玩家移动]
|
||||
C --> F[遮罩纹理更新]
|
||||
D --> F
|
||||
E --> F
|
||||
F --> G[性能优化检查]
|
||||
G --> H{性能阈值}
|
||||
H --> |正常| I[应用最终效果]
|
||||
H --> |过载| J[降级处理]
|
||||
I --> K[渲染输出]
|
||||
J --> L[简化效果]
|
||||
L --> K
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts#L198-L262)
|
||||
|
||||
### 视野参数配置
|
||||
|
||||
| 参数名称 | 类型 | 默认值 | 说明 |
|
||||
|---------|------|--------|------|
|
||||
| 视野半径 | number | 300 | 玩家周围可见范围半径 |
|
||||
| 渐变强度 | number | 0.8 | 遮罩边缘的模糊程度 |
|
||||
| 更新频率 | number | 0.1s | 视野更新的时间间隔 |
|
||||
| 最大遮罩数量 | number | 4 | 同时存在的遮罩层数 |
|
||||
|
||||
**章节来源**
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts#L198-L262)
|
||||
|
||||
## 地图分块加载联动
|
||||
|
||||
### 分块加载机制
|
||||
|
||||
地图分块加载与光照效果的联动确保了游戏性能和视觉体验的平衡：
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
subgraph "地图分块系统"
|
||||
A[当前区块] --> B[已加载区域]
|
||||
C[相邻区块] --> D[预加载区域]
|
||||
E[远处区块] --> F[未加载区域]
|
||||
end
|
||||
subgraph "光照效果系统"
|
||||
G[视野中心] --> H[光照遮罩]
|
||||
H --> I[动态更新]
|
||||
I --> J[性能优化]
|
||||
end
|
||||
B --> H
|
||||
D --> H
|
||||
F -.-> H
|
||||
subgraph "联动逻辑"
|
||||
K[区块加载] --> L[光照初始化]
|
||||
M[区块卸载] --> N[光照清理]
|
||||
O[玩家移动] --> P[区块切换]
|
||||
P --> Q[光照重定位]
|
||||
end
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
|
||||
### 动态更新策略
|
||||
|
||||
1. **渐进式加载**: 当玩家接近新区域时逐步加载光照数据
|
||||
2. **内存管理**: 及时释放远离玩家区域的光照资源
|
||||
3. **同步机制**: 确保光照效果与地图加载状态保持一致
|
||||
|
||||
**章节来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L20-L36)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L15-L45)
|
||||
|
||||
## 性能优化与适配
|
||||
|
||||
### 性能对比分析
|
||||
|
||||
| 实现方案 | CPU开销 | GPU开销 | 内存占用 | 兼容性 | 推荐场景 |
|
||||
|---------|---------|---------|----------|--------|----------|
|
||||
| Shader遮罩 | 低 | 中等 | 中等 | 高 | PC端、高端设备 |
|
||||
| SpriteMask | 中等 | 低 | 低 | 极高 | 移动端、低端设备 |
|
||||
| 后处理效果 | 中等 | 高 | 高 | 中等 | 主流设备 |
|
||||
|
||||
### 适配策略
|
||||
|
||||
#### 移动端优化
|
||||
- **降低分辨率**: 减少光照纹理的分辨率
|
||||
- **简化算法**: 使用更简单的遮罩算法
|
||||
- **帧率控制**: 动态调整光照更新频率
|
||||
|
||||
#### 高端设备优化
|
||||
- **增强效果**: 使用高质量的Shader和纹理
|
||||
- **多光源**: 支持复杂的多光源叠加效果
|
||||
- **实时阴影**: 实现动态阴影投射
|
||||
|
||||
**章节来源**
|
||||
- [FlashSprite.ts](file://assets/script/game/map/FlashSprite.ts#L1-L28)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L49)
|
||||
|
||||
## 高级视觉效果扩展
|
||||
|
||||
### 多光源叠加系统
|
||||
|
||||
扩展光照系统以支持多个光源的同时作用：
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class MultiLightSystem {
|
||||
+lights LightSource[]
|
||||
+addLight(source) void
|
||||
+removeLight(id) void
|
||||
+updateLights() void
|
||||
+combineEffects() Texture
|
||||
}
|
||||
class LightSource {
|
||||
+position Vec2
|
||||
+radius number
|
||||
+color Color
|
||||
+intensity number
|
||||
+shape Shape
|
||||
+calculateEffect() Effect
|
||||
}
|
||||
class ShadowCaster {
|
||||
+castShadow(light) Texture
|
||||
+calculateDepthMap() Texture
|
||||
+applySoftShadows() Texture
|
||||
}
|
||||
MultiLightSystem --> LightSource : "管理"
|
||||
LightSource --> ShadowCaster : "产生"
|
||||
ShadowCaster --> MultiLightSystem : "贡献"
|
||||
```
|
||||
|
||||
### 动态阴影实现
|
||||
|
||||
动态阴影系统能够根据光源位置和物体高度产生真实的阴影效果：
|
||||
|
||||
#### 实现步骤
|
||||
1. **深度缓冲**: 创建专门的深度纹理存储场景深度信息
|
||||
2. **阴影映射**: 将光源视角下的深度信息投影到屏幕空间
|
||||
3. **软阴影**: 应用阴影过滤算法产生柔和的边缘效果
|
||||
|
||||
### 区域高亮效果
|
||||
|
||||
为重要区域（如宝箱、传送点）添加特殊的高亮效果：
|
||||
|
||||
#### 效果类型
|
||||
- **脉冲高亮**: 周期性闪烁的高亮效果
|
||||
- **追踪高亮**: 跟随目标移动的持续高亮
|
||||
- **交互高亮**: 响应玩家操作的即时高亮
|
||||
|
||||
**章节来源**
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts#L198-L262)
|
||||
|
||||
## 最佳实践建议
|
||||
|
||||
### 开发规范
|
||||
|
||||
1. **组件分离**: 将光照效果与业务逻辑完全分离
|
||||
2. **参数化设计**: 提供丰富的配置参数以便调整
|
||||
3. **性能监控**: 实现运行时性能指标收集
|
||||
|
||||
### 测试策略
|
||||
|
||||
1. **多设备测试**: 在不同硬件配置下验证效果
|
||||
2. **性能基准**: 建立性能基线用于回归测试
|
||||
3. **用户体验测试**: 确保光照效果不会影响游戏体验
|
||||
|
||||
### 维护建议
|
||||
|
||||
1. **文档更新**: 及时更新光照系统的使用文档
|
||||
2. **版本兼容**: 保持与引擎版本的兼容性
|
||||
3. **社区反馈**: 积极响应开发者社区的需求
|
||||
|
||||
通过以上架构设计和实现方案，本光照效果系统能够满足肉鸽游戏的迷雾探索需求，同时具备良好的扩展性和性能表现。开发者可以根据具体项目需求选择合适的实现方案，并在此基础上进行功能扩展和优化。
|
||||
272
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/地图图层管理.md
Normal file
272
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/地图图层管理.md
Normal file
@@ -0,0 +1,272 @@
|
||||
# 地图图层管理
|
||||
|
||||
<cite>
|
||||
**本文档引用的文件**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts)
|
||||
- [light.ts](file://assets/script/game/map/view/map/layer/light.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts)
|
||||
</cite>
|
||||
|
||||
## 目录
|
||||
1. [引言](#引言)
|
||||
2. [项目结构](#项目结构)
|
||||
3. [核心组件](#核心组件)
|
||||
4. [架构概述](#架构概述)
|
||||
5. [详细组件分析](#详细组件分析)
|
||||
6. [依赖分析](#依赖分析)
|
||||
7. [性能考虑](#性能考虑)
|
||||
8. [故障排除指南](#故障排除指南)
|
||||
9. [结论](#结论)
|
||||
|
||||
## 引言
|
||||
本文档系统阐述了Cocos游戏项目中地图图层管理系统的实现机制。重点分析MapLayer作为背景图层的基础实现，EntityLayer如何承载动态实体并实现Z轴层级控制，SkillLayer在技能特效渲染中的作用，以及light.ts实现光照效果的潜在扩展方式。同时详细解析各图层继承Component的结构设计，展示图层间协作模式与节点组织策略，并提供新增自定义图层、优化图层渲染顺序与内存管理的最佳实践。
|
||||
|
||||
## 项目结构
|
||||
地图图层管理系统位于`assets/script/game/map/`目录下，采用MVC架构模式组织代码。系统分为模型层（model）、视图层（view）和控制器层，其中图层相关实现集中在view目录下的map/layer子目录中。
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "地图系统"
|
||||
Model[模型层\nMapModelComp]
|
||||
View[视图层\nMapViewComp/MapViewScene]
|
||||
Layers[图层组件\nMapLayer/EntityLayer/SkillLayer]
|
||||
end
|
||||
Model --> View
|
||||
View --> Layers
|
||||
Layers --> CC[CC引擎组件\nSprite/Node/Camera]
|
||||
```
|
||||
|
||||
**图层来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L10)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts#L1-L10)
|
||||
|
||||
**章节来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L80)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts#L1-L50)
|
||||
|
||||
## 核心组件
|
||||
地图图层管理系统由四个核心图层组件构成：MapLayer负责背景渲染，EntityLayer管理动态实体，SkillLayer处理技能特效，light.ts提供光照效果扩展。这些组件均继承自CC引擎的Component类，通过节点树结构组织，形成分层渲染体系。
|
||||
|
||||
**章节来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L47)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L39)
|
||||
|
||||
## 架构概述
|
||||
地图图层系统采用分层架构设计，通过MapViewScene统一管理各图层组件的生命周期和交互逻辑。系统实现了数据与视图的分离，通过ECS架构模式管理游戏实体状态。
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Component {
|
||||
<<abstract>>
|
||||
}
|
||||
class MapLayer {
|
||||
-bgImg : Sprite
|
||||
+init() : void
|
||||
+clear() : void
|
||||
+bgImage : Sprite
|
||||
+width : number
|
||||
+height : number
|
||||
}
|
||||
class EntityLayer {
|
||||
-timer : Timer
|
||||
+update(dt : number)
|
||||
+clear() : void
|
||||
}
|
||||
class SkillLayer {
|
||||
-timer : Timer
|
||||
-light : Prefab
|
||||
+doSkill() : void
|
||||
+clear() : void
|
||||
}
|
||||
class light {
|
||||
+start() : void
|
||||
+onLoad() : void
|
||||
+update(deltaTime : number) : void
|
||||
}
|
||||
class MapViewScene {
|
||||
-camera : Camera
|
||||
-mapLayer : MapLayer
|
||||
-entityLayer : EntityLayer
|
||||
-SkillLayer : SkillLayer
|
||||
+init() : void
|
||||
+reset() : void
|
||||
}
|
||||
Component <|-- MapLayer
|
||||
Component <|-- EntityLayer
|
||||
Component <|-- SkillLayer
|
||||
Component <|-- light
|
||||
MapViewScene --> MapLayer
|
||||
MapViewScene --> EntityLayer
|
||||
MapViewScene --> SkillLayer
|
||||
```
|
||||
|
||||
**图层来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L47)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L39)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L1-L48)
|
||||
- [light.ts](file://assets/script/game/map/view/map/layer/light.ts#L1-L20)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
|
||||
## 详细组件分析
|
||||
|
||||
### MapLayer分析
|
||||
MapLayer组件作为地图的背景图层，负责初始化纹理、适配尺寸和管理精灵帧。通过Sprite组件实现背景图像的渲染，利用UITransform组件控制图层尺寸。
|
||||
|
||||
#### 类图
|
||||
```mermaid
|
||||
classDiagram
|
||||
class MapLayer {
|
||||
-bgImg : Sprite
|
||||
+init() : void
|
||||
+clear() : void
|
||||
+bgImage : Sprite
|
||||
+width : number
|
||||
+height : number
|
||||
}
|
||||
class Sprite {
|
||||
-spriteFrame : SpriteFrame
|
||||
-texture : Texture2D
|
||||
}
|
||||
class UITransform {
|
||||
-width : number
|
||||
-height : number
|
||||
}
|
||||
MapLayer --> Sprite : "包含"
|
||||
MapLayer --> UITransform : "使用"
|
||||
```
|
||||
|
||||
**图层来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L15-L47)
|
||||
|
||||
**章节来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L47)
|
||||
|
||||
### EntityLayer分析
|
||||
EntityLayer组件承载英雄与怪物等动态实体，通过子节点排序实现Z轴层级控制。采用定时器优化渲染更新频率，避免每帧都进行排序操作以提升性能。
|
||||
|
||||
#### 序列图
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant EntityLayer as EntityLayer
|
||||
participant Timer as Timer
|
||||
participant Node as Node.children
|
||||
participant Sort as zIndexSort
|
||||
EntityLayer->>Timer : update(dt)
|
||||
Timer-->>EntityLayer : 是否达到0.2秒间隔?
|
||||
alt 达到间隔
|
||||
EntityLayer->>Node : children.sort()
|
||||
Node->>Sort : 执行Z轴排序
|
||||
Sort-->>Node : 返回排序结果
|
||||
Node-->>EntityLayer : 完成排序
|
||||
end
|
||||
EntityLayer->>EntityLayer : 继续下一帧更新
|
||||
```
|
||||
|
||||
**图层来源**
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L39)
|
||||
- [Timer.ts](file://assets/script/game/common/config/BoxSet.ts#L1-L10)
|
||||
|
||||
**章节来源**
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L39)
|
||||
|
||||
### SkillLayer分析
|
||||
SkillLayer组件专门处理技能特效的渲染，通过预制体(Prefab)管理技能相关的视觉效果。组件设计支持事件驱动的技能触发机制，为技能系统的扩展提供了基础。
|
||||
|
||||
#### 流程图
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A([组件加载]) --> B{是否监听到\n"do_use_skill"事件?}
|
||||
B --> |是| C[执行doSkill方法]
|
||||
B --> |否| D[等待下一帧]
|
||||
C --> E[实例化技能特效预制体]
|
||||
E --> F[添加到场景节点树]
|
||||
F --> G[播放技能动画]
|
||||
G --> H[技能效果完成]
|
||||
H --> I[清理特效节点]
|
||||
I --> D
|
||||
D --> J{组件是否销毁?}
|
||||
J --> |是| K([组件卸载])
|
||||
J --> |否| B
|
||||
```
|
||||
|
||||
**图层来源**
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L1-L48)
|
||||
- [Prefab](file://assets/script/game/common/config/BoxSet.ts#L1-L10)
|
||||
|
||||
**章节来源**
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L1-L48)
|
||||
|
||||
### 光照系统分析
|
||||
light.ts文件定义了基础的光照组件，为地图系统提供了光照效果的扩展能力。虽然当前实现较为简单，但已具备完整的组件生命周期管理。
|
||||
|
||||
#### 状态图
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> 初始化
|
||||
初始化 --> 加载中 : onLoad()
|
||||
加载中 --> 运行中 : start()
|
||||
运行中 --> 加载中 : 重新加载
|
||||
运行中 --> 更新中 : update()
|
||||
更新中 --> 运行中 : 完成更新
|
||||
运行中 --> 销毁 : 组件移除
|
||||
销毁 --> [*]
|
||||
```
|
||||
|
||||
**图层来源**
|
||||
- [light.ts](file://assets/script/game/map/view/map/layer/light.ts#L1-L20)
|
||||
|
||||
**章节来源**
|
||||
- [light.ts](file://assets/script/game/map/view/map/layer/light.ts#L1-L20)
|
||||
|
||||
## 依赖分析
|
||||
地图图层系统依赖于Oops插件框架提供的核心功能，包括资源管理、消息系统和ECS架构。各图层组件通过MapViewScene进行协调管理，形成清晰的依赖关系。
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[MapLayer] --> B[CC引擎]
|
||||
C[EntityLayer] --> B
|
||||
D[SkillLayer] --> B
|
||||
E[light] --> B
|
||||
F[MapViewScene] --> A
|
||||
F --> C
|
||||
F --> D
|
||||
F --> E
|
||||
G[Oops框架] --> F
|
||||
G --> C
|
||||
G --> D
|
||||
B --> H[Sprite]
|
||||
B --> I[Node]
|
||||
B --> J[Camera]
|
||||
```
|
||||
|
||||
**图层来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
|
||||
**章节来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
|
||||
## 性能考虑
|
||||
地图图层系统在设计时充分考虑了性能优化。EntityLayer和SkillLayer均采用定时器控制更新频率，避免不必要的每帧计算。MapLayer通过直接操作UITransform组件实现高效的尺寸适配。
|
||||
|
||||
系统建议的性能优化策略包括：
|
||||
1. 对于静态背景，使用MapLayer一次性初始化
|
||||
2. 动态实体的Z轴排序采用0.2秒间隔更新，平衡视觉效果与性能
|
||||
3. 技能特效使用对象池模式管理预制体实例，减少GC压力
|
||||
4. 光照效果可根据需要动态启用或禁用
|
||||
|
||||
## 故障排除指南
|
||||
当遇到地图图层相关问题时，可参考以下排查步骤：
|
||||
|
||||
**章节来源**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
|
||||
## 结论
|
||||
地图图层管理系统通过分层设计实现了关注点分离，各图层职责明确，便于维护和扩展。系统充分利用了CC引擎的节点组件体系，结合Oops框架的ECS架构，构建了一个高效、可扩展的地图渲染解决方案。未来可进一步优化Z轴排序算法，引入更复杂的光照模型，并完善技能特效的资源管理机制。
|
||||
615
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/地图基础图层.md
Normal file
615
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/地图基础图层.md
Normal file
@@ -0,0 +1,615 @@
|
||||
# 地图基础图层
|
||||
|
||||
<cite>
|
||||
**本文档中引用的文件**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts)
|
||||
- [map.json](file://assets/resources/config/map/map.json)
|
||||
- [map_delivery.json](file://assets/resources/config/map/map_delivery.json)
|
||||
</cite>
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
2. [项目结构](#项目结构)
|
||||
3. [核心组件](#核心组件)
|
||||
4. [架构概览](#架构概览)
|
||||
5. [详细组件分析](#详细组件分析)
|
||||
6. [依赖关系分析](#依赖关系分析)
|
||||
7. [性能优化策略](#性能优化策略)
|
||||
8. [故障排除指南](#故障排除指南)
|
||||
9. [结论](#结论)
|
||||
|
||||
## 简介
|
||||
|
||||
MapLayer类是Cocos Creator游戏引擎中地图系统的核心组件，作为地图背景图层的基础实现。该类继承自cc.Component，提供了地图纹理资源的动态加载、精灵帧初始化、尺寸适配以及节点锚点校准等关键功能。通过与MapViewComp的紧密协作，MapLayer确保了在不同分辨率设备下的正确渲染和高效的性能表现。
|
||||
|
||||
本文档将深入解析MapLayer的实现机制，包括其生命周期管理、纹理资源处理流程、尺寸适配策略以及在地图系统中的注册与更新机制。同时，我们将探讨如何扩展MapLayer以支持多段滚动背景和动态材质更新，并提供实用的性能优化建议。
|
||||
|
||||
## 项目结构
|
||||
|
||||
地图系统的文件组织采用了模块化的架构设计，主要分为视图层(view)和模型层(model)两个核心部分：
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "地图系统架构"
|
||||
GameMap[GameMap 游戏地图实体]
|
||||
MapModel[MapModelComp 地图模型组件]
|
||||
MapView[MapViewComp 地图视图组件]
|
||||
subgraph "视图层组件"
|
||||
MapViewScene[MapViewScene 地图场景逻辑]
|
||||
MapLayer[MapLayer 地图背景层]
|
||||
EntityLayer[EntityLayer 实体层]
|
||||
SkillLayer[SkillLayer 技能层]
|
||||
end
|
||||
subgraph "配置文件"
|
||||
MapConfig[map.json 地图配置]
|
||||
DeliveryConfig[map_delivery.json 传送点配置]
|
||||
end
|
||||
end
|
||||
GameMap --> MapModel
|
||||
GameMap --> MapView
|
||||
MapView --> MapViewScene
|
||||
MapViewScene --> MapLayer
|
||||
MapViewScene --> EntityLayer
|
||||
MapViewScene --> SkillLayer
|
||||
MapModel --> MapConfig
|
||||
MapModel --> DeliveryConfig
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L35)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts#L1-L42)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L44)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L76)
|
||||
|
||||
**章节来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L35)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts#L1-L42)
|
||||
|
||||
## 核心组件
|
||||
|
||||
### MapLayer类设计
|
||||
|
||||
MapLayer作为地图背景图层的核心实现，具有以下关键特性：
|
||||
|
||||
| 属性/方法 | 类型 | 描述 | 默认值 |
|
||||
|-----------|------|------|--------|
|
||||
| bgImg | Sprite | 背景图像精灵组件 | null |
|
||||
| width | number | 图层宽度属性 | 动态计算 |
|
||||
| height | number | 图层高度属性 | 动态计算 |
|
||||
| init() | void | 初始化方法 | - |
|
||||
| clear() | void | 清理方法 | - |
|
||||
| bgImage | Sprite | 背景图像访问器 | - |
|
||||
|
||||
### 组件继承体系
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Component {
|
||||
+onLoad() void
|
||||
+start() void
|
||||
+update(dt : number) void
|
||||
+destroy() void
|
||||
}
|
||||
class MapLayer {
|
||||
-bgImg : Sprite
|
||||
+init() void
|
||||
+clear() void
|
||||
+bgImage : Sprite
|
||||
+width : number
|
||||
+height : number
|
||||
}
|
||||
class MapViewScene {
|
||||
+camera : Camera
|
||||
+layer : Node
|
||||
+mapLayer : MapLayer
|
||||
+floorLayer : Node
|
||||
+entityLayer : EntityLayer
|
||||
+SkillLayer : SkillLayer
|
||||
+isFollowPlayer : boolean
|
||||
+ratio : Vec2
|
||||
+onLoad() void
|
||||
+start() void
|
||||
+reset() void
|
||||
+init() void
|
||||
+update(dt : number) void
|
||||
}
|
||||
class EntityLayer {
|
||||
-timer : Timer
|
||||
+update(dt : number) void
|
||||
+clear() void
|
||||
}
|
||||
class SkillLayer {
|
||||
-timer : Timer
|
||||
+light : Prefab
|
||||
+onLoad() void
|
||||
+doSkill() void
|
||||
+update(dt : number) void
|
||||
+clear() void
|
||||
}
|
||||
Component <|-- MapLayer
|
||||
Component <|-- EntityLayer
|
||||
Component <|-- SkillLayer
|
||||
MapViewScene --> MapLayer : "包含"
|
||||
MapViewScene --> EntityLayer : "包含"
|
||||
MapViewScene --> SkillLayer : "包含"
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L46)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L76)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L38)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L1-L47)
|
||||
|
||||
**章节来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L46)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L76)
|
||||
|
||||
## 架构概览
|
||||
|
||||
地图系统采用ECS（Entity-Component-System）架构模式，通过组件化设计实现了高度的灵活性和可扩展性：
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant GM as GameMap
|
||||
participant MM as MapModel
|
||||
participant MVC as MapViewComp
|
||||
participant MVS as MapViewScene
|
||||
participant ML as MapLayer
|
||||
participant BG as Background Sprite
|
||||
GM->>MM : 创建地图模型
|
||||
GM->>MVC : 加载地图视图
|
||||
MVC->>MVS : 初始化场景逻辑
|
||||
MVS->>ML : 注册地图层
|
||||
ML->>BG : 初始化背景精灵
|
||||
BG->>ML : 设置纹理资源
|
||||
ML->>MVS : 完成初始化
|
||||
MVS->>MVC : 场景就绪
|
||||
MVC->>GM : 视图组件激活
|
||||
Note over GM,BG : 地图初始化完成
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L25-L35)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L25-L35)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L50-L60)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L20-L25)
|
||||
|
||||
## 详细组件分析
|
||||
|
||||
### MapLayer生命周期管理
|
||||
|
||||
MapLayer的生命周期管理遵循Cocos Creator的标准组件生命周期，通过init()方法进行初始化配置：
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([组件加载]) --> OnInit["调用init()方法"]
|
||||
OnInit --> GetTransform["获取UITransform组件"]
|
||||
GetTransform --> CalcSize["计算宽度和高度"]
|
||||
CalcSize --> SetSize["设置节点尺寸"]
|
||||
SetSize --> Ready([初始化完成])
|
||||
Ready --> UpdateLoop{"游戏循环"}
|
||||
UpdateLoop --> UpdateLoop
|
||||
Ready --> ClearCall["调用clear()方法"]
|
||||
ClearCall --> ResetSprite["重置精灵帧"]
|
||||
ResetSprite --> Cleanup([清理完成])
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L20-L30)
|
||||
|
||||
#### 初始化流程详解
|
||||
|
||||
MapLayer的init()方法负责设置图层的基本属性，主要包括：
|
||||
|
||||
1. **尺寸适配**：通过UITransform组件动态调整节点尺寸
|
||||
2. **锚点校准**：确保在不同分辨率下的正确对齐
|
||||
3. **纹理绑定**：建立与背景精灵的关联关系
|
||||
|
||||
#### 清理机制
|
||||
|
||||
clear()方法提供了优雅的资源清理机制：
|
||||
- 释放当前绑定的精灵帧资源
|
||||
- 防止内存泄漏
|
||||
- 支持动态切换地图内容
|
||||
|
||||
**章节来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L20-L35)
|
||||
|
||||
### 纹理资源动态加载
|
||||
|
||||
地图系统通过MapModelComp管理资源配置，支持动态加载不同地图的纹理资源：
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph "资源配置"
|
||||
Config[map.json<br/>地图配置文件]
|
||||
Delivery[map_delivery.json<br/>传送点配置]
|
||||
end
|
||||
subgraph "资源加载"
|
||||
Model[MapModelComp<br/>模型组件]
|
||||
Loader[Oops资源管理器<br/>oops.res.load]
|
||||
Prefab[地图预制件<br/>resPrefab]
|
||||
end
|
||||
subgraph "实例化"
|
||||
Instantiate[实例化地图节点]
|
||||
AddToScene[添加到场景]
|
||||
RegisterLayers[注册图层组件]
|
||||
end
|
||||
Config --> Model
|
||||
Delivery --> Model
|
||||
Model --> Loader
|
||||
Loader --> Prefab
|
||||
Prefab --> Instantiate
|
||||
Instantiate --> AddToScene
|
||||
AddToScene --> RegisterLayers
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts#L15-L20)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L25-L35)
|
||||
- [map.json](file://assets/resources/config/map/map.json#L1-L11)
|
||||
|
||||
#### 资源加载策略
|
||||
|
||||
| 资源类型 | 加载方式 | 缓存策略 | 释放时机 |
|
||||
|----------|----------|----------|----------|
|
||||
| 地图预制件 | 异步加载 | 自动缓存 | 场景切换时 |
|
||||
| 纹理资源 | 按需加载 | 批量管理 | 地图销毁时 |
|
||||
| 配置文件 | 同步加载 | 内存常驻 | 应用退出时 |
|
||||
|
||||
**章节来源**
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts#L15-L20)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L25-L35)
|
||||
|
||||
### 尺寸适配与节点锚点校准
|
||||
|
||||
MapLayer通过UITransform组件实现智能的尺寸适配：
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
subgraph "尺寸计算"
|
||||
GetSprite["获取背景精灵"]
|
||||
GetTransform["读取UITransform"]
|
||||
CalcWidth["计算宽度"]
|
||||
CalcHeight["计算高度"]
|
||||
end
|
||||
subgraph "锚点校准"
|
||||
SetAnchor["设置锚点"]
|
||||
AdjustPosition["调整位置"]
|
||||
ValidateBounds["验证边界"]
|
||||
end
|
||||
subgraph "渲染优化"
|
||||
BatchRender["批处理渲染"]
|
||||
ReduceDrawCalls["减少绘制调用"]
|
||||
OptimizeMemory["优化内存使用"]
|
||||
end
|
||||
GetSprite --> GetTransform
|
||||
GetTransform --> CalcWidth
|
||||
GetTransform --> CalcHeight
|
||||
CalcWidth --> SetAnchor
|
||||
CalcHeight --> SetAnchor
|
||||
SetAnchor --> AdjustPosition
|
||||
AdjustPosition --> ValidateBounds
|
||||
ValidateBounds --> BatchRender
|
||||
BatchRender --> ReduceDrawCalls
|
||||
ReduceDrawCalls --> OptimizeMemory
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L30-L45)
|
||||
|
||||
#### 适配算法实现
|
||||
|
||||
MapLayer采用以下策略确保在不同设备上的正确显示：
|
||||
|
||||
1. **动态尺寸计算**：基于背景精灵的实际纹理尺寸
|
||||
2. **锚点智能定位**：自动调整节点锚点以适应不同的显示需求
|
||||
3. **边界验证**：确保渲染边界不会超出屏幕范围
|
||||
|
||||
**章节来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L30-L45)
|
||||
|
||||
### MapViewComp中的注册与更新策略
|
||||
|
||||
MapViewComp作为地图系统的协调中心，负责管理所有子图层的生命周期：
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant MVC as MapViewComp
|
||||
participant MVS as MapViewScene
|
||||
participant ML as MapLayer
|
||||
participant EL as EntityLayer
|
||||
participant SL as SkillLayer
|
||||
MVC->>MVS : 创建场景实例
|
||||
MVS->>ML : 注册地图层
|
||||
MVS->>EL : 注册实体层
|
||||
MVS->>SL : 注册技能层
|
||||
loop 游戏循环
|
||||
MVS->>ML : 更新背景
|
||||
MVS->>EL : 更新实体
|
||||
MVS->>SL : 更新技能
|
||||
ML->>ML : 处理纹理动画
|
||||
EL->>EL : 处理深度排序
|
||||
SL->>SL : 处理特效渲染
|
||||
end
|
||||
Note over MVC,SL : 地图系统运行中
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L25-L35)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L25-L45)
|
||||
|
||||
#### 图层初始化顺序
|
||||
|
||||
地图系统按照以下优先级顺序初始化各图层：
|
||||
|
||||
1. **背景层(MapLayer)**：最先初始化，确保基础渲染环境
|
||||
2. **实体层(EntityLayer)**：紧随其后，处理游戏对象渲染
|
||||
3. **技能层(SkillLayer)**：最后初始化，处理特效和技能动画
|
||||
|
||||
#### 渲染层级基础设定
|
||||
|
||||
| 图层类型 | 渲染层级 | Z-Index范围 | 主要职责 |
|
||||
|----------|----------|-------------|----------|
|
||||
| 背景层 | 最底层 | 0-10 | 地图背景渲染 |
|
||||
| 地面层 | 中间层 | 11-50 | 地面装饰物 |
|
||||
| 实体层 | 中间层 | 51-100 | 游戏实体对象 |
|
||||
| 技能层 | 最顶层 | 101+ | 技能特效动画 |
|
||||
|
||||
**章节来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L25-L45)
|
||||
|
||||
### 扩展MapLayer支持多段滚动背景
|
||||
|
||||
为了支持更复杂的游戏场景，可以扩展MapLayer以实现多段滚动背景：
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class MapLayer {
|
||||
+bgImg : Sprite
|
||||
+scrollSpeed : number
|
||||
+repeatMode : RepeatMode
|
||||
+init() void
|
||||
+update(dt : number) void
|
||||
+setScrollSpeed(speed : number) void
|
||||
+enableParallax(parallax : boolean) void
|
||||
}
|
||||
class MultiScrollLayer {
|
||||
-layers : MapLayer[]
|
||||
-parallaxFactor : number
|
||||
+addBackground(layer : MapLayer) void
|
||||
+removeBackground(layer : MapLayer) void
|
||||
+update(dt : number) void
|
||||
+setParallaxFactor(factor : number) void
|
||||
}
|
||||
class ParallaxEffect {
|
||||
+depth : number
|
||||
+speedMultiplier : number
|
||||
+offset : Vec2
|
||||
+applyEffect(sprite : Sprite) void
|
||||
}
|
||||
MapLayer <|-- MultiScrollLayer
|
||||
MultiScrollLayer --> ParallaxEffect : "使用"
|
||||
MultiScrollLayer --> MapLayer : "管理多个"
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L46)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L49)
|
||||
|
||||
#### 动态材质更新机制
|
||||
|
||||
通过MoveUV组件可以实现动态UV动画效果：
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([开始UV动画]) --> GetSprite["获取Sprite组件"]
|
||||
GetSprite --> InitRect["初始化矩形区域"]
|
||||
InitRect --> SetPackable["禁用打包优化"]
|
||||
SetPackable --> UpdateLoop{"更新循环"}
|
||||
UpdateLoop --> CheckWrapMode{"检查包装模式"}
|
||||
CheckWrapMode --> |变更| UpdateWrapMode["更新纹理包装模式"]
|
||||
CheckWrapMode --> |未变| CalculateOffset["计算偏移量"]
|
||||
UpdateWrapMode --> CalculateOffset
|
||||
CalculateOffset --> ApplyOffset["应用UV偏移"]
|
||||
ApplyOffset --> MarkDirty["标记渲染数据更新"]
|
||||
MarkDirty --> UpdateLoop
|
||||
UpdateLoop --> Stop([停止动画])
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L25-L49)
|
||||
|
||||
**章节来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L49)
|
||||
|
||||
## 依赖关系分析
|
||||
|
||||
地图系统的依赖关系体现了清晰的分层架构：
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "外部依赖"
|
||||
Cocos[Cocos Creator Engine]
|
||||
Oops[Oops Plugin Framework]
|
||||
ECS[ECS Framework]
|
||||
end
|
||||
subgraph "核心组件"
|
||||
MapLayer[MapLayer]
|
||||
MapViewComp[MapViewComp]
|
||||
MapViewScene[MapViewScene]
|
||||
MapModel[MapModelComp]
|
||||
end
|
||||
subgraph "辅助组件"
|
||||
EntityLayer[EntityLayer]
|
||||
SkillLayer[SkillLayer]
|
||||
MoveUV[MoveUV]
|
||||
end
|
||||
subgraph "配置系统"
|
||||
MapConfig[地图配置]
|
||||
DeliveryConfig[传送点配置]
|
||||
end
|
||||
Cocos --> MapLayer
|
||||
Cocos --> MapViewComp
|
||||
Cocos --> MapViewScene
|
||||
Cocos --> MapModel
|
||||
Cocos --> EntityLayer
|
||||
Cocos --> SkillLayer
|
||||
Cocos --> MoveUV
|
||||
Oops --> MapLayer
|
||||
Oops --> MapViewComp
|
||||
Oops --> MapViewScene
|
||||
Oops --> MapModel
|
||||
ECS --> MapLayer
|
||||
ECS --> MapViewComp
|
||||
ECS --> MapViewScene
|
||||
ECS --> MapModel
|
||||
MapConfig --> MapModel
|
||||
DeliveryConfig --> MapModel
|
||||
MapViewScene --> MapLayer
|
||||
MapViewScene --> EntityLayer
|
||||
MapViewScene --> SkillLayer
|
||||
MapLayer --> MoveUV
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L10)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L10)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L10)
|
||||
|
||||
### 组件耦合度分析
|
||||
|
||||
| 组件对 | 耦合类型 | 耦合强度 | 优化建议 |
|
||||
|--------|----------|----------|----------|
|
||||
| MapLayer ↔ MoveUV | 功能耦合 | 中等 | 提取通用接口 |
|
||||
| MapViewScene ↔ MapLayer | 依赖耦合 | 高 | 使用事件解耦 |
|
||||
| GameMap ↔ MapModel | 实体耦合 | 低 | 添加中间管理层 |
|
||||
|
||||
**章节来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L10)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L10)
|
||||
|
||||
## 性能优化策略
|
||||
|
||||
### 图集合并优化
|
||||
|
||||
通过合理组织纹理资源，可以显著提升渲染性能：
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph "原始资源"
|
||||
T1[纹理1]
|
||||
T2[纹理2]
|
||||
T3[纹理3]
|
||||
T4[纹理4]
|
||||
end
|
||||
subgraph "图集合并"
|
||||
Atlas[纹理图集]
|
||||
Pack[打包算法]
|
||||
end
|
||||
subgraph "优化效果"
|
||||
Batch[批处理渲染]
|
||||
DrawCalls[减少绘制调用]
|
||||
Memory[优化内存使用]
|
||||
end
|
||||
T1 --> Pack
|
||||
T2 --> Pack
|
||||
T3 --> Pack
|
||||
T4 --> Pack
|
||||
Pack --> Atlas
|
||||
Atlas --> Batch
|
||||
Batch --> DrawCalls
|
||||
DrawCalls --> Memory
|
||||
```
|
||||
|
||||
#### 性能优化建议
|
||||
|
||||
1. **纹理打包策略**
|
||||
- 将频繁一起使用的纹理合并到同一图集中
|
||||
- 使用合理的图集大小（建议1024x1024或2048x2048）
|
||||
- 避免过度填充导致的内存浪费
|
||||
|
||||
2. **绘制批次优化**
|
||||
- 相同材质的精灵自动合并到同一绘制批次
|
||||
- 减少状态切换开销
|
||||
- 优化渲染顺序以提高缓存命中率
|
||||
|
||||
3. **内存管理**
|
||||
- 及时释放不再使用的纹理资源
|
||||
- 使用对象池管理临时对象
|
||||
- 监控内存使用情况，避免内存泄漏
|
||||
|
||||
### 动态加载优化
|
||||
|
||||
对于大型地图场景，建议采用分块加载策略：
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([地图加载开始]) --> LoadCore["加载核心图层"]
|
||||
LoadCore --> LoadVisible["加载可见区域"]
|
||||
LoadVisible --> PreloadNearby["预加载邻近区域"]
|
||||
PreloadNearby --> Monitor["监控玩家位置"]
|
||||
Monitor --> PlayerMoved{"玩家移动？"}
|
||||
PlayerMoved --> |是| UnloadOld["卸载远离区域"]
|
||||
PlayerMoved --> |否| Monitor
|
||||
UnloadOld --> LoadNew["加载新区域"]
|
||||
LoadNew --> PreloadNearby
|
||||
Monitor --> End([加载完成])
|
||||
```
|
||||
|
||||
**章节来源**
|
||||
- [MapLayer.ts](file://assets/script/game/view/map/layer/MapLayer.ts#L1-L46)
|
||||
- [MoveUV.ts](file://assets/script/game/view/MoveUV.ts#L1-L49)
|
||||
|
||||
## 故障排除指南
|
||||
|
||||
### 常见问题及解决方案
|
||||
|
||||
| 问题类型 | 症状描述 | 可能原因 | 解决方案 |
|
||||
|----------|----------|----------|----------|
|
||||
| 纹理加载失败 | 背景显示为空白 | 资源路径错误 | 检查resPrefab配置 |
|
||||
| 尺寸适配异常 | 图层显示变形 | 锚点设置不当 | 验证UITransform配置 |
|
||||
| 性能下降 | 帧率降低 | 绘制批次过多 | 优化纹理打包策略 |
|
||||
| 内存泄漏 | 内存持续增长 | 资源未正确释放 | 检查clear()方法调用 |
|
||||
|
||||
### 调试技巧
|
||||
|
||||
1. **资源监控**
|
||||
- 使用Cocos Creator的Profiler监控渲染性能
|
||||
- 检查纹理内存使用情况
|
||||
- 监控绘制调用次数
|
||||
|
||||
2. **日志记录**
|
||||
- 在关键方法添加调试日志
|
||||
- 记录资源加载状态
|
||||
- 跟踪组件生命周期
|
||||
|
||||
3. **可视化调试**
|
||||
- 显示图层边界框
|
||||
- 标记关键节点位置
|
||||
- 可视化渲染顺序
|
||||
|
||||
**章节来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L25-L35)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L45-L60)
|
||||
|
||||
## 结论
|
||||
|
||||
MapLayer作为地图系统的核心组件，通过精心设计的架构实现了高效的地图渲染功能。其继承自cc.Component的生命周期管理确保了组件的正确初始化和清理，而动态纹理加载和精灵帧初始化流程则保证了资源的灵活使用。
|
||||
|
||||
通过与MapViewComp的紧密协作，MapLayer不仅实现了基本的地图背景渲染，还为扩展功能如多段滚动背景和动态材质更新奠定了坚实基础。合理的性能优化策略，包括图集合并和绘制批次减少，使得地图系统能够在各种设备上保持良好的性能表现。
|
||||
|
||||
未来的发展方向包括：
|
||||
- 进一步优化多段滚动背景的实现
|
||||
- 增强动态材质更新的功能
|
||||
- 实现更智能的资源加载策略
|
||||
- 提供更丰富的视觉效果支持
|
||||
|
||||
这些改进将使地图系统更加灵活和强大，为游戏开发提供更好的技术支持。
|
||||
170
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/实体图层管理.md
Normal file
170
.qoder/repowiki/zh/content/地图系统/地图视图/地图图层管理/实体图层管理.md
Normal file
@@ -0,0 +1,170 @@
|
||||
# 实体图层管理
|
||||
|
||||
<cite>
|
||||
**本文档引用文件**
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts)
|
||||
- [BattleMoveComp.ts](file://assets/script/game/common/ecs/position/BattleMoveComp.ts)
|
||||
- [Hero.ts](file://assets/script/game/hero/Hero.ts)
|
||||
- [Mon.ts](file://assets/script/game/hero/Mon.ts)
|
||||
- [HeroViewComp.ts](file://assets/script/game/hero/HeroViewComp.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [timer.md](file://doc/core/common/timer.md)
|
||||
</cite>
|
||||
|
||||
## 目录
|
||||
1. [引言](#引言)
|
||||
2. [实体图层结构](#实体图层结构)
|
||||
3. [Z轴层级管理机制](#z轴层级管理机制)
|
||||
4. [定时器更新策略](#定时器更新策略)
|
||||
5. [ECS系统数据同步](#ecs系统数据同步)
|
||||
6. [性能优化方案](#性能优化方案)
|
||||
7. [结论](#结论)
|
||||
|
||||
## 引言
|
||||
本文档深入解析EntityLayer作为动态实体容器的实现机制，重点阐述其如何承载英雄、怪物及其他可移动单位的可视化节点。文档将详细说明其通过addChild与zIndex控制子节点渲染顺序的Z轴层级管理机制，分析其内置的定时器更新策略，以及与ECS系统中BattleMoveComp的数据同步设计模式。同时，提供处理大量实体时的性能优化方案。
|
||||
|
||||
## 实体图层结构
|
||||
|
||||
EntityLayer作为游戏场景中的物体层，负责管理所有动态实体的可视化节点。该图层通过Cocos Creator的节点系统实现，作为场景中的一个特殊容器节点，专门用于承载英雄、怪物等可移动单位。
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "场景层级结构"
|
||||
MapViewScene[地图场景]
|
||||
EntityLayer[实体图层]
|
||||
SkillLayer[技能图层]
|
||||
MapLayer[地图图层]
|
||||
end
|
||||
MapViewScene --> EntityLayer
|
||||
MapViewScene --> SkillLayer
|
||||
MapViewScene --> MapLayer
|
||||
EntityLayer --> HeroNode[英雄节点]
|
||||
EntityLayer --> MonsterNode[怪物节点]
|
||||
```
|
||||
|
||||
**Diagram sources**
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L38)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L20)
|
||||
|
||||
**Section sources**
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L38)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L20)
|
||||
|
||||
## Z轴层级管理机制
|
||||
|
||||
EntityLayer通过精确的Z轴层级管理机制确保战斗单位在地形与特效间的正确叠加。该机制不直接依赖节点的z坐标，而是通过控制节点在父节点中的兄弟索引（sibling index）来实现渲染顺序的控制。
|
||||
|
||||
核心实现位于BattleMoveSystem中，通过updateRenderOrder方法动态调整所有单位的渲染层级：
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([开始更新渲染层级]) --> FindUnits["查找所有HeroViewComp实体"]
|
||||
FindUnits --> FilterByFac["按阵营分组"]
|
||||
FilterByFac --> SortByX["按x坐标排序<br/>x坐标越小越靠后"]
|
||||
SortByX --> SetSiblingIndex["设置兄弟索引<br/>index越大层级越高"]
|
||||
SetSiblingIndex --> End([完成渲染层级更新])
|
||||
```
|
||||
|
||||
**Diagram sources**
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts#L233-L262)
|
||||
- [HeroViewComp.ts](file://assets/script/game/hero/HeroViewComp.ts#L1-L50)
|
||||
|
||||
**Section sources**
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts#L233-L262)
|
||||
- [HeroViewComp.ts](file://assets/script/game/hero/HeroViewComp.ts#L1-L50)
|
||||
|
||||
## 定时器更新策略
|
||||
|
||||
EntityLayer采用智能的定时器更新策略，通过固定帧间隔批量刷新实体位置以降低渲染开销。该策略避免了每帧都进行深度排序可能带来的性能问题。
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class EntityLayer {
|
||||
-timer : Timer
|
||||
+update(dt : number)
|
||||
+clear()
|
||||
}
|
||||
class Timer {
|
||||
+interval : number
|
||||
+update(dt : number) : boolean
|
||||
}
|
||||
EntityLayer --> Timer : "使用"
|
||||
```
|
||||
|
||||
EntityLayer中定义了一个间隔为0.2秒的Timer实例，理论上应该周期性地执行节点排序。然而，当前实现中相关代码被注释，表明开发者意识到每帧排序的性能开销问题，为未来优化预留了接口。
|
||||
|
||||
**Diagram sources**
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L38)
|
||||
- [timer.md](file://doc/core/common/timer.md#L79-L91)
|
||||
|
||||
**Section sources**
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L38)
|
||||
- [timer.md](file://doc/core/common/timer.md#L79-L91)
|
||||
|
||||
## ECS系统数据同步
|
||||
|
||||
系统采用实体-组件-系统（ECS）架构实现视图与逻辑的完全解耦。BattleMoveComp作为数据组件承载移动状态，而EntityLayer作为视图容器负责可视化呈现。
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant BattleMoveSystem as BattleMoveSystem
|
||||
participant BattleMoveComp as BattleMoveComp
|
||||
participant HeroViewComp as HeroViewComp
|
||||
participant EntityLayer as EntityLayer
|
||||
BattleMoveSystem->>BattleMoveComp : 读取移动状态
|
||||
BattleMoveSystem->>HeroViewComp : 获取节点引用
|
||||
BattleMoveSystem->>HeroViewComp : 更新位置
|
||||
BattleMoveSystem->>BattleMoveSystem : updateRenderOrder()
|
||||
BattleMoveSystem->>HeroViewComp : setSiblingIndex()
|
||||
HeroViewComp->>EntityLayer : 节点层级更新
|
||||
```
|
||||
|
||||
当英雄或怪物实体被加载时，通过addChild方法将其节点添加到EntityLayer中，实现视图与逻辑的绑定：
|
||||
|
||||
**Section sources**
|
||||
- [Hero.ts](file://assets/script/game/hero/Hero.ts#L45-L55)
|
||||
- [Mon.ts](file://assets/script/game/hero/Mon.ts#L48-L58)
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts#L1-L34)
|
||||
|
||||
## 性能优化方案
|
||||
|
||||
### 对象池复用
|
||||
系统通过ECS框架内置的对象池机制实现组件和实体的高效复用。当实体被销毁时，其组件会被放入缓存池中，下次创建时优先从池中获取，避免频繁的内存分配与垃圾回收。
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
ENTITY["实体"] {
|
||||
string name PK
|
||||
boolean active
|
||||
}
|
||||
COMPONENT["组件"] {
|
||||
string type PK
|
||||
boolean pooled
|
||||
}
|
||||
ENTITY_POOL["实体池"] {
|
||||
int capacity
|
||||
int count
|
||||
}
|
||||
COMPONENT_POOL["组件池"] {
|
||||
int capacity
|
||||
int count
|
||||
}
|
||||
ENTITY ||--o{ COMPONENT : "包含"
|
||||
ENTITY_POOL }o--|| ENTITY : "存储"
|
||||
COMPONENT_POOL }o--|| COMPONENT : "存储"
|
||||
```
|
||||
|
||||
### 可见性裁剪
|
||||
虽然当前代码未显式实现可见性裁剪，但在BattleMoveSystem中通过阵营分组过滤和距离检测，间接实现了部分裁剪功能。系统只对同阵营的单位进行渲染层级计算，减少了不必要的处理。
|
||||
|
||||
### 批量更新策略
|
||||
通过0.2秒的定时器间隔，系统可以批量处理多个实体的位置更新和层级排序，而不是每帧都执行，有效降低了CPU开销。
|
||||
|
||||
**Section sources**
|
||||
- [ecs.md](file://ecs.md#L29-L87)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L38)
|
||||
- [BattleMoveSystem.ts](file://assets/script/game/common/ecs/position/BattleMoveSystem.ts#L1-L34)
|
||||
|
||||
## 结论
|
||||
EntityLayer作为动态实体容器，通过精心设计的Z轴层级管理机制和定时器更新策略，有效平衡了视觉效果与性能开销。其与ECS系统的深度集成实现了视图与逻辑的完美解耦，为游戏的可维护性和扩展性奠定了坚实基础。未来的优化方向包括启用定时排序、实现完整的可见性裁剪以及进一步优化对象池策略。
|
||||
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能够应对各种复杂的技能释放场景，确保游戏的高质量运行。
|
||||
269
.qoder/repowiki/zh/content/地图系统/地图视图/地图视图.md
Normal file
269
.qoder/repowiki/zh/content/地图系统/地图视图/地图视图.md
Normal file
@@ -0,0 +1,269 @@
|
||||
# 地图视图
|
||||
|
||||
<cite>
|
||||
**本文档引用的文件**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts)
|
||||
- [map.json](file://assets/resources/config/map/map.json)
|
||||
</cite>
|
||||
|
||||
## 目录
|
||||
1. [引言](#引言)
|
||||
2. [项目结构](#项目结构)
|
||||
3. [核心组件](#核心组件)
|
||||
4. [架构概述](#架构概述)
|
||||
5. [详细组件分析](#详细组件分析)
|
||||
6. [依赖分析](#依赖分析)
|
||||
7. [性能考虑](#性能考虑)
|
||||
8. [故障排除指南](#故障排除指南)
|
||||
9. [结论](#结论)
|
||||
|
||||
## 引言
|
||||
本文档深入解析 `MapViewComp` 作为地图表现层的核心作用，涵盖地图预制体加载、地图图层管理（背景、实体、技能等）以及 UV 动画效果的实现。结合 `MapView.ts` 和 `MapViewScene.ts` 阐述地图场景的构建流程与节点组织结构。分析 `MapLayer.ts` 和 `EntityLayer.ts` 如何实现分层渲染与实体挂载。阐述 `MoveUV.ts` 实现的动态纹理偏移技术用于模拟地图流动效果。最后提供自定义地图视觉风格、添加新图层及优化渲染性能的实践指南。
|
||||
|
||||
## 项目结构
|
||||
项目结构清晰地将地图相关逻辑分离到 `assets/script/game/map/` 目录下，采用 MVC 模式组织代码。`model` 目录存放地图数据模型，`view` 目录存放视图组件和图层管理，`view/map/layer` 子目录进一步细化了不同图层的实现。
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "地图系统"
|
||||
subgraph "模型层"
|
||||
MapModelComp[MapModelComp.ts]
|
||||
end
|
||||
subgraph "视图层"
|
||||
MapViewComp[MapViewComp.ts]
|
||||
MapViewScene[MapViewScene.ts]
|
||||
MoveUV[MoveUV.ts]
|
||||
subgraph "图层组件"
|
||||
MapLayer[MapLayer.ts]
|
||||
EntityLayer[EntityLayer.ts]
|
||||
SkillLayer[SkillLayer.ts]
|
||||
end
|
||||
end
|
||||
subgraph "控制层"
|
||||
GameMap[GameMap.ts]
|
||||
end
|
||||
end
|
||||
MapViewComp --> MapViewScene
|
||||
MapViewScene --> MapLayer
|
||||
MapViewScene --> EntityLayer
|
||||
MapViewScene --> SkillLayer
|
||||
MapViewComp --> MoveUV
|
||||
GameMap --> MapModelComp
|
||||
GameMap --> MapViewComp
|
||||
```
|
||||
|
||||
**Diagram sources**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts)
|
||||
|
||||
**Section sources**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts)
|
||||
|
||||
## 核心组件
|
||||
`MapViewComp` 是地图表现层的核心组件，负责协调地图场景的初始化和生命周期管理。它通过 `MapViewScene` 组件访问各个地图图层，并在 `start` 方法中建立引用关系。`MapModelComp` 定义了地图的基本属性，如初始地图编号和地图显示预制体路径。`GameMap` 类作为 ECS 实体，整合了模型和视图组件，提供地图加载的入口方法。
|
||||
|
||||
**Section sources**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts#L1-L43)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
|
||||
## 架构概述
|
||||
地图系统采用基于 ECS（Entity-Component-System）架构的设计模式，将地图数据（Model）、视图（View）和控制逻辑（Controller）分离。`GameMap` 实体持有 `MapModelComp` 和 `MapViewComp` 组件，实现了数据与表现的解耦。地图场景由 `MapViewScene` 组件管理，它通过属性装饰器关联了多个图层组件，包括 `MapLayer`（背景层）、`EntityLayer`（实体层）和 `SkillLayer`（技能层），形成了清晰的层次化结构。
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class GameMap {
|
||||
+MapModel : MapModelComp
|
||||
+MapView : MapViewComp
|
||||
+load() : void
|
||||
}
|
||||
class MapModelComp {
|
||||
+id : number
|
||||
+resPrefab : string
|
||||
+reset() : void
|
||||
}
|
||||
class MapViewComp {
|
||||
+scene : MapViewScene
|
||||
+start() : void
|
||||
+update(dt : number) : void
|
||||
}
|
||||
class MapViewScene {
|
||||
+camera : Camera
|
||||
+mapLayer : MapLayer
|
||||
+entityLayer : EntityLayer
|
||||
+SkillLayer : SkillLayer
|
||||
+isFollowPlayer : boolean
|
||||
+ratio : Vec2
|
||||
+init() : void
|
||||
+update(dt : number) : void
|
||||
}
|
||||
class MapLayer {
|
||||
+bgImg : Sprite
|
||||
+init() : void
|
||||
+clear() : void
|
||||
+bgImage : Sprite
|
||||
+width : number
|
||||
+height : number
|
||||
}
|
||||
class EntityLayer {
|
||||
+timer : Timer
|
||||
+update(dt : number) : void
|
||||
+clear() : void
|
||||
}
|
||||
class SkillLayer {
|
||||
+light : Prefab
|
||||
+doSkill() : void
|
||||
+clear() : void
|
||||
}
|
||||
GameMap --> MapModelComp : "包含"
|
||||
GameMap --> MapViewComp : "包含"
|
||||
MapViewComp --> MapViewScene : "引用"
|
||||
MapViewScene --> MapLayer : "引用"
|
||||
MapViewScene --> EntityLayer : "引用"
|
||||
MapViewScene --> SkillLayer : "引用"
|
||||
```
|
||||
|
||||
**Diagram sources**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts#L1-L43)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L47)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L39)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L1-L48)
|
||||
|
||||
## 详细组件分析
|
||||
|
||||
### MapViewComp 分析
|
||||
`MapViewComp` 组件作为地图视图的主控制器，负责地图场景的初始化和事件监听。在 `onLoad` 方法中，它可以监听全局事件，如角色添加或技能使用。`start` 方法中，它通过 `getComponent` 获取 `MapViewScene` 的引用，建立与地图场景的连接。该组件还包含一个 `Timer` 实例，可用于周期性任务的调度。
|
||||
|
||||
**Section sources**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
|
||||
### MapViewScene 分析
|
||||
`MapViewScene` 组件是地图场景的核心逻辑容器，它通过 Cocos Creator 的属性系统（`@property`）将场景中的各个节点和组件关联起来。这包括摄像机（`camera`）、背景层（`mapLayer`）、实体层（`entityLayer`）和技能层（`SkillLayer`）。`isFollowPlayer` 属性控制摄像机是否跟随玩家移动。`reset` 方法用于清理各个图层的状态，确保地图切换时的干净环境。
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant LoadingView as LoadingViewComp
|
||||
participant GameMap as GameMap
|
||||
participant MapView as MapViewComp
|
||||
participant MapViewScene as MapViewScene
|
||||
LoadingView->>GameMap : map.load()
|
||||
GameMap->>Oops : oops.res.load(resPrefab)
|
||||
Oops-->>GameMap : Prefab
|
||||
GameMap->>GameMap : instantiate(res)
|
||||
GameMap->>GameMap : add(map.getChildByName("map").getComponent(MapViewComp))
|
||||
MapView->>MapView : start()
|
||||
MapView->>MapView : getComponent(MapViewScene)
|
||||
MapViewScene->>MapViewScene : 初始化各图层引用
|
||||
```
|
||||
|
||||
**Diagram sources**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
- [LoadingViewComp.ts](file://assets/script/game/initialize/view/LoadingViewComp.ts#L1-L90)
|
||||
|
||||
### MapLayer 分析
|
||||
`MapLayer` 组件负责管理地图的背景图像。它通过 `@property(Sprite)` 装饰器引用一个 Sprite 组件（`bgImg`），用于显示地图背景。`init` 方法根据背景图的尺寸设置自身的宽高，`clear` 方法则用于清除当前的背景图片。`width` 和 `height` 属性通过访问 `bgImg` 的 `UITransform` 组件来获取实际尺寸。
|
||||
|
||||
**Section sources**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L47)
|
||||
|
||||
### EntityLayer 分析
|
||||
`EntityLayer` 组件管理地图上的所有游戏实体，如角色、怪物等。其 `update` 方法中包含一个定时器（`timer`），可用于定期执行深度排序等操作，以确保实体的正确渲染顺序。`clear` 方法遍历并清理所有子节点，为地图切换做准备。注释中提到深度排序可能成为性能瓶颈，建议在必要时优化为非每帧执行。
|
||||
|
||||
**Section sources**
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L39)
|
||||
|
||||
### MoveUV 分析
|
||||
`MoveUV` 组件实现了动态纹理偏移效果，用于模拟水流、云层移动等视觉效果。它通过 `moveSpeedX` 和 `moveSpeedY` 属性控制纹理在 X 和 Y 方向上的移动速度。在 `update` 方法中，它获取 `Sprite` 组件的 `spriteFrame`，修改其 `rect` 的 `x` 和 `y` 值，从而实现 UV 坐标的偏移。`wrapMode` 属性确保纹理在边缘处重复，形成无缝滚动效果。
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([MoveUV.update]) --> GetSprite["获取Sprite组件"]
|
||||
GetSprite --> CheckWrapMode{"WrapMode变化?"}
|
||||
CheckWrapMode --> |是| UpdateWrap["更新纹理WrapMode"]
|
||||
CheckWrapMode --> |否| UpdateRect["更新Rect坐标"]
|
||||
UpdateWrap --> UpdateRect
|
||||
UpdateRect --> ApplyRect["设置spriteFrame.rect"]
|
||||
ApplyRect --> MarkUpdate["标记渲染数据更新"]
|
||||
MarkUpdate --> End([结束])
|
||||
```
|
||||
|
||||
**Diagram sources**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L50)
|
||||
|
||||
## 依赖分析
|
||||
地图系统依赖于 Cocos Creator 引擎的核心模块（如 `cc`），以及项目中的 `oops-plugin-framework` 框架。`MapViewComp` 和 `MapViewScene` 依赖于 `oops` 对象进行资源加载和消息通信。`EntityLayer` 和 `SkillLayer` 依赖于框架中的 `Timer` 类。各图层组件之间通过 `MapViewScene` 进行协调，没有直接的相互依赖，保证了模块的独立性。
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
MapViewComp --> oops[Oops Framework]
|
||||
MapViewScene --> oops
|
||||
EntityLayer --> Timer[Timer Class]
|
||||
SkillLayer --> Timer
|
||||
SkillLayer --> oops
|
||||
MapViewComp --> MapViewScene
|
||||
MapViewScene --> MapLayer
|
||||
MapViewScene --> EntityLayer
|
||||
MapViewScene --> SkillLayer
|
||||
GameMap --> MapModelComp
|
||||
GameMap --> MapViewComp
|
||||
GameMap --> oops
|
||||
```
|
||||
|
||||
**Diagram sources**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L39)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L1-L48)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
|
||||
**Section sources**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L39)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L1-L48)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
|
||||
## 性能考虑
|
||||
- **深度排序**: `EntityLayer` 和 `SkillLayer` 中的每帧深度排序可能成为性能瓶颈，尤其是在实体数量众多时。建议根据实际需求，将排序频率降低（如每0.2秒一次）或采用空间分区等更高效的排序算法。
|
||||
- **纹理重复**: `MoveUV` 组件通过修改 `spriteFrame.rect` 来实现动画，这是一种轻量级的方法，避免了创建额外的动画帧，对性能友好。
|
||||
- **资源加载**: `GameMap.load()` 方法异步加载地图预制体，避免了主线程阻塞，保证了游戏的流畅性。
|
||||
- **节点清理**: `MapViewScene.reset()` 方法显式清理各图层的子节点，防止内存泄漏。
|
||||
|
||||
## 故障排除指南
|
||||
- **地图未显示**: 检查 `MapModelComp.resPrefab` 路径是否正确，确认预制体资源已正确导入。
|
||||
- **UV动画无效**: 确保应用 `MoveUV` 组件的精灵（Sprite）的纹理（Texture）Wrap Mode 设置为 `REPEAT`，否则偏移效果将不可见。
|
||||
- **实体层排序异常**: 如果发现实体渲染顺序错误，检查 `EntityLayer.update()` 中的排序逻辑是否被正确执行，或尝试调整 `Timer` 的间隔。
|
||||
- **摄像机不跟随**: 确认 `MapViewScene.isFollowPlayer` 属性已启用，并检查摄像机跟随的逻辑是否在其他地方被实现（当前代码中未找到具体实现）。
|
||||
|
||||
**Section sources**
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts#L1-L43)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L50)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L1-L39)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
|
||||
## 结论
|
||||
本项目中的地图视图系统设计清晰，采用 MVC 和 ECS 模式实现了良好的代码组织和可维护性。`MapViewComp` 和 `MapViewScene` 协同工作，构建了地图场景的骨架。通过 `MapLayer`、`EntityLayer` 和 `SkillLayer` 等组件实现了分层渲染，便于管理和优化。`MoveUV` 组件提供了一种简单有效的动态纹理动画方案。开发者可以基于此架构轻松扩展新功能，如添加新的图层类型或实现更复杂的地图特效。
|
||||
495
.qoder/repowiki/zh/content/地图系统/地图视图/地图视图控制.md
Normal file
495
.qoder/repowiki/zh/content/地图系统/地图视图/地图视图控制.md
Normal file
@@ -0,0 +1,495 @@
|
||||
# 地图视图控制
|
||||
|
||||
<cite>
|
||||
**本文档中引用的文件**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts)
|
||||
- [MapView.ts](file://assets/script/game/map/MapView.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts)
|
||||
- [GameEvent.ts](file://assets/script/game/common/config/GameEvent.ts)
|
||||
- [move.ts](file://assets/script/game/map/move.ts)
|
||||
</cite>
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
2. [项目结构](#项目结构)
|
||||
3. [核心组件](#核心组件)
|
||||
4. [架构概览](#架构概览)
|
||||
5. [详细组件分析](#详细组件分析)
|
||||
6. [依赖关系分析](#依赖关系分析)
|
||||
7. [性能考虑](#性能考虑)
|
||||
8. [故障排除指南](#故障排除指南)
|
||||
9. [结论](#结论)
|
||||
|
||||
## 简介
|
||||
|
||||
地图视图控制系统是Cocos Creator游戏引擎中负责地图渲染和用户交互的核心模块。该系统采用ECS（Entity-Component-System）架构模式，通过MapViewComp作为主要控制器，协调MapViewScene场景管理和各个视图层的渲染工作。系统实现了完整的地图生命周期管理，包括初始化、资源加载、事件监听、定时器管理等功能。
|
||||
|
||||
## 项目结构
|
||||
|
||||
地图视图控制系统的文件组织遵循清晰的层次结构：
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "地图视图控制架构"
|
||||
GameMap["GameMap<br/>游戏地图实体"]
|
||||
MapViewComp["MapViewComp<br/>地图视图组件"]
|
||||
MapViewScene["MapViewScene<br/>地图场景逻辑"]
|
||||
subgraph "视图层"
|
||||
MapLayer["MapLayer<br/>地图背景层"]
|
||||
EntityLayer["EntityLayer<br/>实体层"]
|
||||
SkillLayer["SkillLayer<br/>技能特效层"]
|
||||
end
|
||||
subgraph "模型组件"
|
||||
MapModelComp["MapModelComp<br/>地图模型组件"]
|
||||
end
|
||||
subgraph "事件系统"
|
||||
GameEvent["GameEvent<br/>游戏事件定义"]
|
||||
end
|
||||
end
|
||||
GameMap --> MapViewComp
|
||||
MapViewComp --> MapViewScene
|
||||
MapViewScene --> MapLayer
|
||||
MapViewScene --> EntityLayer
|
||||
MapViewScene --> SkillLayer
|
||||
MapViewComp --> MapModelComp
|
||||
GameEvent --> MapViewComp
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
|
||||
**章节来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
|
||||
## 核心组件
|
||||
|
||||
### GameMap - 游戏地图实体
|
||||
|
||||
GameMap是地图系统的根实体，继承自ecs.Entity，负责管理地图的完整生命周期。它通过ECS框架注册为游戏实体，包含MapModelComp和MapViewComp两个核心组件。
|
||||
|
||||
### MapViewComp - 地图视图控制器
|
||||
|
||||
MapViewComp作为地图表现层的主要控制器，承担以下职责：
|
||||
- 初始化地图场景环境
|
||||
- 管理资源加载流程
|
||||
- 处理生命周期事件
|
||||
- 协调与其他组件的交互
|
||||
|
||||
### MapViewScene - 场景逻辑管理器
|
||||
|
||||
MapViewScene负责具体的场景逻辑实现，包括：
|
||||
- 摄像机跟随逻辑
|
||||
- 层级结构管理
|
||||
- 场景状态控制
|
||||
- 更新循环处理
|
||||
|
||||
**章节来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L15-L36)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L12-L45)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L15-L77)
|
||||
|
||||
## 架构概览
|
||||
|
||||
地图视图控制系统采用分层架构设计，确保了良好的模块化和可维护性：
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant GM as GameMap
|
||||
participant MC as MapViewComp
|
||||
participant MS as MapViewScene
|
||||
participant ML as MapLayer
|
||||
participant EL as EntityLayer
|
||||
participant SL as SkillLayer
|
||||
GM->>MC : 创建地图实体
|
||||
MC->>MS : 获取场景组件
|
||||
MS->>ML : 初始化地图层
|
||||
MS->>EL : 初始化实体层
|
||||
MS->>SL : 初始化技能层
|
||||
MC->>MC : 启动事件监听
|
||||
MC->>MC : 启动定时器
|
||||
loop 游戏更新循环
|
||||
MC->>MS : 更新场景状态
|
||||
MS->>ML : 更新地图渲染
|
||||
MS->>EL : 更新实体渲染
|
||||
MS->>SL : 更新技能渲染
|
||||
end
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L25-L36)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L28-L32)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L42-L77)
|
||||
|
||||
## 详细组件分析
|
||||
|
||||
### MapViewComp - 地图视图控制器详解
|
||||
|
||||
MapViewComp是地图系统的核心控制器，实现了完整的生命周期管理和事件处理机制。
|
||||
|
||||
#### 生命周期管理
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([组件启动]) --> OnLoad["onLoad()<br/>监听全局事件"]
|
||||
OnLoad --> Start["start()<br/>获取场景实例"]
|
||||
Start --> InitScene["初始化场景<br/>scene = getComponent(MapViewScene)"]
|
||||
InitScene --> LoadData["load_data()<br/>加载数据"]
|
||||
LoadData --> UpdateLoop["update()<br/>主更新循环"]
|
||||
UpdateLoop --> Reset["reset()<br/>清理资源"]
|
||||
Reset --> End([组件销毁])
|
||||
UpdateLoop --> TimerCheck{"定时器检查"}
|
||||
TimerCheck --> |触发| TimerAction["执行定时任务"]
|
||||
TimerAction --> UpdateLoop
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L18-L45)
|
||||
|
||||
#### 事件监听与定时器管理
|
||||
|
||||
MapViewComp内部集成了Timer类来管理游戏定时器，提供了灵活的时间控制机制：
|
||||
|
||||
- **game_timer**: 主要游戏定时器，间隔为1秒
|
||||
- **EntityLayer.timer**: 实体层级定时器，间隔为0.2秒
|
||||
- **SkillLayer.timer**: 技能特效定时器，间隔为0.2秒
|
||||
|
||||
#### 资源加载机制
|
||||
|
||||
系统通过GameMap实体的load方法实现地图资源的异步加载：
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant GM as GameMap
|
||||
participant OOPS as Oops资源系统
|
||||
participant Prefab as 地图预制件
|
||||
participant MC as MapViewComp
|
||||
GM->>OOPS : 加载地图资源
|
||||
OOPS->>Prefab : 获取地图预制件
|
||||
Prefab->>GM : 返回实例化对象
|
||||
GM->>MC : 添加地图视图组件
|
||||
MC->>MC : 初始化组件状态
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L25-L36)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L28-L32)
|
||||
|
||||
**章节来源**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L12-L45)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L25-L36)
|
||||
|
||||
### MapViewScene - 场景逻辑管理器
|
||||
|
||||
MapViewScene负责具体的场景逻辑实现，是地图渲染的核心调度器。
|
||||
|
||||
#### 场景节点结构
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class MapViewScene {
|
||||
+Camera camera
|
||||
+Node layer
|
||||
+MapLayer mapLayer
|
||||
+Node floorLayer
|
||||
+EntityLayer entityLayer
|
||||
+SkillLayer SkillLayer
|
||||
+boolean isFollowPlayer
|
||||
+Vec2 ratio
|
||||
+onLoad() void
|
||||
+start() void
|
||||
+init() void
|
||||
+update(dt) void
|
||||
+reset() void
|
||||
+clear() void
|
||||
}
|
||||
class MapLayer {
|
||||
+Sprite bgImg
|
||||
+init() void
|
||||
+clear() void
|
||||
+width() number
|
||||
+height() number
|
||||
}
|
||||
class EntityLayer {
|
||||
+Timer timer
|
||||
+update(dt) void
|
||||
+clear() void
|
||||
}
|
||||
class SkillLayer {
|
||||
+Prefab light
|
||||
+Timer timer
|
||||
+onLoad() void
|
||||
+doSkill() void
|
||||
+update(dt) void
|
||||
+clear() void
|
||||
}
|
||||
MapViewScene --> MapLayer : "管理"
|
||||
MapViewScene --> EntityLayer : "管理"
|
||||
MapViewScene --> SkillLayer : "管理"
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L15-L77)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L15-L47)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L18-L39)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L18-L48)
|
||||
|
||||
#### 摄像机跟随逻辑
|
||||
|
||||
MapViewScene实现了摄像机跟随玩家的功能，通过isFollowPlayer属性控制：
|
||||
|
||||
- **启用跟随**: 当isFollowPlayer为true时，摄像机会根据玩家位置自动调整
|
||||
- **比例转换**: 使用ratio属性在2D坐标和3D坐标之间进行转换
|
||||
- **平滑移动**: 通过update方法实现摄像机的平滑跟随效果
|
||||
|
||||
#### 层级管理
|
||||
|
||||
系统采用分层渲染架构，每一层都有特定的职责：
|
||||
|
||||
1. **floorLayer**: 地面层，负责地形和背景元素
|
||||
2. **entityLayer**: 实体层，负责游戏角色和物体
|
||||
3. **SkillLayer**: 技能特效层，负责技能动画和特效
|
||||
4. **mapLayer**: 地图背景层，负责静态地图纹理
|
||||
|
||||
**章节来源**
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L15-L77)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L15-L47)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L18-L39)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L18-L48)
|
||||
|
||||
### 视图层组件详解
|
||||
|
||||
#### MapLayer - 地图背景层
|
||||
|
||||
MapLayer专门负责地图背景的渲染和管理：
|
||||
|
||||
- **背景图片管理**: 通过bgImg属性管理地图背景精灵
|
||||
- **尺寸控制**: 提供width和height属性控制地图尺寸
|
||||
- **清理功能**: clear方法用于清除背景图片
|
||||
|
||||
#### EntityLayer - 实体层
|
||||
|
||||
EntityLayer负责游戏实体的渲染和管理：
|
||||
|
||||
- **深度排序**: 通过zIndexSort方法对实体进行深度排序
|
||||
- **定时更新**: 使用Timer进行定期的实体状态更新
|
||||
- **性能优化**: 可配置的更新频率以平衡性能和效果
|
||||
|
||||
#### SkillLayer - 技能特效层
|
||||
|
||||
SkillLayer专门处理技能特效和动画：
|
||||
|
||||
- **特效预制件**: 通过light属性管理技能特效预制件
|
||||
- **事件响应**: 响应技能使用事件播放特效
|
||||
- **清理机制**: 提供clear方法清理所有特效对象
|
||||
|
||||
**章节来源**
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L15-L47)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts#L18-L39)
|
||||
- [SkillLayer.ts](file://assets/script/game/map/view/map/layer/SkillLayer.ts#L18-L48)
|
||||
|
||||
## 依赖关系分析
|
||||
|
||||
地图视图控制系统的依赖关系体现了清晰的分层架构：
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
subgraph "外部依赖"
|
||||
Cocos["Cocos Creator Engine"]
|
||||
Oops["Oops Framework"]
|
||||
ECS["ECS Framework"]
|
||||
end
|
||||
subgraph "核心组件"
|
||||
GameMap["GameMap"]
|
||||
MapViewComp["MapViewComp"]
|
||||
MapViewScene["MapViewScene"]
|
||||
end
|
||||
subgraph "视图层"
|
||||
MapLayer["MapLayer"]
|
||||
EntityLayer["EntityLayer"]
|
||||
SkillLayer["SkillLayer"]
|
||||
end
|
||||
subgraph "模型组件"
|
||||
MapModelComp["MapModelComp"]
|
||||
end
|
||||
subgraph "工具类"
|
||||
Timer["Timer"]
|
||||
GameEvent["GameEvent"]
|
||||
end
|
||||
Cocos --> GameMap
|
||||
Oops --> GameMap
|
||||
ECS --> GameMap
|
||||
GameMap --> MapViewComp
|
||||
MapViewComp --> MapViewScene
|
||||
MapViewScene --> MapLayer
|
||||
MapViewScene --> EntityLayer
|
||||
MapViewScene --> SkillLayer
|
||||
GameMap --> MapModelComp
|
||||
MapViewComp --> Timer
|
||||
MapViewComp --> GameEvent
|
||||
EntityLayer --> Timer
|
||||
SkillLayer --> Timer
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L10)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L11)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L10)
|
||||
|
||||
### 组件间通信
|
||||
|
||||
系统通过多种方式实现组件间的通信：
|
||||
|
||||
1. **事件系统**: 使用oops.message进行全局事件通信
|
||||
2. **组件引用**: 通过getComponent方法直接访问其他组件
|
||||
3. **实体管理**: 通过ecs.Entity管理组件关系
|
||||
4. **配置共享**: 通过SingletonModuleComp共享配置数据
|
||||
|
||||
**章节来源**
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L36)
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L1-L45)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts#L1-L77)
|
||||
|
||||
## 性能考虑
|
||||
|
||||
### 内存管理
|
||||
|
||||
系统在多个层面实现了内存优化：
|
||||
|
||||
1. **组件复用**: 通过ECS框架实现组件的高效复用
|
||||
2. **延迟加载**: 地图资源采用异步加载策略
|
||||
3. **及时清理**: 在reset方法中清理不再需要的对象引用
|
||||
4. **定时器管理**: 合理配置定时器间隔避免过度计算
|
||||
|
||||
### 渲染优化
|
||||
|
||||
- **分层渲染**: 通过不同层级减少不必要的渲染计算
|
||||
- **批量操作**: 使用removeAllChildren等批量方法提高效率
|
||||
- **条件更新**: update方法中仅在必要时执行更新逻辑
|
||||
|
||||
### 事件处理优化
|
||||
|
||||
- **事件去重**: 避免重复监听相同事件
|
||||
- **及时解绑**: 在组件销毁时及时移除事件监听器
|
||||
- **弱引用**: 使用弱引用避免循环引用导致的内存泄漏
|
||||
|
||||
## 故障排除指南
|
||||
|
||||
### 常见问题及解决方案
|
||||
|
||||
#### 资源未释放问题
|
||||
|
||||
**问题描述**: 地图切换或重新加载时出现内存泄漏
|
||||
|
||||
**解决方案**:
|
||||
1. 在reset方法中添加资源清理逻辑
|
||||
2. 确保所有事件监听器都被正确移除
|
||||
3. 使用Timer的stop方法停止定时器
|
||||
|
||||
```typescript
|
||||
// 示例清理代码
|
||||
reset(): void {
|
||||
// 清理事件监听
|
||||
oops.message.offAll(this);
|
||||
|
||||
// 清理定时器
|
||||
this.game_timer.stop();
|
||||
|
||||
// 清理场景资源
|
||||
if (this.scene) {
|
||||
this.scene.reset();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 事件重复监听问题
|
||||
|
||||
**问题描述**: 地图多次加载导致事件监听器重复绑定
|
||||
|
||||
**解决方案**:
|
||||
1. 在onLoad方法中添加事件监听前的检查
|
||||
2. 使用唯一标识符管理事件监听器
|
||||
3. 在组件销毁时确保所有监听器被移除
|
||||
|
||||
```typescript
|
||||
// 示例事件监听解决方案
|
||||
async onLoad(){
|
||||
// 检查是否已存在监听器
|
||||
if (!this.eventListeners) {
|
||||
this.eventListeners = new Set();
|
||||
this.setupEventListeners();
|
||||
}
|
||||
}
|
||||
|
||||
setupEventListeners(): void {
|
||||
const events = [
|
||||
GameEvent.MAP_MOVE_END_LEFT,
|
||||
GameEvent.MAP_MOVE_END_RIGHT
|
||||
];
|
||||
|
||||
events.forEach(event => {
|
||||
oops.message.on(event, this.handleEvent, this);
|
||||
this.eventListeners.add(event);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### 定时器管理问题
|
||||
|
||||
**问题描述**: 定时器未正确停止导致持续运行
|
||||
|
||||
**解决方案**:
|
||||
1. 在组件销毁时停止所有定时器
|
||||
2. 使用try-catch块保护定时器操作
|
||||
3. 提供定时器状态检查方法
|
||||
|
||||
```typescript
|
||||
// 示例定时器管理
|
||||
class MapViewComp extends CCComp {
|
||||
private timers: Timer[] = [];
|
||||
|
||||
createTimer(interval: number): Timer {
|
||||
const timer = new Timer(interval);
|
||||
this.timers.push(timer);
|
||||
return timer;
|
||||
}
|
||||
|
||||
onDestroy(): void {
|
||||
// 停止所有定时器
|
||||
this.timers.forEach(timer => timer.stop());
|
||||
this.timers = [];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 调试技巧
|
||||
|
||||
1. **日志记录**: 在关键方法中添加调试日志
|
||||
2. **状态检查**: 定期检查组件状态的一致性
|
||||
3. **性能监控**: 使用Cocos Creator的性能分析工具
|
||||
4. **单元测试**: 为关键功能编写单元测试
|
||||
|
||||
**章节来源**
|
||||
- [MapViewComp.ts](file://assets/script/game/map/view/MapViewComp.ts#L25-L30)
|
||||
- [move.ts](file://assets/script/game/map/move.ts#L18-L25)
|
||||
|
||||
## 结论
|
||||
|
||||
地图视图控制系统展现了现代游戏开发中优秀的架构设计原则。通过ECS模式的应用，系统实现了高度的模块化和可扩展性。MapViewComp作为核心控制器，有效协调了场景逻辑、视图渲染和用户交互之间的关系。
|
||||
|
||||
系统的主要优势包括：
|
||||
|
||||
1. **清晰的分层架构**: 从实体到组件再到视图层的清晰分离
|
||||
2. **灵活的生命周期管理**: 完整的组件生命周期支持
|
||||
3. **高效的资源管理**: 异步加载和及时清理机制
|
||||
4. **强大的事件系统**: 基于消息传递的松耦合通信
|
||||
5. **完善的错误处理**: 全面的资源清理和异常处理机制
|
||||
|
||||
对于开发者而言，理解和掌握这套系统的设计理念和实现细节，有助于构建更加稳定和高性能的游戏应用。同时，系统提供的故障排除指南和最佳实践，为后续的维护和扩展奠定了坚实的基础。
|
||||
300
.qoder/repowiki/zh/content/地图系统/地图视图/地图视觉特效.md
Normal file
300
.qoder/repowiki/zh/content/地图系统/地图视图/地图视觉特效.md
Normal file
@@ -0,0 +1,300 @@
|
||||
# 地图视觉特效
|
||||
|
||||
<cite>
|
||||
**本文档中引用的文件**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts)
|
||||
- [EntityLayer.ts](file://assets/script/game/map/view/map/layer/EntityLayer.ts)
|
||||
- [light.ts](file://assets/script/game/map/view/map/layer/light.ts)
|
||||
- [MapViewScene.ts](file://assets/script/game/map/view/MapViewScene.ts)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts)
|
||||
- [MapModelComp.ts](file://assets/script/game/map/model/MapModelComp.ts)
|
||||
</cite>
|
||||
|
||||
## 目录
|
||||
1. [简介](#简介)
|
||||
2. [项目结构](#项目结构)
|
||||
3. [核心组件](#核心组件)
|
||||
4. [架构概览](#架构概览)
|
||||
5. [详细组件分析](#详细组件分析)
|
||||
6. [依赖关系分析](#依赖关系分析)
|
||||
7. [性能考虑](#性能考虑)
|
||||
8. [故障排除指南](#故障排除指南)
|
||||
9. [结论](#结论)
|
||||
|
||||
## 简介
|
||||
|
||||
MoveUV组件是Cocos Creator游戏引擎中用于实现动态纹理滚动效果的核心组件。它通过动态修改SpriteFrame的rect偏移量，实现了流畅的纹理动画效果，广泛应用于模拟水流、移动地面、动态背景等视觉特效。该组件提供了灵活的速度控制和纹理包装模式设置，支持多种动画效果的实现。
|
||||
|
||||
## 项目结构
|
||||
|
||||
MoveUV组件位于地图视图模块中，与其他地图相关组件协同工作，形成完整的地图渲染系统。
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
subgraph "地图视图模块"
|
||||
MoveUV["MoveUV组件<br/>纹理滚动控制器"]
|
||||
MapLayer["MapLayer<br/>地图背景层"]
|
||||
EntityLayer["EntityLayer<br/>实体对象层"]
|
||||
Light["light<br/>光照效果"]
|
||||
end
|
||||
subgraph "地图模型"
|
||||
GameMap["GameMap<br/>游戏地图实体"]
|
||||
MapModel["MapModelComp<br/>地图模型组件"]
|
||||
end
|
||||
subgraph "渲染系统"
|
||||
Sprite["Sprite组件<br/>精灵渲染器"]
|
||||
SpriteFrame["SpriteFrame<br/>精灵帧"]
|
||||
Texture2D["Texture2D<br/>纹理资源"]
|
||||
end
|
||||
GameMap --> MapModel
|
||||
GameMap --> MoveUV
|
||||
MoveUV --> Sprite
|
||||
Sprite --> SpriteFrame
|
||||
SpriteFrame --> Texture2D
|
||||
MapLayer --> Sprite
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L50)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L47)
|
||||
- [GameMap.ts](file://assets/script/game/map/GameMap.ts#L1-L35)
|
||||
|
||||
**章节来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L50)
|
||||
- [MapLayer.ts](file://assets/script/game/map/view/map/layer/MapLayer.ts#L1-L47)
|
||||
|
||||
## 核心组件
|
||||
|
||||
MoveUV组件是一个专门负责纹理滚动动画的脚本组件，具有以下核心特性：
|
||||
|
||||
### 主要功能特性
|
||||
- **动态UV坐标控制**：通过修改SpriteFrame的rect属性实现纹理偏移
|
||||
- **双轴速度控制**：独立控制X轴和Y轴的滚动速度
|
||||
- **多种包装模式**：支持REPEAT、MIRRORED_REPEAT、CLAMP_TO_EDGE等纹理包装方式
|
||||
- **高效渲染优化**：仅在必要时标记渲染数据更新，避免不必要的重绘
|
||||
|
||||
### 核心属性配置
|
||||
- `moveSpeedX`：X轴方向的滚动速度，正值向右，负值向左
|
||||
- `moveSpeedY`：Y轴方向的滚动速度，正值向上，负值向下
|
||||
- `wrapMode`：纹理包装模式，决定纹理超出边界时的行为
|
||||
|
||||
**章节来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L8-L15)
|
||||
|
||||
## 架构概览
|
||||
|
||||
MoveUV组件采用组件化设计，与Cocos Creator的渲染管线紧密集成，形成了高效的纹理动画系统。
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Scene as "场景初始化"
|
||||
participant MoveUV as "MoveUV组件"
|
||||
participant Sprite as "Sprite组件"
|
||||
participant Render as "渲染系统"
|
||||
Scene->>MoveUV : onLoad()
|
||||
MoveUV->>Sprite : 获取Sprite组件
|
||||
Sprite-->>MoveUV : 返回Sprite实例
|
||||
MoveUV->>MoveUV : 初始化_rect变量
|
||||
MoveUV->>Sprite : 设置packable=false
|
||||
loop 每帧更新
|
||||
Scene->>MoveUV : update(dt)
|
||||
MoveUV->>MoveUV : 检查wrapMode变化
|
||||
MoveUV->>Sprite : 更新_rect坐标
|
||||
MoveUV->>Sprite : markForUpdateRenderData()
|
||||
Sprite->>Render : 触发渲染更新
|
||||
Render-->>Scene : 显示更新后的纹理
|
||||
end
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L25-L49)
|
||||
|
||||
## 详细组件分析
|
||||
|
||||
### MoveUV组件核心实现
|
||||
|
||||
MoveUV组件通过精确控制SpriteFrame的rect属性来实现纹理滚动效果，其核心算法如下：
|
||||
|
||||
#### 初始化阶段（onLoad）
|
||||
|
||||
组件在加载时执行以下初始化操作：
|
||||
|
||||
1. **组件获取验证**：确保当前节点包含有效的Sprite组件
|
||||
2. **初始状态设置**：复制原始SpriteFrame的rect作为起始坐标
|
||||
3. **性能优化配置**：禁用spriteFrame的packable属性以提高渲染效率
|
||||
|
||||
#### 动画更新机制（update）
|
||||
|
||||
每帧更新过程包含以下关键步骤：
|
||||
|
||||
1. **包装模式检查**：比较当前wrapMode与上次记录值，如有变化则更新纹理设置
|
||||
2. **UV坐标计算**：基于移动速度和时间增量计算新的坐标位置
|
||||
3. **渲染数据标记**：通知渲染系统更新纹理数据
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([update函数开始]) --> CheckWrapMode["检查wrapMode变化"]
|
||||
CheckWrapMode --> WrapChanged{"包装模式改变?"}
|
||||
WrapChanged --> |是| UpdateWrapMode["更新纹理包装模式"]
|
||||
WrapChanged --> |否| SkipWrap["跳过包装模式更新"]
|
||||
UpdateWrapMode --> CalcNewPos["计算新UV坐标<br/>x += moveSpeedX * dt<br/>y += moveSpeedY * dt"]
|
||||
SkipWrap --> CalcNewPos
|
||||
CalcNewPos --> UpdateRect["更新SpriteFrame.rect"]
|
||||
UpdateRect --> MarkRender["markForUpdateRenderData()"]
|
||||
MarkRender --> End([update函数结束])
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L35-L49)
|
||||
|
||||
**章节来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L25-L49)
|
||||
|
||||
### 纹理包装模式详解
|
||||
|
||||
MoveUV组件支持三种主要的纹理包装模式，每种模式对应不同的视觉效果：
|
||||
|
||||
| 包装模式 | 值 | 视觉效果 | 应用场景 |
|
||||
|---------|---|---------|---------|
|
||||
| REPEAT | 1001 | 纹理重复平铺 | 流水、地面移动、背景循环 |
|
||||
| MIRRORED_REPEAT | 1002 | 镜像重复平铺 | 对称动画、特殊效果 |
|
||||
| CLAMP_TO_EDGE | 1000 | 边缘拉伸 | 单次动画、边缘处理 |
|
||||
|
||||
#### REPEAT模式的工作原理
|
||||
|
||||
当wrapMode设置为REPEAT时，纹理会在超出边界时自动重复平铺。MoveUV组件通过不断修改rect的x和y坐标，创造出无限循环的滚动效果：
|
||||
|
||||
- **水平滚动**：通过增加rect.x值实现从左到右的滚动
|
||||
- **垂直滚动**：通过增加rect.y值实现从下到上的滚动
|
||||
- **循环无缝**：由于REPEAT模式的存在，当纹理到达边界时会自动重新开始
|
||||
|
||||
**章节来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L13-L15)
|
||||
|
||||
### 性能优化策略
|
||||
|
||||
MoveUV组件采用了多项性能优化措施：
|
||||
|
||||
#### 渲染数据更新优化
|
||||
- **条件性标记**：仅在必要时调用`markForUpdateRenderData()`，避免频繁的渲染更新
|
||||
- **包装模式缓存**：通过`_currentWrapMode`变量避免重复设置相同的包装模式
|
||||
- **最小化操作**：每次更新只修改必要的rect坐标，减少计算开销
|
||||
|
||||
#### 内存管理优化
|
||||
- **packable禁用**：设置spriteFrame.packable为false，防止不必要的内存分配
|
||||
- **局部变量复用**：使用预定义的_rect变量，避免频繁的对象创建
|
||||
|
||||
**章节来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L30-L32)
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L47-L49)
|
||||
|
||||
## 依赖关系分析
|
||||
|
||||
MoveUV组件与多个系统和组件存在密切的依赖关系：
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
subgraph "外部依赖"
|
||||
CC["Cocos Creator引擎"]
|
||||
Texture2D["Texture2D类"]
|
||||
Sprite["Sprite组件"]
|
||||
Rect["rect工具函数"]
|
||||
end
|
||||
subgraph "内部组件"
|
||||
MoveUV["MoveUV组件"]
|
||||
MapLayer["MapLayer地图层"]
|
||||
EntityLayer["EntityLayer实体层"]
|
||||
end
|
||||
CC --> Texture2D
|
||||
CC --> Sprite
|
||||
CC --> Rect
|
||||
MoveUV --> Texture2D
|
||||
MoveUV --> Sprite
|
||||
MoveUV --> Rect
|
||||
MapLayer --> MoveUV
|
||||
EntityLayer --> MoveUV
|
||||
```
|
||||
|
||||
**图表来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L7)
|
||||
|
||||
### 关键依赖说明
|
||||
|
||||
1. **Cocos Creator引擎**：MoveUV组件依赖于引擎提供的核心功能
|
||||
2. **Texture2D类**：用于设置纹理的包装模式
|
||||
3. **Sprite组件**：作为MoveUV的目标渲染对象
|
||||
4. **rect工具**：提供矩形区域的创建和操作功能
|
||||
|
||||
**章节来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L1-L7)
|
||||
|
||||
## 性能考虑
|
||||
|
||||
### 渲染性能优化
|
||||
|
||||
MoveUV组件的设计充分考虑了渲染性能，采用了以下优化策略：
|
||||
|
||||
#### 减少渲染调用
|
||||
- **批量更新**：通过`markForUpdateRenderData()`统一标记渲染更新
|
||||
- **条件检查**：只有在包装模式发生变化时才更新纹理设置
|
||||
- **最小化操作**：每次更新只修改必要的rect坐标
|
||||
|
||||
#### 内存使用优化
|
||||
- **对象复用**：使用预定义的rect对象避免频繁创建
|
||||
- **资源管理**：正确设置spriteFrame的packable属性
|
||||
|
||||
### 性能监控建议
|
||||
|
||||
为了确保最佳性能，建议开发者注意以下几点：
|
||||
|
||||
1. **避免频繁切换包装模式**：包装模式的切换会触发额外的GPU操作
|
||||
2. **合理设置移动速度**：过高的速度可能导致视觉效果不自然
|
||||
3. **监控渲染调用频率**：确保不会出现过度的渲染更新
|
||||
|
||||
## 故障排除指南
|
||||
|
||||
### 常见问题及解决方案
|
||||
|
||||
#### 1. 纹理滚动不生效
|
||||
**可能原因**：
|
||||
- Sprite组件未正确添加到节点
|
||||
- MoveUV组件未正确挂载
|
||||
- 纹理资源未正确设置
|
||||
|
||||
**解决方案**：
|
||||
- 检查节点是否包含Sprite组件
|
||||
- 验证MoveUV组件已正确挂载
|
||||
- 确认纹理资源已正确加载
|
||||
|
||||
#### 2. 包装模式设置无效
|
||||
**可能原因**：
|
||||
- wrapMode属性值设置错误
|
||||
- 纹理格式不支持特定包装模式
|
||||
|
||||
**解决方案**：
|
||||
- 使用正确的枚举值（REPEAT、MIRRORED_REPEAT、CLAMP_TO_EDGE）
|
||||
- 检查纹理格式兼容性
|
||||
|
||||
#### 3. 性能问题
|
||||
**可能原因**：
|
||||
- 频繁的渲染数据更新
|
||||
- 不当的移动速度设置
|
||||
|
||||
**解决方案**：
|
||||
- 优化移动速度设置
|
||||
- 减少不必要的组件更新
|
||||
|
||||
**章节来源**
|
||||
- [MoveUV.ts](file://assets/script/game/map/view/MoveUV.ts#L26-L32)
|
||||
|
||||
## 结论
|
||||
|
||||
MoveUV组件是一个设计精良的地图视觉特效组件，通过巧妙地利用Cocos Creator的SpriteFrame系统，实现了高效且灵活的纹理滚动效果。其核心优势包括：
|
||||
|
||||
1. **简洁的API设计**：通过简单的属性配置即可实现复杂的动画效果
|
||||
2. **优秀的性能表现**：采用多种优化策略，确保流畅的运行性能
|
||||
3. **灵活的效果控制**：支持多种包装模式和速度配置
|
||||
4. **良好的集成性**：与Cocos Creator生态系统完美融合
|
||||
|
||||
该组件为游戏开发中的动态背景、流水效果、移动地面等视觉需求提供了标准化的解决方案，是地图视觉特效开发的重要工具。开发者可以基于MoveUV组件快速实现各种创意性的纹理动画效果，同时保持良好的性能表现。
|
||||
Reference in New Issue
Block a user