213 lines
6.2 KiB
Markdown
213 lines
6.2 KiB
Markdown
# 语言粒子系统 - Unity实现
|
||
|
||
## 概述
|
||
|
||
这是一个基于P5.js原型的语言粒子互动系统，在Unity中复现。系统通过文字粒子的连接和交互，表现情绪的传播与平复过程。
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
Language/
|
||
├── LanguageParticleSystem_Summary.md # 效果总结文档
|
||
├── README.md # 使用说明（本文件）
|
||
├── TextParticle.cs # 文字粒子基类
|
||
├── FloatingTextParticle.cs # 背景浮动文字粒子
|
||
├── CandidateParticle.cs # 可交互候选粒子
|
||
├── WaveformPoint.cs # 波形点数据
|
||
├── EffectPropagation.cs # 效果传播系统
|
||
├── ConnectionRenderer.cs # 连接线渲染器
|
||
├── WaveformRenderer.cs # 波形渲染器
|
||
└── LanguageParticleManager.cs # 主管理器
|
||
```
|
||
|
||
## 使用步骤
|
||
|
||
### 1. 场景设置
|
||
|
||
1. 创建一个空GameObject，命名为"LanguageParticleSystem"
|
||
2. 添加`LanguageParticleManager`组件
|
||
|
||
### 2. Canvas设置
|
||
|
||
系统会自动创建一个10x10的World Space Canvas，也可以手动配置：
|
||
|
||
1. 创建Canvas（Render Mode: World Space）
|
||
2. 设置Canvas尺寸为10x10
|
||
3. 将Canvas拖到Manager的`worldCanvas`字段
|
||
|
||
### 3. 参数配置
|
||
|
||
在Inspector中调整以下参数：
|
||
|
||
#### Canvas设置
|
||
- **Canvas Size**: Canvas大小（默认10）
|
||
- **Text Margin**: 文字区域边距（默认1）
|
||
|
||
#### 粒子数量
|
||
- **Floating Count**: 背景浮动文字数量（默认100）
|
||
- **Candidate Count**: 候选粒子数量（默认50）
|
||
- **Red Particle Count**: 红色目标粒子数量（默认8）
|
||
|
||
#### 游戏参数
|
||
- **Connection Distance**: 连接距离阈值（默认2，Unity单位）
|
||
- **Target Sentence**: 目标句子（默认"别过来我感觉害怕"）
|
||
|
||
#### 波形参数
|
||
- **Waveform Amplitude**: 波形振幅（默认0.3）
|
||
- **Interaction Radius**: 交互半径（默认0.5）
|
||
|
||
### 4. 依赖项
|
||
|
||
确保项目中已安装以下插件：
|
||
|
||
- **TextMeshPro**: Unity内置，用于中文文字渲染
|
||
- **DOTween**: 用于动画效果
|
||
- **Shapes**: 用于绘制连接线和波形
|
||
|
||
### 5. 运行
|
||
|
||
点击Play即可运行。系统会自动：
|
||
1. 生成背景浮动文字
|
||
2. 生成候选粒子
|
||
3. 随机选择8个红色目标粒子
|
||
|
||
## 游戏玩法
|
||
|
||
### 第一阶段：连接红色粒子
|
||
|
||
**目标**：让所有红色粒子连接成一个整体，且与蓝色粒子分离
|
||
|
||
**交互**：
|
||
- 左键点击：产生排斥波，推开附近粒子
|
||
- 右键点击：产生涟漪，吸引附近粒子
|
||
|
||
**机制**：
|
||
- 红色粒子与蓝色粒子接触时，效果会传播（蓝色→橙色）
|
||
- 效果可以链式传播（最多8步）
|
||
- 橙色粒子字符变化加速，带有振动和光晕效果
|
||
|
||
### 第二阶段：文字揭示
|
||
|
||
完成第一阶段后：
|
||
1. 红色粒子自动排列成水平一行
|
||
2. 蓝色粒子淡出
|
||
3. 红色粒子逐个揭示目标文字："别过来我感觉害怕"
|
||
4. 文字出现剧烈抖动（焦虑效果）
|
||
|
||
### 第三阶段：波形交互
|
||
|
||
文字显示完成后：
|
||
1. 文字下方出现异常波形（基于Perlin噪声）
|
||
2. 文字随波形剧烈抖动和漂浮
|
||
3. **目标**：通过鼠标抚平波形，平复文字的焦虑
|
||
|
||
**交互**：
|
||
- 按住鼠标左键并拖动，抚平附近的波形
|
||
- 波形有"抵抗力"，需要持续按住（0.5-1.5秒）
|
||
- 拖动速度越快，抚平效果越强
|
||
|
||
**效果**：
|
||
- 波形从红色异常噪波→蓝色规律正弦波
|
||
- 文字抖动和漂浮逐渐减弱
|
||
- 波形完全稳定后，文字开始消散
|
||
- 所有文字消散后，游戏自动重置
|
||
|
||
## 技术要点
|
||
|
||
### 1. 粒子系统
|
||
|
||
- 使用TextMeshPro渲染中文字符
|
||
- 粒子具有速度、边界检测、相互排斥
|
||
- 字符定期随机变化
|
||
|
||
### 2. 连接检测
|
||
|
||
- 使用空间距离判断粒子间连接
|
||
- 连接关系存储在`connections`列表中
|
||
- 用于效果传播和完成条件判断
|
||
|
||
### 3. 效果传播
|
||
|
||
- 红色粒子与蓝色粒子建立新连接时触发
|
||
- 使用队列实现链式传播
|
||
- 脉冲动画沿连接线移动
|
||
|
||
### 4. 波形系统
|
||
|
||
- 使用Perlin噪声生成异常波形（多层噪声叠加）
|
||
- 每个波形点关联一个文字粒子
|
||
- 波形点有独立的抚平进度和抵抗力
|
||
- 抚平后波形变为规律正弦波
|
||
|
||
### 5. 渲染系统
|
||
|
||
- 使用Shapes的ImmediateModeShapeDrawer
|
||
- 连接线：实时绘制粒子间连线
|
||
- 波形：使用Polyline绘制平滑曲线
|
||
- 效果：脉冲光点、箭头、进度环
|
||
|
||
## 性能优化建议
|
||
|
||
1. **对象池**：粒子频繁创建销毁时使用对象池
|
||
2. **空间分区**：粒子数量超过100时考虑Grid分区
|
||
3. **LOD**：远距离粒子降低更新频率
|
||
4. **批量绘制**：Shapes已支持批量绘制
|
||
5. **异步处理**：连接检测可使用Job System
|
||
|
||
## 自定义扩展
|
||
|
||
### 添加新的文字内容
|
||
|
||
修改`CandidateParticle.cs`中的字符集：
|
||
```csharp
|
||
protected static string chineseChars = "你的字符集...";
|
||
protected static string[] chineseWords = { "词组1", "词组2", ... };
|
||
```
|
||
|
||
### 修改目标句子
|
||
|
||
在Manager的Inspector中修改`Target Sentence`字段
|
||
|
||
### 调整波形特性
|
||
|
||
修改`WaveformPoint.cs`中的噪声参数：
|
||
```csharp
|
||
noiseScale1 = 0.05f; // 低频噪声
|
||
noiseScale2 = 0.15f; // 中频噪声
|
||
noiseScale3 = 0.4f; // 高频噪声
|
||
```
|
||
|
||
### 添加音效
|
||
|
||
在以下关键事件添加音效：
|
||
- `TriggerEffectPropagation()`: 效果传播时
|
||
- `StartCompletionSequence()`: 完成第一阶段时
|
||
- `WaveformPoint.Update()`: 波形抚平时（`calmAmount >= 0.95f`）
|
||
- `ResetGame()`: 游戏重置时
|
||
|
||
## 调试技巧
|
||
|
||
1. **显示连接关系**：在Scene视图中观察连接线
|
||
2. **波形可视化**：查看波形点的`calmAmount`值
|
||
3. **粒子状态**：在Inspector中实时查看粒子的`isRed`、`isOrange`等状态
|
||
4. **帧率监控**：粒子数量过多时注意帧率
|
||
|
||
## 常见问题
|
||
|
||
### Q: 文字显示为方块？
|
||
A: 确保使用支持中文的字体，并在TextMeshPro Font Asset中生成中文字符
|
||
|
||
### Q: 连接线不显示？
|
||
A: 检查Shapes插件是否正确安装，Camera是否正确配置
|
||
|
||
### Q: 波形交互没反应？
|
||
A: 检查鼠标世界坐标转换是否正确，确保Camera能看到粒子
|
||
|
||
### Q: 性能问题？
|
||
A: 减少粒子数量，或启用对象池和空间分区优化
|
||
|
||
## 许可
|
||
|
||
本项目基于P5.js原型复现，供学习和研究使用。
|
||
|