请选择 进入手机版 | 继续访问电脑版

UIToolkit编辑器练习(一)

[复制链接]
盛夏丨光年丶 发表于 2020-12-31 19:00:36 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  写一个UIToolkit的文章,记录一下UIToolkit的使用方式(一阵时间不消都快忘了),顺便写一个简单的物品编辑器
数据生存为xml,使用LinqToXml,编辑器使用UIToolkit制作
  需要UIBuilder插件
1.创建Editor窗口

通过Assets->Create->UIToolkit->Editor Window创建窗口ItemDBEditor(可以只选C#和uxml)
然后通过UIBuilder,做一个简单的窗口

然后修改ItemEditor的代码,将修改一下创建窗口的代码
  1.         //这里填工具栏路径    [MenuItem("Editor/ItemDBEditor")]    public static void ShowWindow()    {        ItemDBEditor wnd = GetWindow();        wnd.titleContent = new GUIContent("ItemDBEditor");    }    private void OnEnable()    {        VisualElement root = rootVisualElement;        //这里填上自己的uxml路径        var xml = AssetDatabase.LoadAssetAtPath("Assets/ItemSystem/ItemDBEditor.uxml");        xml.CloneTree(rootVisualElement);    }
复制代码
这时候在Unity中通过工具栏Editor->ItemEditor打开编辑器了
2.生成Xml

在这里我主要使用LinqToXml,因为比力方便
首先在编辑器的Toolbar中添加一个ToolbarButton,用来生成Xml文件(固然最初始的文件也可以手动创建)

然后添加代码
  1. private void OnEnable(){        //...        //为这个Button注册创建xml的事件        ToolbarButton AddXmlButton = root.Q("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来管理物品
  1. public class ItemManager : Singleton{    //文件位置    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的函数
  1. 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还没想好怎么做
这时候我们在编辑器中测试一下
添加一个新的按钮,并注册函数

  1.         private void OnEnable()    {            //...                ToolbarButton AddElementButton = root.Q("AddElement");        AddElementButton.clicked += () =>         {            CItem item = new CItem()            {                name = "木剑",                id = 10000001,                itemType = CItemType.Equipment,                itemAmount = 1            };            ItemManager.Instance.AddElement(item);        };    }
复制代码
点击按钮就乐成在xml中添加了新元素,接下来我们先用这种方式添加一些元素
  1.       木剑    10000001    0    1        铁剑    10000002    0    1        初级生命药水    10000003    2    99        初级魔力药水    10000004    2    99  
复制代码
4.使用ListView展示列表

先在UIBuilder中创建一个ListView

那么这个时候就需要在ItemManager中添加获取所有元素的函数
  1.     public IEnumerable GetAllElements()    {        IEnumerable nodes = from p in root.Elements("Item") select p;        return nodes;    }
复制代码
然后在Editor中为它添加函数
  1.         //ItemList        private ListView itemList;        //生存的XElement数据    private List datas;    private void OnEnable()    {            //...            //寻找ListView        itemList = root.Q("ItemList");        //加载数据        datas = new List(ItemManager.Instance.GetAllElements());        //makeItem创建单个组件        Func makeItem = () => new Label();        //bindItem绑定命据        Action 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函数,刷新数据即可
  1.     private void OnFocus()    {        ItemManager.Instance.Refresh();        datas = new List(ItemManager.Instance.GetAllElements());        itemList.itemsSource = datas;        itemList.Refresh();    }
复制代码
这样,当我们手动在xml中添加数据,在编辑器中也会同步修改了

来源:https://blog.csdn.net/qq_43500611/article/details/111990043
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )