当前位置：首页 > backend >正文

学习游戏制作记录（合成表UI和技能树的UI）8.22

backend 2025/8/23 17:29:39

1.制作合成表的UI

制作预览的滑动视图

为视图添加四个合成槽位

UI_craftSlot脚本：

public void SetupCraftSlot(ItemData_Equipment _data)//设置数据的函数
{
if (_data == null) return;

Item.data = _data;

image.sprite = _data.icon;

textMeshPro.text = _data.ItemName;
}

在左侧创建一个选择的图标，用于切换制造不同类型的武器

创建UI_CraftList脚本并挂载：

public class UI_CraftList : MonoBehaviour, IPointerDownHandler
{
[SerializeField] private Transform craftSlotParent;//合成槽位的父组件
[SerializeField] private GameObject craftPrefab;//合成槽的预制体

[SerializeField] private List<ItemData_Equipment> craftEquipments;//制作的武器列表
[SerializeField] private List<UI_craftSlot> craftSlots;

private void Start()
{
AssignCraftSlot();
}
private void AssignCraftSlot()//分配指定数量的合成槽
{
for(int i = 0; i < craftSlotParent.childCount; i++)
{
craftSlots.Add(craftSlotParent.GetChild(i).GetComponent<UI_craftSlot>());
}
}

private void SetUpCraftSlot()
{
for(int i = 0; i <craftSlots.Count; i++) //每次切换前先清除
{

Destroy(craftSlots[i].gameObject);
}

craftSlots =new List<UI_craftSlot> ();

for(int i = 0;i < craftEquipments.Count;i++)/更新合成槽
{
GameObject newCraft = Instantiate(craftPrefab, craftSlotParent);//创建预制体

newCraft.GetComponent<UI_craftSlot>().SetupCraftSlot(craftEquipments[i]);
}
}

public void OnPointerDown(PointerEventData eventData)//点击调用
{
SetUpCraftSlot();
}
}

2.制作合成窗口

合成窗口包括要合成物品的图标，需要材料的图标和数量以及制作的按钮

再制作一个切换的列表，它包括武器饰品护甲和药水的切换

创建UI_CraftWindow脚本并挂载在合成窗口上：

[SerializeField] private TextMeshProUGUI itemName;//名称
[SerializeField] private TextMeshProUGUI itemDescription;//描述
[SerializeField] private Button craftButton;//制作按钮

[SerializeField] private Image craftImage;//图标
[SerializeField] private Image[] MaterialImage;//材料图标

public void SetUpCraftWindow(ItemData_Equipment _data)//设置具体的窗口
{
craftButton.onClick.RemoveAllListeners();

for(int i = 0; i < MaterialImage.Length; i++)//每次切换时清除材料图像
{
MaterialImage[i].color = Color.clear;
MaterialImage[i].GetComponentInChildren<TextMeshProUGUI>().color = Color.clear;
}

for (int i = 0; i < _data.craftingMaterials.Count; i++)//依次更新所需材料
{
if (_data.craftingMaterials.Count > MaterialImage.Length)
{
Debug.Log("More Materials");
}

MaterialImage[i].sprite = _data.craftingMaterials[i].data.icon;
MaterialImage[i].color = Color.white;

TextMeshProUGUI materialText = MaterialImage[i].GetComponentInChildren<TextMeshProUGUI>();

materialText.text = _data.craftingMaterials[i].stackSize.ToString();//材料数量
materialText.color =Color.white;

}

craftImage.sprite = _data.icon;//设置图标，名称和描述
itemName.text = _data.ItemName;

itemDescription.text = _data.GetDescription();

craftButton.onClick.AddListener(() => Inventory.instance.canCraft(_data,_data.craftingMaterials));//为按钮添加监听事件，调用合成函数
}

UI_CraftList脚本：

private void Start()//默认面板的设置
{
transform.parent.GetChild(0).GetComponent<UI_CraftList>().SetUpCraftSlot();
SetUpDefualtCraftWindow();
}

public void SetUpDefualtCraftWindow(）//设置默认合成表
{
if (craftEquipments[0]!= null)
{
GetComponentInParent<UI>().craftTip.SetUpCraftWindow(craftEquipments[0]);

}
}

private void SetUpCraftSlot()
{
for(int i = 0; i <craftSlotParent.childCount; i++) //不需要额外定义一个槽位的数组，直接摧毁子对象即可
{

Destroy(craftSlotParent.GetChild(i).gameObject);
}

for(int i = 0;i < craftEquipments.Count;i++)
{
GameObject newCraft = Instantiate(craftPrefab, craftSlotParent);

newCraft.GetComponent<UI_craftSlot>().SetupCraftSlot(craftEquipments[i]);
}
}

3.制作技能树UI

创建按钮，每个按钮代表一个技能

添加图标

技能有分支和递进的选项

因此创建 UI_SkillTreeSlot脚本挂载在按钮上：

[SerializeField] private string skillName;//技能名称
[TextArea]
[SerializeField] private string skillDescription;//技能描述

[SerializeField] private Color lockedSkillColor;//为解锁的颜色

public bool unlocked;//是否解锁

[SerializeField] private UI_SkillTreeSlot[] shouldbeUnlocked;//当前技能的前置技能
[SerializeField] private UI_SkillTreeSlot[] shouldbelocked;//同一分支的技能

[SerializeField] private Image skillImage;

private void OnValidate()
{
gameObject.name = "SkillTreeSlot_UI-" + skillName;
}
private void Start()
{
skillImage = GetComponent<Image>();

skillImage.color = lockedSkillColor;//设置默认颜色

GetComponent<Button>().onClick.AddListener(()=>UnlockSkillTreeSlot());//为按钮添加监听事件
}

public void UnlockSkillTreeSlot()
{
for (int i = 0;i<shouldbeUnlocked.Length;i++)//确保前置技能解锁
{
if (shouldbeUnlocked[i].unlocked == false)
{
Debug.Log("can not unlock");
return;
}
}

for (int i = 0; i < shouldbelocked.Length; i++)//确保分支技能只能解锁一个
{
if (shouldbelocked[i].unlocked == true)
{
Debug.Log("can not unlock");
return;
}
}

unlocked = true;
skillImage.color = Color.white;
}

4.制作技能树的提示框

创建一个图像包含两个文本组件，技能名称和描述

创建UI_SkillToolTip脚本挂载在创建的提示框上：

[SerializeField] private TextMeshProUGUI skillName;//技能名称和描述
[SerializeField] private TextMeshProUGUI skillDescription;

public void ShowSkillToolTip(string _description,string _skillName)//显示
{
skillName.text = _skillName;
skillDescription.text = _description;

gameObject.SetActive(true);
}

public void HideSkillToolTip()
{
gameObject.SetActive(false);
}

UI脚本：

[SerializeField] public UI_SkillToolTip skillTip;

UI_SkillTreeSlot脚本实现IPointerEnterHandler,IPointerExitHandler接口：

private UI ui;

public void OnPointerEnter(PointerEventData eventData)
{
ui.skillTip.ShowSkillToolTip(skillDescription, skillName);//调用显示

Vector2 mousePosition =Input.mousePosition;//修改位置，使文本框更美观

float xOffset=0;
float yOffset=0;

Debug.Log(mousePosition.x);
if (mousePosition.x > 600)
{
xOffset = -150;
}
else
xOffset = 80;

if(mousePosition.y > 200)
{
yOffset = -150;
}
else
{
yOffset = 150;
}

ui.skillTip.transform.position =new Vector2(mousePosition.x+xOffset, mousePosition.y+yOffset);
}

public void OnPointerExit(PointerEventData eventData)
{
ui.skillTip.HideSkillToolTip();
}

5.改进之前的装备和物品提示框并为独特物品添加描述

UI_ItemSlot脚本：

public void OnPointerEnter(PointerEventData eventData)//使提示框更具位置移动
{

if (Item == null) return;
Vector2 mousePosition = Input.mousePosition;
Debug.Log(mousePosition);
float xOffset = 0;
float yOffset = 0;

if (mousePosition.x > 550)
{
xOffset = -150;
}
else
xOffset = 150;

if (mousePosition.y > 320)
{
yOffset = -150;
}
else
{
yOffset = 150;
}

ui.ItemTip.ShowToolTip(Item.data as ItemData_Equipment);
ui.ItemTip.transform.position =new Vector2(mousePosition.x+xOffset, mousePosition.y+yOffset);
}