# 解码器条纹 Prefab 待实现功能

## 📋 当前状态

解码器条纹相关逻辑已暂时注释，作为独立 prefab 后续配置。

## 🎯 需要实现的功能

### 1. Prefab 结构

解码器条纹应该作为一个独立的 Prefab，包含以下结构：

```
DecoderStripPrefab
├── Background (Image - 半透明背景)
├── Hole 1 (透明区域 - 第一个孔洞)
├── Hole 2 (透明区域 - 第二个孔洞)
├── Hole 3 (透明区域 - 第三个孔洞)
└── Text Elements (固定文字，如："要来了"、"被骂了"等)
```

### 2. 孔洞配置数据

参考 web 原型的 `DECODER_DATA`：

```javascript
const DECODER_DATA = [
    { type: 'hole', r: 0, c: 0 },  // 孔洞 1: 显示"临检"
    { type: 'text', r: 0, c: 1, text: "要" },
    { type: 'text', r: 0, c: 2, text: "来了" },
    { type: 'text', r: 0, c: 3, text: "，" },
    { type: 'text', r: 0, c: 4, text: "不合" },
    { type: 'text', r: 1, c: 0, text: "格" },
    { type: 'hole', r: 1, c: 1 },  // 孔洞 2: 显示"英里"
    { type: 'text', r: 1, c: 2, text: "被" },
    { type: 'text', r: 1, c: 3, text: "骂" },
    { type: 'text', r: 1, c: 4, text: "了" },
    { type: 'text', r: 2, c: 0, text: "，" },
    { type: 'text', r: 2, c: 1, text: "这" },
    { type: 'text', r: 2, c: 2, text: "让我" },
    { type: 'text', r: 2, c: 3, text: "很" },
    { type: 'hole', r: 2, c: 4 },  // 孔洞 3: 显示"担心"
];
```

### 3. 孔洞生成逻辑

需要创建一个脚本，根据配置数据动态生成孔洞：

```csharp
// 示例伪代码
public class DecoderStripGenerator : MonoBehaviour
{
    [System.Serializable]
    public class StripElement
    {
        public enum ElementType { Hole, Text }
        public ElementType type;
        public int row;
        public int col;
        public string text;  // 如果是文本元素
    }
    
    public List<StripElement> stripData;
    public float cellSize = 45f;
    public float cellGap = 2f;
    
    public void GenerateStrip()
    {
        foreach (var element in stripData)
        {
            if (element.type == StripElement.ElementType.Hole)
            {
                CreateHole(element.row, element.col);
            }
            else
            {
                CreateText(element.row, element.col, element.text);
            }
        }
    }
    
    private void CreateHole(int row, int col)
    {
        // 创建透明区域，让下方网格显示出来
        // 可以使用 Mask 或 Canvas Group 实现
    }
    
    private void CreateText(int row, int col, string text)
    {
        // 创建固定文字
        // 使用 TMP_Text 组件
    }
}
```

### 4. 孔洞渲染方式

有几种实现方式：

#### 方式 A：使用 Mask 组件
- 背景使用 Image 组件
- 孔洞位置使用 Mask 组件让下方内容显示出来
- 优点：简单直观
- 缺点：性能开销较大

#### 方式 B：使用 Canvas Group
- 孔洞位置设置 Canvas Group alpha = 0
- 优点：性能较好
- 缺点：不能真正"透视"，只是隐藏

#### 方式 C：使用 Shader（推荐）
- 自定义 Shader 实现孔洞效果
- 在指定区域让背景透明
- 优点：性能最好，效果最灵活
- 缺点：需要编写 Shader

#### 方式 D：使用 Stencil Buffer
- 使用 Stencil 实现遮罩效果
- 孔洞区域不渲染背景
- 优点：性能好，效果好
- 缺点：实现较复杂

### 5. 拖拽功能

解码器条纹需要支持拖拽，已有 `AnalysisDecoderStrip.cs` 组件实现了基础拖拽功能。

需要确保：
- 条纹可以在网格上自由拖动
- 拖动时能实时显示下方网格内容
- 能够精确对齐到网格位置

### 6. 位置对齐

条纹位置需要能够对齐到网格：

```csharp
// 吸附到最近的网格位置
public Vector2Int SnapToGrid(Vector2 worldPos, float cellSize, float cellGap)
{
    float unit = cellSize + cellGap;
    int col = Mathf.RoundToInt(worldPos.x / unit);
    int row = Mathf.RoundToInt(-worldPos.y / unit);
    return new Vector2Int(row, col);
}
```

## 🔧 实现步骤建议

### 第一步：创建基础 Prefab（5分钟）
1. 创建 Image 作为背景（半透明青色）
2. 添加 AnalysisDecoderStrip 组件（已实现拖拽）
3. 添加 Canvas Group（用于淡入淡出）
4. 添加 Outline（边框效果）

### 第二步：实现孔洞渲染（30分钟）
1. 选择一种渲染方式（推荐从简单的开始）
2. 创建孔洞生成脚本
3. 根据配置数据生成孔洞

### 第三步：添加固定文字（10分钟）
1. 在条纹上添加固定文字 TMP_Text
2. 根据配置数据定位文字位置

### 第四步：测试和调优（20分钟）
1. 测试孔洞是否正确显示下方网格
2. 测试拖拽功能是否流畅
3. 测试位置对齐是否准确

## 📝 配置示例

```csharp
// 在 Inspector 中配置
stripData = new List<StripElement>
{
    new StripElement { type = ElementType.Hole, row = 0, col = 0 },
    new StripElement { type = ElementType.Text, row = 0, col = 1, text = "要" },
    new StripElement { type = ElementType.Text, row = 0, col = 2, text = "来了" },
    // ... 更多元素
};
```

## 🎨 视觉效果参考

参考 web 原型中的解码器条纹：
- 半透明青色背景 (`rgba(0, 30, 30, 0.95)`)
- 青色边框 (`#00FFFF`)
- 孔洞处完全透明，显示下方网格
- 固定文字为青色，带发光效果

## 🚀 快速测试方式

在完全实现孔洞之前，可以先：
1. 使用简单的透明 Image 作为孔洞占位
2. 手动在 Unity 中创建 3 个透明区域
3. 验证拖拽和位置对齐功能
4. 验证验证逻辑是否正确

## ⚠️ 注意事项

1. **层级关系**：条纹要在网格上方，Z 轴稍微靠前
2. **渲染顺序**：确保孔洞区域不会遮挡下方网格
3. **性能考虑**：如果网格很大，要注意孔洞渲染的性能
4. **拖拽响应**：确保拖拽时不会阻塞其他 UI 交互

## 📚 相关文件

- `AnalysisDecoderStrip.cs` - 已实现的拖拽组件
- `AnalysisModeManager.cs` - 主管理器（已注释条纹生成逻辑）
- `WebPrototype/index.html` - Web 原型参考（第 185-268 行）

## ✅ 完成后需要

1. 取消注释 `AnalysisModeManager.cs` 中的相关代码
2. 将 Decoder Strip Prefab 拖入 AnalysisModeManager 的 `Decoder Strip` 字段
3. 测试完整流程：初始化 → 过滤分析 → 拖动条纹 → 验证

---

**当前优先级**：低（可以先验证其他功能）
**预计实现时间**：1-2 小时
**难度评级**：⭐⭐⭐（中等）