Clawdbot整合Qwen3-32B应用场景：跨境电商独立站AI导购助手落地

最近在学习的过程中发现一个土豆兄弟的开发教程特地来做个记录只需要记录第一个角色选择界面的代码效果图如下鼠标划入下方按钮时会修改对应的大UI 该功能一个使用了 个代码文件1 每个按钮 预制体身上挂载的脚本2角色选择界面的管理脚本

随机选择的脚本下面是用DS写的一个

总结

总体架构和功能这个系统实现了角色选择界面主要功能包括从 JSON 文件加载角色数据动态生成角色选择按钮鼠标悬停显示角色详细信息点击选择角色并进入武器选择界面随机选择已解锁角色

具体脚本分析

RoleUI.cs- 角色按钮管理脚本核心方法和技术IPointerEnterHandler/IPointerExitHandlerUnity UI 事件接口实现鼠标悬停/离开效果Resources.Load()动态加载图片资源CanvasGroup 控制使用 alpha、interactable、blocksRaycasts 控制UI显隐事件监听使用 AddListener 绑定按钮点击事件重点实现csharp//

根据解锁状态显示不同头像 if (roleData.unlock

{ _Icon.sprite Resources.LoadSprite(roleData.avatar); } else { _Icon.sprite Resources.LoadSprite(Image/UI/锁); } //

鼠标悬停更新详细信息面板 public void OnPointerEnter(PointerEventData eventData) { _BakeImage.color new Color(207/255f, 207/255f, 207/255f); RenewUI(roleDaTa); // 更新大面板信息 } //

点击选择角色流程 public void ButtonClick(RoleDaTa r) { GameManger.Instance.currentRole r; // 保存选择 // 隐藏角色界面显示武器界面 // 实例化角色详情到武器界面 }

RoleRandom.cs- 随机选择按钮核心方法动态收集解锁角色遍历所有角色UI筛选已解锁的随机算法调用 GameManager 的随机方法鼠标交互悬停时隐藏大信息面板重点实现csharp// 筛选已解锁角色 foreach (RoleUI role in JueSheSet.instance._roleList.GetComponentsInChildrenRoleUI()) { if (role.roleDaTa.unlock

{ unlockedRoles.Add(role); } } // 随机选择并执行选择逻辑 RoleUI r GameManger.Instance.RandomONE(unlockedRoles) as RoleUI; r.RenewUI(r.roleDaTa); // 更新显示 r.ButtonClick(r.roleDaTa); // 执行选择

JueSheSet.cs- 主控制器核心方法JSON 数据解析使用 Newtonsoft.Json 库动态UI生成根据数据实例化预制体单例模式方便全局访问重点实现csharp//

JSON数据加载和解析 RoleDataJson Resources.LoadTextAsset(Data/role); RoleDatas JsonConvert.DeserializeObjectListRoleDaTa(RoleDataJson.text); //

动态生成角色按钮 foreach (RoleDaTa a in RoleDatas) { RoleUI r Instantiate(Role_Prefab, _roleList).GetComponentRoleUI(); r.setData(a); // 传递数据给每个UI项 }

系统亮点和重点部分

数据驱动设计角色数据完全由 JSON 文件控制便于修改和扩展使用 Newtonsoft.Json 进行专业级的 JSON 解析

UI 状态管理使用 CanvasGroup 三属性协同控制 UI 状态alpha透明度interactable是否可交互blocksRaycasts是否阻挡射线点击预制体复用动态生成

交互反馈鼠标悬停背景色变化 信息面板更新解锁状态不同图标显示 不同信息展示随机选择实时筛选 自动选择

流程控制csharp// 角色选择 → 武器选择 的流程

点击角色按钮

保存选择到 GameManager

隐藏角色界面 (JueSheSet.instance._group)

克隆角色详情到武器界面

显示武器界面 (Weaponselection_WoQiSet.instance._group)

潜在改进建议代码优化点资源加载优化避免频繁 Resources.Load考虑使用 Addressables 或 AssetBundle事件监听清理按钮点击监听后需要清理避免内存泄漏性能考虑Random.cs 每次点击都遍历所有角色对于大量角色可能影响性能错误处理缺少 Resources.Load 失败的处理设计模式应用可以使用观察者模式优化 UI 更新考虑使用工厂模式创建角色 UI状态模式管理界面切换

五、

总结这个系统展示了一个完整的数据驱动的 UI 系统特点是模块化每个脚本职责清晰可扩展JSON 数据配置易于添加新角色交互友好丰富的视觉反馈流程完整从角色选择到武器选择的完整流程特别是 JSON 数据解析 动态 UI 生成的组合在 Unity 游戏开发中是非常实用的模式适用于角色选择、道具商店、成就系统等多种场景。

代码1 创建一个类用来接收Json反序列化输出的信息using System; using System.Collections; using System.Collections.Generic; using UnityEngine; //角色数据类用来存储角色的各种属性信息 [Serializable] public class RoleDaTa { public int id; //角色ID public string name; //角色名称 public string avatar; //角色头像路径 public string describe; //角色描述 public int slot; //角色槽位 public int record; //通关记录 public int unlock; //解锁状态 public string unlockConditions;//解锁条件 }代码2 角色选择管理脚本用来解析Json将解析好的文件存储到一个列表中然后遍历列表调用预制体脚本中的SetData方法去设定每个按钮的图标以及信息using System.Collections; using System.Collections.Generic; using System.Net; using Newtonsoft.Json; using TMPro; using UnityEngine; using UnityEngine.UI; //角色选择UI脚本 public class JueSheSet : MonoBehaviour { public ListRoleDaTa RoleDatas new ListRoleDaTa();//角色数据列表 //textasset类型可以用来存储所有文字类型素材这里用于存储JSON文件内容 public TextAsset RoleDataJson; //角色数据的JSON文件 public Transform _roleList;//角色列表UI对象 public GameObject Role_Prefab;//角色预制体 [Header(角色信息面板)] public TextMeshProUGUI _roleName; //角色名称UI文本 public Image _roleIcon; //角色头像UI图片 public TextMeshProUGUI _roleDescribe; //角色描述UI文本 public TextMeshProUGUI _Text3; //通过记录 public CanvasGroup _group; //角色信息面板的CanvasGroup组件用于控制显示和隐藏 public GameObject _RoleDatails; //角色详细信息面板 public CanvasGroup _roleContent; //角色详细信息父对象 public static JueSheSet instance; //单例实例 private void Awake() { instance this; Role_Prefab Resources.LoadGameObject(Prefabs/Role);//加载角色预制体 //加载角色数据JSON文件加载Resources文件夹下的Data文件夹中的role.json文件 //首先通过Resources.Load方法加载JSON文件 RoleDataJson Resources.LoadTextAsset(Data/role); //将JSON数据反序列化为角色数据列表 //取得JSON文件中的数据并转换为ListRoleDaTa类型 //*************************** //JsonConvert类来自于Newtonsoft.Json命名空间,DeserializeObject方法用于将JSON字符串转换为指定类型的对象 //*************************** //其中尖括号内指定了目标类型这里是ListRoleDaTa小括号内传入的是JSON字符串 RoleDatas JsonConvert.DeserializeObjectListRoleDaTa(RoleDataJson.text); _roleName GameObject.Find(RoleName).GetComponentTextMeshProUGUI(); _roleIcon GameObject.Find(Avatar_Role).GetComponentImage(); _roleDescribe GameObject.Find(RoleDescribe).GetComponentTextMeshProUGUI(); _Text3 GameObject.Find(Text

.GetComponentTextMeshProUGUI(); //初始化CanvasGroup组件默认显示角色信息面板 _group GetComponentCanvasGroup(); _group.alpha 1; //初始显示 _group.blocksRaycasts true; _group.interactable true; _RoleDatails GameObject.Find(RoleDetails); _roleContent GameObject.Find(RoleContent).GetComponentCanvasGroup(); } void Start() { //遍历角色数据列表为每个角色创建一个UI元素 //在RoleDatas列表通过JSON获取的角色数据的列表进行遍历。

遍历的每个元素是RoleDaTa类型RoleDaTa是自己写的管理角色信息的类 foreach (RoleDaTa a in RoleDatas) { RoleUI r Instantiate(Role_Prefab, _roleList).GetComponentRoleUI();//实例化角色预制体作为子对象放在角色列表UI对象下 //调用角色UI脚本的setData方法传入当前角色数据设置UI显示内容 r.setData(a); } } }代码3 每个按钮预制体挂载的脚本脚本的主要功能处理指针进入进出修改按钮颜色以及每个按钮图标的动态生成按钮点击事件的处理方式using System.Diagnostics; using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; //这个脚本用于角色选择预制体的管理 //主要功能

通过JueSheSet脚本传递过来的数据设定角色选择预制体的显示内容 //

加入指针进入事件当鼠标划入预制体时更新角色信息面板的内容 //

加入按钮点击事件当点击选择按钮时记录选择的角色并打开武器选择界面 //

加入指针退出事件当鼠标划出预制体时恢复预制体的背景颜色 //

根据角色解锁状态显示不同的头像和信息 public class RoleUI : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler { public RoleDaTa roleDaTa; //角色数据对象 public Image _BakeImage; //角色选择背景图片 public Image _Icon; //角色头像图片 public Button _Button; //选择按钮 private void Awake() { _Button GetComponentButton(); //获取按钮组件 _BakeImage GetComponentImage(); _Icon GetComponentsInChildrenImage()[1]; //获取子对象中的头像图片组件 } /// summary /// 设置角色数据的方法别的脚本调用这个方法的时候传入角色数据对象我们根据这些数据来设置预制体显示的内容 /// 这个脚本挂载到角色选择预制体上用来设置预制体显示的角色数据例如角色名称、头像等 /// /summary /// param nameroleData/param public void setData(RoleDaTa roleData) { roleDaTa roleData; if (roleData.unlock

{ _Icon.sprite Resources.LoadSprite(roleData.avatar); //加载角色头像图片资源 } else { _Icon.sprite Resources.LoadSprite(Image/UI/锁); //加载锁的图片资源 } _Button.onClick.AddListener(() { ButtonClick(roleDaTa); } ); } /// summary /// 点击选择按钮时调用的方法,把选择的角色传递给游戏管理器并打开武器选择界面 /// /summary /// param namer/param public void ButtonClick(RoleDaTa r) { //记录选择的角色 GameManger.Instance.currentRole r; //关闭角色选择界面 JueSheSet.instance._group.alpha 0; //隐藏角色信息面板 JueSheSet.instance._group.interactable false;//隐藏角色信息面板 JueSheSet.instance._group.blocksRaycasts false; //隐藏角色信息面板 //克隆角色的UI GameObject go Instantiate(JueSheSet.instance._RoleDatails, Weaponselection_WoQiSet.instance._WeaponDetails.transform); go.transform.SetSiblingIndex(

; //将克隆的角色UI放在武器选择界面的最前面 //打开武器选择界面 Weaponselection_WoQiSet.instance._group.alpha 1; //隐藏角色信息面板 Weaponselection_WoQiSet.instance._group.interactable true;//隐藏角色信息面板 Weaponselection_WoQiSet.instance._group.blocksRaycasts true; //隐藏角色信息面板 } //检测鼠标进入事件 public void OnPointerEnter(PointerEventData eventData) { _BakeImage.color new Color(207 / 255f, 207 / 255f, 207 / 255f); //鼠标进入时改变背景颜色 //鼠标划入时更新角色信息面板 RenewUI(roleDaTa); //显示大屏ui if (JueSheSet.instance._roleContent.alpha

{ JueSheSet.instance._roleContent.alpha 1; } } //设定大的UI更新方法 public void RenewUI(RoleDaTa r) { //如果没解锁

UI显示为锁

显示解锁条件 if (r.unlock

{ JueSheSet.instance._roleName.text ???; JueSheSet.instance._roleIcon.sprite Resources.LoadSprite(Image/UI/锁);//玩家头像的图片资源加载 JueSheSet.instance._roleDescribe.text r.unlockConditions;//描述 JueSheSet.instance._Text

text 尚无记录;//记录 } else //如果解锁了 { JueSheSet.instance._roleName.text r.name; JueSheSet.instance._roleIcon.sprite Resources.LoadSprite(r.avatar);//玩家头像的图片资源加载 JueSheSet.instance._roleDescribe.text r.describe;//描述 JueSheSet.instance._Text

text GetRecord(r.record); } } /// summary /// 根据JSON文件中的record字段返回对应的记录字符串 /// /summary /// returns/returns public string GetRecord(int a) { string end ; switch (a) { case -1: end 尚无记录; break; case 0: end 通过危险0; break; case 1: end 通过危险1; break; case 2: end 通过危险2; break; case 3: end 通过危险3; break; case 4: end 通过危险4; break; case 5: end 通过危险5; break; } return end; } //检测鼠标退出事件 public void OnPointerExit(PointerEventData eventData) { _BakeImage.color new Color(32 / 255f, 32 / 255f, 32 / 255f); //鼠标划出时改变背景颜色 } }代码4 随机选择角色 点击该按钮随机获取一个角色的信息进行指定using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; public class RoleRandom : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler { //角色随机选择按钮脚本 public Image Bakeimage; //背景图片 public Button button; //按钮组件 public ListRoleUI unlockedRoles new ListRoleUI(); //角色数据列表 private void Awake() { Bakeimage GetComponentImage(); button GetComponentButton(); } private void Start() { button.onClick.AddListener(() { //如果角色为解锁状态加入到列表中 foreach (RoleUI role in JueSheSet.instance._roleList.GetComponentsInChildrenRoleUI()) { if (role.roleDaTa.unlock

{ unlockedRoles.Add(role); } } //通过调用GameManager类的手写的随机方法从解锁的角色列表中随机选择一个角色 RoleUI r GameManger.Instance.RandomONE(unlockedRoles) as RoleUI; r.RenewUI(r.roleDaTa); //更新大屏显示的角色信息 r.ButtonClick(r.roleDaTa); //调用按钮点击方法选择该角色 }); } /// summary /// 如果鼠标划入按钮修改按钮的背景色并且关闭大屏 /// /summary /// param nameeventData/param public void OnPointerEnter(PointerEventData eventData) { Bakeimage.color new Color(207 / 255f, 207 / 255f, 207 / 255f); JueSheSet.instance._roleContent.alpha 0; //关闭大屏显示 } public void OnPointerExit(PointerEventData eventData) { Bakeimage.color new Color(34 / 255f, 34 / 255f, 34 / 255f); } // Update is called once per frame void Update() { } }

猎奇91-猎奇应用