UIToolkit编辑器练习(一)

写一个UIToolkit的文章,记录一下UIToolkit的使用方式(一阵时间不用都快忘了),顺便写一个简单的物品编辑器
数据保存为xml,使用LinqToXml,编辑器使用UIToolkit制作


需要UIBuilder插件

1.创建Editor窗口

通过Assets->Create->UIToolkit->Editor Window创建窗口ItemDBEditor(可以只选C#和uxml)
然后通过UIBuilder,做一个简单的窗口
在这里插入图片描述
然后修改ItemEditor的代码,将修改一下创建窗口的代码

	//这里填工具栏路径
    [MenuItem("Editor/ItemDBEditor")]
    public static void ShowWindow()
    {
        ItemDBEditor wnd = GetWindow<ItemDBEditor>();
        wnd.titleContent = new GUIContent("ItemDBEditor");
    }

    private void OnEnable()
    {
        VisualElement root = rootVisualElement;
        //这里填上自己的uxml路径
        var xml = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/ItemSystem/ItemDBEditor.uxml");
        xml.CloneTree(rootVisualElement);
    }

这时候在Unity中通过工具栏Editor->ItemEditor打开编辑器了

2.生成Xml

在这里我主要使用LinqToXml,因为比较方便
首先在编辑器的Toolbar中添加一个ToolbarButton,用来生成Xml文件(当然最初始的文件也可以手动创建)
在这里插入图片描述
然后添加代码

private void OnEnable()
{
	//...
	//为这个Button注册创建xml的事件
	ToolbarButton AddXmlButton = root.Q<ToolbarButton>("CreateXml");
        AddXmlButton.clicked += () => 
        {
            string filePath = Application.dataPath + @"/ItemDB.xml";
            if (!File.Exists(filePath))
            {
                //创建XML文档实例
                XmlDocument xmlDoc = new XmlDocument();
                //创建root节点,也就是最上一层节点
                XmlElement xRoot = xmlDoc.CreateElement("ItemDatabase");
                xmlDoc.AppendChild(xRoot);

                xmlDoc.Save(filePath);
                Debug.Log("createXml OK!");
                AssetDatabase.Refresh();
            }
        };
}

这个时候就发现Xml就已经创建出来了

3.为Xml添加元素

先要创建一个ItemManager来管理物品

public class ItemManager : Singleton<ItemManager>
{
    //文件位置
    private static string filePath = Application.dataPath + @"/ItemDB.xml";
    private XDocument xDoc;
    private XElement root;
    
    public ItemManager()
    {
        Refresh();
    }
    
    //添加元素
    public void AddElement(CItem obj)
    {
        root.Add(obj.GetXElement());
        Save();
    }

    //更新函数
    public void Refresh()
    {
        if (File.Exists(filePath))
        {
            xDoc = XDocument.Load(filePath);
            root = xDoc.Root;
            Debug.Log("Refresh Success!");
        }
    }

    //保存为Xml
    private void Save()
    {
        if (File.Exists(filePath) && xDoc != null)
        {
            xDoc.Save(filePath);
            Debug.Log("Save Success!");
            AssetDatabase.Refresh();
        }
    }
}

创建一个CItem,里面设置一些基本的属性,并添加一个返回XElement的函数

public enum CItemType
{
    Equipment,
    Food,
    Medicine,
    Material
}

public class CItem
{
    public string name;
    public int id;
    //public Texture2D icon;
    public CItemType itemType;
    public int itemAmount;

    public XElement GetXElement()
    {
        XElement item = new XElement("Item",
                new XElement("Name", name),
                new XElement("ID", id),
                new XElement("ItemType", (int)itemType),
                new XElement("ItemAmount", itemAmount)
                );
        return item;
    }
}

Icon还没想好怎么做

这时候我们在编辑器中测试一下
添加一个新的按钮,并注册函数
在这里插入图片描述

	private void OnEnable()
    {
    	//...
		ToolbarButton AddElementButton = root.Q<ToolbarButton>("AddElement");
        AddElementButton.clicked += () => 
        {
            CItem item = new CItem()
            {
                name = "木剑",
                id = 10000001,
                itemType = CItemType.Equipment,
                itemAmount = 1
            };
            ItemManager.Instance.AddElement(item);
        };
    }

点击按钮就成功在xml中添加了新元素,接下来我们先用这种方式添加一些元素

<?xml version="1.0" encoding="utf-8"?>
<ItemDatabase>
  <Item>
    <Name>木剑</Name>
    <ID>10000001</ID>
    <ItemType>0</ItemType>
    <ItemAmount>1</ItemAmount>
  </Item>
  <Item>
    <Name>铁剑</Name>
    <ID>10000002</ID>
    <ItemType>0</ItemType>
    <ItemAmount>1</ItemAmount>
  </Item>
  <Item>
    <Name>初级生命药水</Name>
    <ID>10000003</ID>
    <ItemType>2</ItemType>
    <ItemAmount>99</ItemAmount>
  </Item>
  <Item>
    <Name>初级魔力药水</Name>
    <ID>10000004</ID>
    <ItemType>2</ItemType>
    <ItemAmount>99</ItemAmount>
  </Item>
</ItemDatabase>

4.使用ListView展示列表

先在UIBuilder中创建一个ListView
在这里插入图片描述
那么这个时候就需要在ItemManager中添加获取所有元素的函数

    public IEnumerable<XElement> GetAllElements()
    {
        IEnumerable<XElement> nodes = from p in root.Elements("Item") select p;
        return nodes;
    }

然后在Editor中为它添加函数

	//ItemList
	private ListView itemList;
	//保存的XElement数据
    private List<XElement> datas;
    private void OnEnable()
    {
    	//...
    	//寻找ListView
        itemList = root.Q<ListView>("ItemList");
        //加载数据
        datas = new List<XElement>(ItemManager.Instance.GetAllElements());
        //makeItem创建单个组件
        Func<VisualElement> makeItem = () => new Label();
        //bindItem绑定数据
        Action<VisualElement, int> bindItem = (e, i) => (e as Label).text = datas[i].Element("Name").Value;

        //设置一下
        itemList.itemsSource = datas;
        itemList.itemHeight = 20;
        itemList.makeItem = makeItem;
        itemList.bindItem = bindItem;
        itemList.selectionType = SelectionType.Single;
    }

这时候再打开编辑器,就会发现数据已经显示在了ListView中
在这里插入图片描述

5.修改xml编辑器内同步显示

在Editor中添加一个OnFocus函数,刷新数据即可

    private void OnFocus()
    {
        ItemManager.Instance.Refresh();
        datas = new List<XElement>(ItemManager.Instance.GetAllElements());
        itemList.itemsSource = datas;
        itemList.Refresh();
    }

这样,当我们手动在xml中添加数据,在编辑器中也会同步修改了

评论 1 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

嘉神川优衣

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值