Skinning

UI Skins let you customize the look and feel of the UI from a single location.

The system functions cross-scene and is scene-independent.

UI Skins in the project are located in the HMITemplate > Data > Skins section of the hierarchy.

Choose a skin and apply to all screens at once

  1. In the Unity Editor, on the main menu bar, navigate to HMI Framework > Skin Manager
  2. In the drop-down menu that appears, select one of the available skins (Candy, Daymode, or Nightmode).
  3. Select Assign Skin to Scene. The current skin of each screen changes to the new skin.
    Note: You can use the Skin Manager in any scene in the project. It works in both Edit mode and Play mode.
    Tip: Open the SplitScreen scene, enter Play mode, and open the Skin Manager. Assign a new skin in the Skin Manager to see all three skins change at the same time.

Finding skins in the project

You can find skins in the GameObjects grouped under a given section on the interface for a Scene.

Each skin is a collection of scriptable objects that inherit from UISkinDataBase. The skin (UISkinCollectionData.cs) automatically searches for any skin data file in its folder and stores those files in an internal collection.

Each individual skin element inherits from UISkinDataBase.

UISkinDataBase

Each skinnable element in the scene needs a UISkin component. There are many different UI Skin components already supported by the skinning system. For example, an image in the UI has UISkinImage saved. This UISkinImage inherits from UISkinBase, and that determines how it applies skin data to the UI element. It references a Data file in the skin folder in the project.

SkinSwapper

The SkinSwapper searches for any element in the scene that has a UISkinBase component assigned. It also references the skin data file. When a different skin data file is assigned, the SkinSwapper searches the scene for all skinnable elements. It then reassign the data based on the newly assigned Skin data file. It does this using the name of the data file.

How do I ...

Create and assign a new skins

To create a new skin:

  1. Duplicate a skin folder.
  2. Do one of the following:
    • Assigning it to the scene from the Editor.
    • Assign it to the Scene in the Inspector panel for the SkinSwapper in the scene.

Make a new part of the UI work with the scene

Example: You add new text to the UI and want the Skin to apply itself to the new text. You must do the following:

  1. Select the text.
  2. Add UISkinUIText component to the text.
  3. Reference the UI skin data you want to use through the inspector of the UISkinUIText component.

Extend a skin with new data.

To extend the skin with new data, add a new SkinData element (such as the UISkin in the Skin folder). You can add a new skin data element by selecting Create > HMI > Skins on the context menu.

Important: All skins must have identical file names and types. If two skins have different names, the skin swapper does not work. If you extend one skin with new data, you must extend all the skins that you want to suppor the same new data.