# 名单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. 通过代码加载头像 以下是在游戏逻辑中加载头像的示例: ```typescript // 预加载多个头像 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和槽位节点已正确设置 - 检查头像文件名格式是否符合要求