# M2Extras: Skins System

{% hint style="success" %}
verified: 2025-11-19 version: v39
{% endhint %}

We have a M2Extra plugin (disabled by default) that provides an example of how to add a skins system to your project, that allows you to set some "skin data" that can be reacted to by your UI.

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-b9980b9bf878b28ce2208998c280ae748844d1cc%2Fimage.png?alt=media" alt=""><figcaption><p>The example widget when the skin is set to the first example skin. The background color is black, and the font is white</p></figcaption></figure>

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-e015ab885b863ec15e76c2465db0a78250ab90df%2Fimage.png?alt=media" alt=""><figcaption><p>The example widget when the skin is instead set to the second example skin. The background color has changed to white, and the font is now black (this can be previewed in the editor window)</p></figcaption></figure>

{% hint style="info" %}
NOTE: This is just an example of how one could make a skins system entirely using Blueprints, and may not be fit for every purpose. Feel free to use this as reference, or modify it for your project as you see fit!
{% endhint %}

If you want to enable the plugin, you can find it in Plugins -> Installed -> MSquared -> M2 Extras: Skins System

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-b7bc0c0478c920fddd64efb296c761f1b20df277%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## How to configure a skin

Using [making-dataasset-classes](https://docs.msquared.io/creation/unreal-development/features-and-tutorials/helpers-and-extras/making-dataasset-classes "mention"), we have made a `BP_SkinDataAsset` class, that extends `M2_DataAsset`.

In this, we can create instanced object properties (see [instanced-objects-in-blueprints](https://docs.msquared.io/creation/unreal-development/features-and-tutorials/helpers-and-extras/instanced-objects-in-blueprints "mention")) that contain the various skin settings we want to be associated with the skin (in the example, we have made a single `BP_ExampleSkinSetting` which has 2 colours: one for the background, and one for the font)

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-23d5c83a8dd2fe9887655d11445bc50d0d08e089%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

With the data asset class made, we can make data assets from that base class, and modify the values for the settings we have created. These will be the different "skins".

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-1300b3823ecd64fa3cc49f5c9030fcfdb7ab5941%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### Searching the skin asset

To search the skin asset for the right instanced object, we have added some helpers: `GetSettingByClass` and `GetAllSkinSettings`. With these, a user can search for e.g. our `BP_ExampleSkinSetting` from the asset.

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-f997d71d2243262439d78363783faf8fd3bf7b27%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-56ea240cf59d093fd9afdc07aefeab735af7ac4f%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## How to use the skin

### The Skin Manager

For the skins system to be used in your level, first you will need to place the skin manager into your level (`BP_SkinManager`).

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-81838a5b57fad7f2f7260eefac6f48de1d5e459d%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

This Skin Manager is the actor responsible for tracking the currently used `SkinAsset`.

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-8325c62b41b09f0053a66db4f9a38f754a357e7f%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### The Skin Function Library

`BPFL_Skins` contains helper functions that enable a user (e.g. a widget) to e.g. get the current skin, or listen to updates:

* `GetSkinManager`: Returns the skin manager.
  * NOTE: It must be manually added to the level for this to work.
* `GetCurrentSkinAsset`: Returns the current skin asset being used.
  * If this is called in the editor (e.g. when previewing widgets), this will return the default value in the BP\_SkinManager), using `GetCDO`
* `ListenToSkinUpdates`: Will trigger a delegate when we have a skin, and any time the skin is updated. Can be used to initialize and also listen to updates.

### An example in action (WBP\_ExampleSkinnedWidget)

`WBP_ExampleSkinnedWidget` is the example widget packaged in `M2Extras: Skins System`. It shows how to listen to the skin asset correctly using the helper functions, both in Design time (where it will use the skin manager's default value), and at runtime, where it will use the latest value in the skin manager

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-08264e627314ae5a6f6e9e9764dd540c3cb14c48%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>