[Unity] UIElements Expansions: Reorderable List

UIElements Expansions are expansion assets for the Unity editor.

UIElements Expansions: Reorderable List

UIElements Expansions: Reorderable List” strongly supports “UIElements” which has been introduced since Unity 2019.1.

What is UIElements

UIElements is a function that replaces the GUI system (IMGUI) of the current Unity editor that has been introduced since Unity 2019.1.

Unity HTML for “UXML“, Unity a combination of the style sheet “USS” for some as creating a web page with HTML and CSS Unity can produce the GUI.

Of course, you can write editor processing in the editor script as before, and jQuery-like methods are provided, so you can create a dynamic GUI like HTML5.

In the future, it is planned to replace not only the editor but also the runtime GUI (current uGUI), and it is expected that the future Unity GUI will be entrusted.

However, the potential is high, but it has just been introduced, so there are not enough functions to use it in earnest.

UIElements Expansions” is an asset that strongly supports the missing parts.

This “UIElements Expansions: Reorderable List” mainly supports three functions.

  • Global style sheet
  • Inspector automatic assignment function
  • Reorderable List

Global style sheet

The CSS that is the source of USS usually uses one or more common files and loads them together with HTML headers.

Global style sheets can be used in the same way as CSS.

Inspector automatic assignment function

Unity, you can freely rewrite the GUI of inspectors such as components and scriptable objects. However, in that case, you need to write your own editor script for that component.

It is now possible to describe the configuration in UXML like HTML, but it is a little cumbersome because it is necessary to write in an editor script which component to assign the created UXML to.

Inspector automatic assignment function” automatically determines which component is used by UXML file name without writing an editor script, and automatically assigns it.

Reorderable List

Reorderable List is a useful function that can also be used in IMGUI. You can intuitively manipulate serialized List and arrays, and change their order freely. However, even in the IMGUI era, the implementation was complicated and very troublesome.

Furthermore, since there is no means to implement UIElements, you can only use IMGUI after all. Therefore, UIElements USS cannot be applied and the design cannot be set freely.

In addition, IMGUI’s Reorderable List has poor performance and has the disadvantage that the response of the inspector becomes very slow when the number of elements increases.

UIElements Expansions: Reorderable List can use the newly created Reorderable List in UIElements.

The design of the Reorderable List in IMGUI can be adjusted as it is, and fine design adjustments can be made with USS.

How to Use

Import

Purchase from Unity Asset Store.

You can import from “My Assets” after purchase.

Global style sheet

You can use it as it is.

Change the style

Edit “PersonalStyle” and “ProStyle” in the “Assets/Masamune/Modules/unity.style/Styles” folder.

In the normal case, “PersonalStyle“, and in the case of Pro Skin (black-based skin) that can be used in Unity Pro and Plus, the skin is reflected immediately by editing “ProStyle“.

Use my own style sheet

Select “EditorStyleInfo” in the “Assets/Masamune/Modules/unity.style/Resources” folder. The editing screen is displayed in the inspector.

Open the “StyleSheet Settings” tab and you should see a list of “Style Sheets” and “Style Sheets For Pro Skin“. The style file of the editor which applied the usual editor and the professional skin respectively is specified.

You can add a style file by pressing the “+” button. The lower the priority is, the higher the priority, so change the order as necessary.

Inspector automatic assignment function

By creating a uxml file with the same name as the class that inherits the created “MonoBehaviour” or “ScriptableObject“, uxml can be applied to the inspector screen of the created class.

Example

Create “MyMonoScript” that inherits “MonoBehaviour”.

// MyMonoScript.cs
public class MyMonoScript : MonoBehaviour {
  public string name;
  public int age;
  ...
}

Create the same “MyMonoScript” uxml file. (It is OK anywhere under the Assets folder)

// MyMonoScript.uxml
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd"
>
  <editor:PropertyField binding-path="name" class="box" />
  <editor:PropertyField binding-path="age" class="box" />    
</engine:UXML>

This will bring up the Inspector screen with the UIElements style applied.

Use other than MonoBehaviour and ScriptableObject

If you want to use this function in “MonoBehaviour” or “ScriptableObject” such as a list or an original class in an array, it can be realized by inheriting “SerializableBehaviour“.

The usage method is to create a class “MySerializable” that inherits “SerializableBehaviour” in the same way as “MonoBehaviour” and “ScriptableObject” inheritance class. Since it is necessary to specify that the custom class can be serialized, the [System.Serializable] attribute is added.

// MySerializable.cs
[System.Serializable]
public class MySerializable : SerializableBehaviour {
  public string name;
  public int age;
  ...
}

In the same way, create a uxml file called “MySerializable“.

// MySerializable.uxml
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd"
>
  <editor:PropertyField binding-path="name" class="box" />
  <editor:PropertyField binding-path="age" class="box" />    
</engine:UXML>

The “MySerializable” class is now displayed with UIElements applied in the Inspector.

Use with editor scripts

Some of you may have already created an editor script. If the inspector screen of a specific class has been changed in the editor script, the created editor script has priority.

Reorderable List

If you want to display a List or array in a specific class in the Inspector as a Reorderable List, write it in the class uxml file as follows.

<editor:ReorderableList binding-path="List or array variable name to apply" />

This will display the Reorderable List with the style applied automatically.

Apply a skin to an element in a Reorderable List

It is not possible to change the style of elements in ReorderableList in the normal style sheet description.

However, as with other elements, internal classes are prepared, so it is possible to change the style by specifying each class.

.unity-reorderable-list : Class that specifies the entire Reorderable List
 .unity-reorderable-list__header : Header part
     .unity-reorderable-list__icon : Icon in header
     .unity-reorderable-list__label : Label in header
     .unity-reorderable-list__add : Add button in header
     .unity-reorderable-list__remove : Remove button in header
 .unity-reorderable-list__content : Content part
     .unity-reorderable-list__item : Each element in the content
         .unity-reorderable-list__handle : Handle within each element
         .unity-reorderable-list__single : The part excluding the handle when each element is a single field (primitive type such as string or int)
 .unity-reorderable-list__footer : Footer part 

Please refer to “PersonalStyle” and “ProStyle” in the “Assets/Masamune/Modules/unity.style/Styles” folder for details.

Conclusion

UIElements Expansions: Reorderable List” strongly supports “UIElements” which has been introduced since Unity 2019.1. In particular, you will be able to easily write inspector designs that previously required writing editor scripts.

In addition, using the “Reorderable List” makes it easy to edit List data.

The design has been flattened to match Unity 2019.3, which is cool at once, so you can use it comfortably.

If you are interested, please check out the asset store!

Leave a Reply

Your email address will not be published.