在Unity基于Json数据实现背包系统

实现效果

假定我们已经从实现了json存为字典，并可以通过管理类获取实体的操作。若有疑问可参考我的另一篇文章:https://blog.csdn.net/qq_41083853/article/details/104369853

了解RectTransform组件基础知识

UI在CANVAS中有两种布局方式，两种方式显示的数值是不一样的
可根据如图方式切换:

1. 绝对定位
   
   Posx,y,z就是指轴心（Pivot蓝色小圈），距离canvas轴心（一般是canvas中心）的距离
2. 相对定位（非常好用）
   
   Left指当前Ui元素的左边界距离父元素的左边界的距离，其他值也是一样的意思。

背包界面UI的搭建。

UI大致分为三个三个模块

• Scroll滚动区域

带有ScrollRect组件，负责控制道具面板的滚动显示。

viewport是可显示的区域大小，需要mask组件和image组件配合，实现区域遮罩。

这是所有道具显示的区域，使用VerticalLayoutGroup组件进行垂直布局，childAlignment可以控制子ui的对其方式。还需加上关键的ContentSizeFiltter组件，这个组件的当前设置能根据Conten内容的大小动态变换Content的高度，这对于上面的scrollRect组件很关键。

scrollbar拖动条没什么特别的。

• 道具描述区域
  
  通过脚本BkInfoPanel来控制当前区域的逻辑显示。

• 道具使用菜单区域
  
  与信息区域一样，采用脚本来控制逻辑显示。

道具预制件Item

采用ItemController来绘制当前UI元素。

主要脚本

预制件Item的ItemController脚本

基本思想是通过Init（Model）方法来将Model的值设置为当前UI的各元素（图标，名字，数量）的值。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class ItemController : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerClickHandler//单个道具Ui的逻辑层，包括了渲染和使用
{
public int itemID;
public int count;
public static string iconPath;
public ItemModel item;
public Text nametx;
public Text countText;
public Image bgImg;
public Image icon;

// Start is called before the first frame update
void Start()
{

}
public void Init(PlayerItemModel itemModel)
{
item = JsonDataCenterCL.GetModelById<ItemModel>(itemModel.id);
Sprite sp = Resources.Load(iconPath + item.icon, typeof(Sprite)) as Sprite;
if (sp == null)
{
Debug.LogError("没有找到" + item.icon + "资源");
return;
}
icon.sprite = sp;
itemID = itemModel.id;
count = itemModel.itemCount;
nametx.text = item.name;
countText.text = count.ToString();
}

public void Use()
{
PlayerItemModel itemModel =JsonDataCenterCL.GetModelById<PlayerItemModel>(itemID);
itemModel.itemCount--;
if (itemModel.itemCount <= 0)
{
GameObject.Destroy(gameObject);
return;
}
Init(itemModel);
}
public void OnPointerEnter(PointerEventData e)
{
OnFocusEnter();
}
public void OnPointerExit(PointerEventData e)
{
OnFocusOver();
}
public void OnPointerClick(PointerEventData e)
{
if (!ItemMenuController.instance.gameObject.activeInHierarchy)
ItemMenuController.ShowItemMenu(this);
else
{
ItemMenuController.HideItemMenu();
}
}
#region ui悬停事件
public void OnFocusEnter()
{
BackPackManager.selected = this;
bgImg.color = Color.black;
nametx.color = Color.white;
countText.color = Color.white;
BkInfoPanel.ShowPanel(item.description);
}
public void OnFocusOver()
{
bgImg.color = Color.white;
nametx.color = Color.black;
countText.color = Color.black;
BkInfoPanel.HidePanel();
}
#endregion
}

挂在content上的BackPackController脚本

这个脚本实现把从JsonDataCenter获取的数据生成为UI实体。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BackpackController : MonoBehaviour//挂载在背包面板上
{
public static string itemUIPrefabPath;
GameObject itemUIprefab;
private void Awake()
{
}
private void Start()
{
GameObject go = Resources.Load(itemUIPrefabPath) as GameObject;
if (go == null)
{
Debug.LogError("没有找到预制体:" + itemUIPrefabPath);
return;
}
itemUIprefab = go;
GenerateItemSlotList();//开始时生成所有的道具
}

public void GenerateItemSlot(PlayerItemModel item)//生成单个道具
{
GameObject go = GameObject.Instantiate(itemUIprefab, transform);
go.GetComponent<ItemController>().Init(item);
}

public void GenerateItemSlotList()//生成所有道具
{
Dictionary<int,PlayerItemModel> col=JsonDataCenterCL.GetModelDic<PlayerItemModel>();

foreach (PlayerItemModel im in col.Values)//遍历字典的值
{
GenerateItemSlot(im);
}
}

}

• 点赞
• 收藏
• 分享
• 文章举报