refactor(game): 移除已弃用的事件常量
- 删除 UpdateHero 和 UpdateFightHero 事件 - 移除 MISSION_UPDATE 事件常量 - 优化游戏事件枚举定义
This commit is contained in:
panw
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