game009_weiren/assets/docs/RosterUI_Setup_Guide.md

名单UI系统设置指南

这个指南将帮助你在游戏中实现名单UI系统，包括未来添加学生头像的功能。

系统概述

名单UI系统包含两个主要组件：

1. RosterManager: 控制名单UI面板的显示/隐藏，管理学生头像显示
2. RosterTrigger: 处理点击名单图片的事件

设置步骤

1. 创建名单UI面板

1. 在Hierarchy中创建一个新的Canvas节点（如果还没有）
2. 在Canvas下创建一个名为"RosterPanel"的Node节点
3. 设置RosterPanel的位置和大小，通常是全屏或居中的面板
4. 添加以下子节点:
   • Background: 添加Sprite组件，使用你的名单底图
   • CloseButton: 添加Button组件，设置为关闭按钮
   • AvatarContainer: (可选) 创建一个节点用于未来放置头像

2. 添加RosterManager组件

1. 选择你的Canvas或游戏管理器节点
2. 添加RosterManager组件（Component -> Add Component -> RosterManager）
3. 在Inspector中设置:
   • Roster Panel: 拖放RosterPanel节点
   • Close Button: 拖放CloseButton节点
   • Roster Animation: (可选)如果你有动画，拖放Animation组件
   • Avatar Container: (可选)拖放AvatarContainer节点
   • Avatar Resource Path: (可选)设置头像资源的路径，默认为"avatars/"

3. 设置名单触发器

1. 找到你想要作为点击目标的名单图片节点
2. 添加RosterTrigger组件（Component -> Add Component -> RosterTrigger）
3. 在Inspector中设置:
   • Roster Manager: 拖放有RosterManager组件的节点

头像功能设置 (未来功能)

1. 准备头像资源

1. 将所有头像图片放在 resources/avatars/ 目录下
2. 命名格式应为: avatar_{ID}.png，如 avatar_1.png, avatar_2.png 等

2. 设置头像槽位

1. 在AvatarContainer下创建多个Sprite节点，每个作为一个头像槽位
2. 为每个槽位节点指定唯一名称，如 "slot1", "slot2" 等
3. 每个槽位应包含一个Sprite组件

3. 通过代码加载头像

以下是在游戏逻辑中加载头像的示例:

// 预加载多个头像
const rosterManager = this.getComponent(RosterManager);
rosterManager.preloadAvatars(['1', '2', '3']);

// 显示特定头像到特定槽位
rosterManager.showAvatar('slot1', '1'); // 将avatar_1.png显示到slot1位置

常见问题

1. 如果点击事件没有触发: 确保名单图片节点添加了BoxCollider2D组件
2. 如果关闭按钮不起作用: 检查是否正确设置了Button组件和引用
3. 如果名单面板不显示: 检查RosterPanel节点是否正确引用，以及其active状态
4. 如果头像不显示:
   • 检查资源路径是否正确
   • 确保AvatarContainer和槽位节点已正确设置
   • 检查头像文件名格式是否符合要求