# 头像测试场景设置指南

## 创建测试场景

1. 在 Cocos Creator 中，创建一个新场景，命名为 `AvatarTestScene`
2. 保存到 `assets/Scenes/` 目录

## 场景层级结构

构建以下节点层级：

```
Canvas
├── StatusLabel       (Label组件：显示状态信息)
├── AvatarContainer   (含Layout组件：网格或水平布局)
│   └── AvatarTemplate (模板节点：包含头像和标签)
│       ├── Sprite    (头像显示组件)
│       └── Label     (头像标签，显示ID和状态)
└── Controller        (添加AvatarShowcase组件)
```

## 详细设置步骤

### 1. 创建基本节点

- 创建 Canvas 节点（场景自带）
- 添加 StatusLabel 节点，添加 Label 组件
- 添加 AvatarContainer 节点，添加 Layout 组件
- 添加 Controller 节点，将用于挂载控制脚本

### 2. 设置 Layout 组件

在 AvatarContainer 节点上：
- Type: Grid 或 Horizontal
- ResizeMode: Container
- 设置适当的间距 (padding、spacing)

### 3. 创建头像模板

- 在 AvatarContainer 下创建 AvatarTemplate 节点
- 添加 Sprite 组件（用于显示头像）
- 添加一个子节点，使用 Label 组件显示信息
- **注意**：保持模板节点可见（在运行时会被隐藏）

### 4. 设置 AvatarShowcase 组件

将 AvatarShowcase.ts 脚本添加到 Controller 节点，并设置：

- avatarContainer: 拖拽 AvatarContainer 节点
- avatarTemplate: 拖拽 AvatarTemplate 节点
- statusLabel: 拖拽 StatusLabel 节点
- characterIds: 设置角色ID数组 [1, 3, 5, 7]
  - **重要**: 在属性检查器中点击 "+" 按钮添加元素，然后设置每个值
  - 无法直接粘贴数组，必须单独添加每个元素
- avatarVariant: 设置为 5 (对应 avatar_X.5)
- autoRefresh: 可选开启自动刷新
- refreshInterval: 如果启用自动刷新，设置间隔秒数

## 运行测试

运行场景后，AvatarShowcase 将自动：

1. 隐藏模板节点
2. 为每个指定的角色ID创建一个头像节点
3. 尝试加载主要路径的头像
4. 如果主要路径失败，尝试备用路径
5. 显示加载状态和结果

## 故障排除

如果头像显示不出来，检查：

1. 控制台输出，查看具体的加载错误
2. 资源路径是否正确 (avatars/X/avatar_X.5)
3. 资源文件是否存在于相应的目录
4. Sprite 组件是否正确引用

### 常见错误解决方案

- **数组类型错误**: 确保在import时引入了CCInteger，并在属性定义中使用 `type: [CCInteger]`
- **找不到资源**: 检查resources文件夹结构是否正确，文件名是否匹配
- **模板节点问题**: 确保模板节点上有Sprite组件，子节点上有Label组件

## 优化选项

- 调整 Layout 组件参数改变排列方式
- 修改 AvatarShowcase.ts 中的 characterIds 测试不同角色
- 修改 avatarVariant 属性测试不同的头像变体（如 avatar_X.1 至 avatar_X.5）