那么到目前为止,已经学会了如何使用UXML和USS,那么接下来就是实际运用了。
那么在这里我会演示一个最简单的运用,如果有不足之处请大家指出。
目标
我们的目标是做出类似冒险岛1中角色属性的编辑界面,如下图:
图片是直接从百度图片上找的,那我们就要开始简单的仿制这个UI布局来练习目前学到的内容。
一、创建C#脚本
首先我们创建一个C#脚本,命名为ActorState,并在里面写好我们所需要的属性
using UnityEngine;
[ExecuteInEditMode]
public class ActorState : MonoBehaviour
{
public string m_name;
public string m_career;
public int m_level;
public int m_pk;
public string m_family;
public int m_maxHP;
public int m_maxMP;
public int m_maxEXP;
public int m_popu;
public int m_apoint;
public int m_str;
public int m_agi;
public int m_int;
public int m_luc;
}
然后创建另外一个C#脚本,命名为ActorStateEditor,如下所示:
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
[CustomEditor(typeof(ActorState))]
public class ActorStateEditor : Editor
{
public override VisualElement CreateInspectorGUI()
{
var visualTree = Resources.Load("actorstate_inspector_uxml") as VisualTreeAsset;
var uxmlVE = visualTree.CloneTree();
uxmlVE.styleSheets.Add(AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Resources/actorstate_inspector_styles.uss"));
return uxmlVE;
}
}
同时创建actorstate_inspector_uxml和actorstate_inspector_styles.uss并放入Resources文件夹中。
那么前期的准备工作就做好了。
二、设置PropertyField
首先在UXML中关联PropertyField
<editor:PropertyField binding-path="m_name" label="名称"/>
然后在USS中设置PropertyField的样式
PropertyField
{
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #000;
border-radius: 6px;
padding: 2px 0px 0px 0px;
width:220px;
background-color: #ACD70C;
}
PropertyField TextField
{
width:210px;
align-self:flex-start;
}
PropertyField Label
{
margin: 0px 0px 0px 20px;
align-self:center;
align-self:flex-start;
min-width:50px;
width:50px;
font-size: 12;
}
这里unity的背景色貌似还不支持渐变,我就直接用单一颜色了
那么最后的结果如下
效果。。。还行吧
那么让我们把其他的属性也全部放入
首先添加上IntegerField
PropertyField IntegerField
{
width:210px;
align-self:flex-start;
}
然后写入其他所有的属性
<editor:PropertyField binding-path="m_name" label="名字" />
<editor:PropertyField binding-path="m_career"