[Tutorial] UE5 How To Change Custom Asset Appearance In Editor

This tutorial will cover setting custom thumbnails for your unreal engine custom asset type, asset colors, display names, and more. We assume you have created your custom asset type and you now want to style and change the way it appears in the editor, such as setting a custom icon for the asset type to make it easily recognizable.

Creating Our Asset Styling Class

We need a class that will host all our styling variables and logic and a way to interface with the engine. To create this class we need to inherit from FSlateStyleSet class. FSlateStyleSet is part of SlateCore module. To easily figure out which module an unreal engine class requires, you can see our LNK2001 error troubleshooting guide.

				
					//BcgAssetStyles.h

class FBcgAssetStyles : public FSlateStyleSet
{
public:

	FBcgAssetStyles();

	~FBcgAssetStyles();
};

FSlateStyleSet has a constructor that requires that you supply a name for your style set. InStyleSetName is The name used to identify this style set. We need to do this in the CPP file on our constructor definition like this:

				
					//BcgAssetStyles.cpp

#include "BcgAssetStyles.h"

FBcgAssetStyles::FBcgAssetStyles(): FSlateStyleSet("BcgAssetStylesSet")
{
}

FBcgAssetStyles::~FMidiAssetStyles()
{
}

BcgAssetStylesSet in this case is the name we supplied. You can submit any name it doesn’t matter. It’s for internal use by unreal engine.

Preparing Our Custom Asset Thumbnail

Before we continue, we need to ensure we have a thumbnail to use for our custom asset. The custom thumbnail can be a PNG of any square size. For example, we will be using our 64×64 Png Icon as our thumbnail. We are about to reference this icon in the code so make sure you have a thumbnail ready and place it under a subfolder in your plugin folder. For example BcgPlugin/Resources/BcgIcon64x64.png

Referencing Our Custom Asset Thumbnail In The FSlateStyleSet Class

We are going to reference our Custom Asset Thumbnail inside the CPP file of our FSlateStyleSet child class. Specifically in the constructor. This is how you do it:

				
					//BcgAssetStyles.cpp

#include "BcgAssetStyles.h"

FBcgAssetStyles::FBcgAssetStyles(): FSlateStyleSet("BcgAssetStylesSet")
{
    //Get the plugin manager, find the plugin, and get its basedir
    const FString PluginBaseDir = IPluginManager::Get().FindPlugin("BcgPlugin")->GetBaseDir();
    
	//icon dimensions
	 const FVector2D Icon64x64(64.0f, 64.0f);
	 
	 //The Image in SlateBrush. Unreal Editor uses this.
	FSlateImageBrush* SlateImageBrush = new FSlateImageBrush(IconPath, Icon64x64);
	
	Set("ClassThumbnail.BcgAsset", SlateImageBrush);
}

FBcgAssetStyles::~FMidiAssetStyles()
{
}

IPluginManager FindPlugin

As we mentioned before, we need to reference our png file path. To do this we need to get the path of the plugin since our icon is inside that path/directory. To do this we use a helper class IPluginManager which has static methods to find plugins and from there figure out their paths.

Callling ->GetBaseDir() should get us the directory of the plugin. Make sure you submit the correct plugin name to the FindPlugin function.

FVector2D

We need an FVector2D initialized to the dimensions of our PNG icon. If you have a 128×128 Png your FVector2D should be 128.0f, 128.0f . The name of the FVector2D should not matter but a common convention is to attach the dimensions to the name as we did.

The Set Function

The Set Function is where the magic happens. This is where we “set“the custom thumbnail for our custom asset type by passing in the image brush. The set function takes in a property name, and the style for that name. for example, ClassThumbnail tells unreal engine we want to specify our ClassThumbnail.

BcgAsset here must match exactly your UAsset Class name, without the U. So if you have UBcgAsset, You need ClassThumbnail.BcgAsset.

There are more properties to customize about your asset apart from the Thumbnail. We will cover those in our Unreal Engine Plugin Development Course.

Register Our Custom Asset Style

Now that we have created our custom asset style and thumbnails, we need to register them with the editor. We can do this in our module class inside the StartupModule() function by calling

FSlateStyleRegistry::RegisterSlateStyle(StyleObjectHere);

And on the shutdown, we should deregister the style.

FSlateStyleRegistry::UnRegisterSlateStyle(*StyleObjectHere);

We highly recommend our Plugin Development Course for unreal engine. Videos make all of this 10x easier. Do hesitate to contact us to help with your projects.