很久没有打新的代码了，国庆节闲的无聊，突然想起来一年前似乎画过一个饼（在商店系统NGUI版里面画的），说是日后会持续更新UGUI版本 的商店系统的制作，今天请大家来吃饼。（免费吃饼，大家放心吃！）

首先，制作一款商店系统，都是根据策划的策划案需求来制作的。我们先接到了策划案。具体大致是：界面右上角有一个商店的功能按钮，点开就会出现商店面板，面板上面有一个可以隐藏面板的按钮，面板鼠标可以拖动查看商品，商品条包含商品图像，商品价格和商品购买按钮这三部分组成。其中购买成功或者购买失败都会有小黑款提示字符出现提醒玩家，购买成功就扣除金币，并且自动放入玩家背包。如果玩家背包已满就自动触发替换面板让玩家选择替换一个物品。

明确需求之后，我们首先大致拼凑一下UI面板的大致模样。（UI拼接省略）

对于每一个商品，我们只需要拼接好其中一个小组件即可（可复用）

我们现在对其中一个小组件编写代码逻辑：

using NicoleFrameWork;
using UnityEngine;
using UnityEngine.U2D;
using UnityEngine.UI;public class ShopItem : BasePanel
{private ShopInfo _shopInfo;/// <summary>/// 初始化/// </summary>public void Init(ShopInfo shopInfo){_shopInfo = shopInfo;ChangeType();//还有图像没有处理 等待美术资源GetControl<Text>("txtMoney").text = $"${shopInfo.Money}";GetControl<Text>("txtName").text = _shopInfo.Name;GetControl<Button>("BtnBuy").onClick.AddListener(() =>{//如果是金币不足就显示货币不足if(MyCardGameMgr.Instance.PlayerMoney<_shopInfo.Money)UIMgr.Instance.GetPanel<ShopPanel>((panel) =>{panel.ChangeBuyTip("金币不足");});//如果货币充足就显示购买成功else{MyCardGameMgr.Instance.PlayerMoney -= _shopInfo.Money;UIMgr.Instance.GetPanel<GamePanel>((panel) =>{panel.ChangeMoney();});UIMgr.Instance.GetPanel<ShopPanel>((panel) =>{panel.ChangeBuyTip("购买成功");});ChangeType();//如果没有if (Bag.Instance.num < MyCardGameMgr.MaxGrids){for (int i=0;i<MyCardGameMgr.MaxGrids;i++){if (!Bag.Instance.GridItems[i].IsHasInfo){Bag.Instance.GridItems[i].Init(_shopInfo.ItemID);break;}}}//如果上限 就替换else{UIMgr.Instance.ShowPanel<TiHuanPanel>(E_LoadingMethod.Res,E_UI_Layer.Top,false, (panel) =>{panel.itemInfos = BinaryMgr.Instance.GetTable<ItemInfoContainer>().DataDic[_shopInfo.ItemID];panel.eChooseTypes = E_ChooseType.Null;});}}});string[] str;str = TextUtil.SplitStr(_shopInfo.Icon, E_SplitType.Underline);GetControl<Image>("ShopIcon").sprite=ResMgr.Instance.Load<SpriteAtlas>(str[0]).GetSprite(str[1]);str = null;}/// <summary>/// 改变玩家的购买状态（根据玩家金币数量）/// </summary>public void ChangeType(){if (MyCardGameMgr.Instance.PlayerMoney < _shopInfo.Money)GetControl<Button>("BtnBuy").image.color = Color.gray;elseGetControl<Button>("BtnBuy").image.color = Color.white;}public override void ShowMe(){}public override void HideMe(){}
}

其中，对于购买按钮以及购买是否成功制作了一些相关逻辑，对于背包已满的情况做出了逻辑处理。（对于每个小组件都做出了初始化的操作）初始化采用二进制数据读取excel列表的方式。（其中如果玩家金币不足就将购买按钮置灰，我是直接调用函数使用的，当然可以直接用事件中心自动分发事件）

一个小组件就做好了，想要完成一整个商店就需要很多小组件，那么我们制作商店面板逻辑，使之加载小组件，并且将其他依次初始化达到不同的效果：

using NicoleFrameWork;
using UnityEngine;
using UnityEngine.UI;public class ShopPanel : BasePanel
{// Start is called before the first frame updatevoid Start(){GetControl<Button>("BtnClose").onClick.AddListener(() =>{UIMgr.Instance.HidePanel<ShopPanel>(true);});Init();}/// <summary>/// 初始化/// </summary>public void Init(){//隐藏提示内容GetControl<Image>("ShopTip").gameObject.SetActive(false);for (int i = 0; i < MyCardGameMgr.Instance.ShopInfoContainers.DataDic.Count; i++){GameObject obj=PoolMgr.Instance.GetPoolObj("UI/ShopItem");obj.transform.position = new Vector3(11.6f,  i * (-120), 0);obj.transform.SetParent(GetControl<ScrollRect>("ShopScr").content,false);obj.GetComponent<ShopItem>().Init(MyCardGameMgr.Instance.ShopInfoContainers.DataDic[i+1]);}GetControl<ScrollRect>("ShopScr").content.sizeDelta =new Vector2(0, 120 * MyCardGameMgr.Instance.ShopInfoContainers.DataDic.Count);}/// <summary>/// 更改购买提示内容/// </summary>public void ChangeBuyTip(string txtTip){GetControl<Text>("txtTip").text = txtTip;GetControl<Image>("ShopTip").gameObject.SetActive(true);Invoke("HideTip",0.8f);}private void HideTip()=>GetControl<Image>("ShopTip").gameObject.SetActive(false);public override void ShowMe(){}public override void HideMe(){}
}

此处使用resources加载了小组件，然后对组件进行初始化并且代码将其顺序排列，还制作了购买成功与否的提示条逻辑，相对来讲代码比较简单。

以上就是使用UGUI代码制作的商店小系统，主要是大致的代码思路，针对于有一定开发基础，可以摸鱼借鉴，喜欢就请点赞收藏吧。