> For the complete documentation index, see [llms.txt](https://niam.gitbook.io/input-mapper-for-unity/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://niam.gitbook.io/input-mapper-for-unity/scriptable-objects/input-display-skin.md).

# Input Display Skin

The **Input Display Skin** is a Scriptable Object that defines the visual theme for input prompts. It maps device-specific input controls—such as keyboard keys, gamepad buttons, and mouse inputs—to readable names and UI sprites/icons.

In practice, it acts as a translation layer between technical input paths and player-friendly UI. Raw paths like `Gamepad/buttonSouth` or `Keyboard/space` are not suitable for display, so the skin converts them into clear labels or icons that players can easily recognize.

## Inspector Editor 

<div align="left"><figure><img src="/files/hWDdvyft4XEVLY4VpRM8" alt="" width="348"><figcaption></figcaption></figure></div>

### Toolbar Buttons

On the left, the plus(+) with a dropdown icon is used to add an item to the asset. Once clicked, the Input Control Picker will popup to help you choose which device and its control to add.

On the right, the first button is the Collapse/Expand button, which folds or unfolds all child items in the tree view. The button next to it is the Show/Hide Inspector panel.

### Tree View

The Tree View contains all device and its control that is supported by Input Display Skin.

It is organized hierarchically:

1. Device entries (for example, `Keyboard`, `Mouse`, `Gamepad`, or custom layouts).
2. Child Control entries under each device (for example, `space`, `buttonSouth`, `leftButton`).
3. Child of Control entries is Interaction variants (for example, `hold`, `press`, `tap`)

Use the Tree View to quickly manage your mapping set:

1. Select an entry to edit its properties in the Inspector Panel.
2. Right-click a device and use **Fill** to auto-add missing controls for that layout.
3. Drag sprites from the Project window directly onto a control entry to assign icon frames.
4. Expand/collapse device groups to keep large skins manageable.

Because this view is the source list for your skin data, keeping it organized (only required devices/controls) makes fallback behavior and sprite generation easier to validate.

### Inspector Panel

The Inspector Panel displays editable fields for the currently selected device or control.

<table><thead><tr><th width="259">Name</th><th width="489">Descriptions</th></tr></thead><tbody><tr><td>Layout</td><td>The device layout</td></tr><tr><td>Path</td><td>The control path relative to the device layout</td></tr><tr><td>Name</td><td>Full name to display</td></tr><tr><td>Short Name</td><td>Optional short name to display</td></tr><tr><td>Frames</td><td>List of sprites to display</td></tr><tr><td>Color Tint</td><td>Color of the sprites</td></tr><tr><td>Frame Rate</td><td>Playback frame rate for animations</td></tr><tr><td>Default Frame</td><td>Default frame index</td></tr><tr><td>Is Overlay</td><td>Whether to overlay the sprite</td></tr><tr><td>Fallback</td><td>The control path fallback</td></tr></tbody></table>

## Fallback System

If a direct mapping is not found, Input Display Skin resolves display data using the following order:

1. Control Path Fallback
2. Wildcard Control Path
3. Base Device Layouts
4. Wildcard Device Layout
5. Fallback Input Skins
6. Default Input Skin

Fallback skins are **not evaluated recursively**. If a fallback skin has its own fallback list, those additional skins are not traversed.

This design avoids circular chains and keeps lookup behavior predictable. If you need additional skin sources, add them directly to the main skin’s fallback list.

## Generating Sprite Assets

Sprite assets are required to display control icons in **TextMesh Pro** text.

Use **Generate Sprite Assets** at the bottom of the inspector to create or update sprite assets for the skin.

<div align="left"><figure><img src="/files/PztqKUrKmGH2WnDTXiem" alt="" width="450"><figcaption></figcaption></figure></div>

Generated assets are added as sub-assets of the **Input Display Skin** asset.&#x20;

<div align="left"><figure><img src="/files/WFKr5XtCaPQmUCiyJkGf" alt="" width="274"><figcaption></figcaption></figure></div>

{% hint style="success" %}
Review generated sprite assets and adjust their settings as needed for your project.
{% endhint %}

***

## Creating your custom Input Skin

{% stepper %}
{% step %}

### Creating the Asset

In the Project window, right-click and select **Create → Input Mapper → Input Display Skin**, then assign a name.

{% hint style="info" %}
If another Input Display Skin is selected when you create a new one, the selected skin and its fallback references are copied into the new asset’s fallback list.
{% endhint %}
{% endstep %}

{% step %}

### Add Devices and Controls

Click the **plus (+)** icon in the top-left corner to open the Input Control Picker and add supported devices/controls.

{% hint style="info" %}
Right-click a device entry in the Tree View and choose **Fill** to add missing controls automatically, then remove any controls you do not need.
{% endhint %}
{% endstep %}

{% step %}

### Prepare the Spritesheet

Follow the steps below depending on asset(s) that you will used.

{% tabs %}
{% tab title="Spritesheet" %}
A Spritesheet is a single texture containing multiple sprites. If your texture is not prepared yet:

1. Select the texture and set **Texture Type** to **Sprite (2D and UI)**.
2. Set **Sprite Mode** to **Multiple** and click **Open Sprite Editor**.
3. In the Sprite Editor, slice the texture into individual sprites.
4. Click **Apply**, then close the Sprite Editor.
   {% endtab %}

{% tab title="Sprite Atlas" %}
A Sprite Atlas packs multiple sprites into optimized textures. If you are not using one yet:

1. In **Project Settings → Editor**, set **Sprite Atlas Mode** to **Sprite Atlas V2 - Enabled**.
2. Select your sprites and set **Mesh Type** to **Full Rect**.
3. Create a sprite atlas from **Create → 2D → Sprite Atlas**.
4. In the atlas inspector, drag sprites into **Object Packing**.
5. Click **Pack Preview**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}

### Add Sprites to each Controls

Assign icon to each control in your Input Display Skin asset by simply dragging the desired sprite directly onto the target control in the Tree View from Project Window.
{% endstep %}

{% step %}

### Generate Sprite Assets

Click Generate Sprite Assets button at the bottom of the Input Display Skin inspector.
{% endstep %}

{% step %}

### Test your Custom Input Skin

Create or use existing Input Prompts component in the scene, then assign the newly created input Skin. Verify that each input prompt is displayed correctly and that its visuals are properly rendered.&#x20;

If you need to modify the appearance, the generated sprite assets are located in the **Project** window as child assets of the newly created input Skin.
{% endstep %}
{% endstepper %}