game009_weiren/AvatarTestScene.md

头像测试场景设置指南

创建测试场景

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）