一、项目需求:
1、可以生成物品
2、提示物品相关信息
3、能拖拽背包中的物品进行交换、丢弃操作
二、实现步骤:
1,背包中的物品包括各种种类,如武器、消耗品、防具等,它们具备一些相同的属性,如ID、名字、描述、购买价格、出售价格、图标等,同时需要一个字段用于标志这个物品到底是什么类型的(让子类进行修改,最好的类型是枚举,这里我使用的是字符串),于是很容易想到建立一个基类Item:
public class Item
{
public int ID { get; private set; }
public int Num { get; private set; }
public string Name { get; private set; }
public string Description { get; private set; }
public int BuyPrice { get; private set; }
public int SellPrice { get; private set; }
public string Icon { get; private set; }
public string ItemType { get; protected set; }
public Item(int id, int num, string name, string description,
int buyPrice, int sellPrice, string icon)
{
this.ID = id; this.Num = num; this.Name = name; this.Description = description;
this.BuyPrice = buyPrice; this.SellPrice = sellPrice; this.Icon = icon;
}
}
同时衍生出其他所需要的物品类型,武器类需要攻击力的字段、消耗品类需要回复Hp、Mp数值的字段、防具需要力量、防御和敏捷的字段:
武器类:
![](/qrcode.jpg)
public class Weapon : Item
{
public int Damage {get;private set;}
public Weapon(int id, int num, string name, string description,
int buyPrice, int sellPrice, string icon, int damage)
: base(id, num, name, description, buyPrice, sellPrice, icon)
{
this.Damage = damage;
base.ItemType = "Weapon";
}
}
消耗品类:
public class Consumable : Item
{
public int BackHp { get; private set; }
public int BackMp { get; private set; }
public Consumable(int id, int num, string name, string description,
int buyPrice, int sellPrice, string icon, int backHp, int backMp)
: base(id, num, name, description, buyPrice, sellPrice, icon)
{
this.BackHp = backHp;
this.BackMp = backMp;
base.ItemType = "Consumable";
}
}
防具类:
public class Armor : Item
{
public int Power { get; private set; }
public int Defend { get; private set; }
public int Agility { get; private set; }
public Armor(int id, int num, string name, string description,
int buyPrice, int sellPrice, string icon, int power, int defend, int agility) :
base(id, num, name, description, buyPrice, sellPrice, icon)
{
this.Power = power;
this.Defend = defend;
this.Agility = agility;
base.ItemType = "Armor";
}
}
2、制作背包系统的UI:
创建格子UI:
在Canvas下创建一个GridPanel作为背包的大背景,在GridPanel下创建格子背景GridBg,背景下放格子Grid,将格子作为预制体,给GridPanel添加一个组件GridLayoutGroup,根据需要修改Padding下的CellSize和Spacing属性,给GridPanel添加一个脚本GridPanelUI,用这个脚本来管理所有的格子,因为当需要生成物品时,我们需要知道背包中的空格子,在这个脚本中获取一个空格子。
创建物品UI:创建一个空物体Item,创建子物体包括Image(物品图片)和Text(数量),给Item添加脚本ItemUI,用于动态加载格子的内容,因为生成物品是随机的,会产生不同的物品。
3、如何得到物品的数据,于是我们需要另一个类KnapsackManager,其中包含一个字典public Dictionary<int, Item> ItemList;用于保存这些数据,编写一个Load方法,通过1中的类实例化一个个对象,再将对象保存到这个字典中即可,除此之外,还需要一个保存物品的方法,即:生成一个物品,将物品放到一个空格子下,注意:考虑到后来交换物品的操作,我们需要建立起格子和物品的对应关系,所以还需要一个类ItemModel处理这些数据(包括添加、查找、删除)
public void StoreItem(int itemId)
{
if (!ItemList.ContainsKey(itemId))
{
return;
}
Transform emptyGrid = GridPanelUI.GetEmptyGrid();
if (emptyGrid == null)
{
Debug.LogWarning("背包已满!");
return;
}
Item temp = ItemList[itemId];
CreateNewItem(temp, emptyGrid);
}
private void CreateNewItem(Item item, Transform parent)
{
GameObject itemPrefab = Resources.Load<GameObject>("Prefabs/Item");
ItemUI itemUI = itemPrefab.GetComponent<ItemUI>();
Sprite s = Resources.Load<Sprite>("Image/" + item.Icon);
itemUI.UpdateItemImg(s);
itemUI.UpdateItemNum(item.Num);
GameObject.Instantiate(itemPrefab, parent);
ItemModel.StoreItem(parent.name, item);//注意不要忘了每创建一个数据就要建立起格子和物品的对应关系
}
而在ItemModel中(具体代码不加以赘述):
public class ItemModel
{
private static Dictionary<string, Item> m_GridItem = new Dictionary<string, Item>();
public static void StoreItem(string name, Item item)
{
}
public static Item GetItem(string name)
{
}
public static void DeleteItem(string name)
{
}
}
4、如何产生物品,这里我们采用鼠标右键单击的方式模拟:
创建一个类InputDetector:
void Update()
{
if (Input.GetMouseButtonDown(1))
{
int index = Random.Range(0, 10);
KnapsackManager.Instance.StoreItem(index);
}
}
5、实现当鼠标移动到物品上时,会弹出一个提示框,制作一个提示框(注意ContentSizeFitter的使用),为提示框添加脚本TooltipUI:主要包括更新文本内容、显示、隐藏、跟随鼠标的功能
为格子创建一个GridUI脚本用于鼠标事件监测(鼠标进入、鼠标移出):
实现IPointerEnterHandler, IPointerExitHandler接口,暴露出对应的事件:
public static Action<Transform> OnEnter;
public static Action OnExit;
让KnapsackManager来监听:
当鼠标进入格子的时候就让TooltipUI显示并更新内容,当移出格子的时候就让TooltipUI隐藏起来
至于提示框的跟随则在Update中进行检测即可,但要注意屏幕坐标和世界坐标的转换
6、拖拽功能的实现与提示框的实现大体一致,只是实现的接口是
IBeginDragHandler,IDragHandler,IEndDragHandler,另外值得注意的是这两个事件携带的参数:
public static Action<Transform> OnLeftBeginDrag;
public static Action<Transform, Transform> OnLeftEndDrag;
当开始拖拽时传入的是当前鼠标下面的格子,将格子中的数据传递给DragItemUI,同时删除视图中的游戏物体
Destroy(gridTransform.GetChild(0).gameObject);
让DragItem跟随鼠标移动
而当拖拽结束时传入的两个参数,一个是当前拖拽的格子,一个是鼠标下面的游戏物体
当结束拖拽时分为以下几种情况:
当鼠标下方的transform为空,意为拖到了背包外面,想要丢弃物品,那么在ItemModel中删除拖拽的物品
当鼠标下方的物体为格子,又分为两种情况,一,格子下面没有物品,那么在ItemModel中删除拖拽的物品,重新建立格子和物品的对应关系,二,格子下面有物品,交换两个格子的物品,听起来似乎有些复杂,但实际上只需要分别得到两个格子,重新建立关系即可,注意要删除视图中的进入格子的物品
其他情况,则是在背包中,但有没有拖拽到格子上,则将物品返回到原处
if (enterTransform == null)
{
ItemModel.DeleteItem(prevTransform.name);
Debug.LogWarning("物品已扔");
}
else if (enterTransform.tag == "Grid")
{
if (enterTransform.childCount == 0)
{
Item item = ItemModel.GetItem(prevTransform.name);
if (item == null)
return;
ItemModel.DeleteItem(prevTransform.name);
CreateNewItem(item, enterTransform);
}
else
{
Destroy(enterTransform.GetChild(0).gameObject);
Item prevGridItem = ItemModel.GetItem(prevTransform.name);
Item enterGridItem = ItemModel.GetItem(enterTransform.name);
CreateNewItem(prevGridItem, enterTransform);
CreateNewItem(enterGridItem, prevTransform);
}
}
else
{
Item item = ItemModel.GetItem(prevTransform.name);
CreateNewItem(item, prevTransform);
}
三、重难点及遇到的问题:
1、物品之间的继承关系
2、用两个字典保存数据,一个是id与item对应的字典(模板数据),一个是格子与物品对应的字典(实例数据)
3、结束拖拽时的逻辑
遇到的问题:
当结束拖拽时鼠标下方为格子,而格子下没有游戏物体时具体又分为两种情况:
1、此格子为之前格子所在位置
2、此格子不为之前格子所在位置
看下面这段代码,如果是情况2没有问题,但如果是情况1呢?
if (enterTransform.childCount == 0)
{
Item item = ItemModel.GetItem(prevTransform.name);
if (item == null)
return;
CreateNewItem(item, enterTransform);
ItemModel.DeleteItem(prevTransform.name);
}
四、实现效果: