U3D游戏开发之商店系统（UGUI版）

很久没有打新的代码了，国庆节闲的无聊，突然想起来一年前似乎画过一个饼（在商店系统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;
        else
            GetControl<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 update
    void 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代码制作的商店小系统，主要是大致的代码思路，针对于有一定开发基础，可以摸鱼借鉴，喜欢就请点赞收藏吧。