{"id":3670,"date":"2022-05-31T10:27:08","date_gmt":"2022-05-31T08:27:08","guid":{"rendered":"https:\/\/store.algosyntax.com\/?post_type=asx-lms-tutorial-cpt&p=3670"},"modified":"2026-03-09T05:02:45","modified_gmt":"2026-03-09T03:02:45","slug":"ue5-how-to-change-custom-asset-appearance","status":"publish","type":"asx-lms-tutorial-cpt","link":"https:\/\/store.algosyntax.com\/tutorials\/unreal-engine\/ue5-how-to-change-custom-asset-appearance\/","title":{"rendered":"[Tutorial] UE5 How To Change Custom Asset Appearance In Editor"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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 <\/a>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.<\/p>

\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t

Creating Our Asset Styling Class<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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 <\/a>class. FSlateStyleSet is part of SlateCore<\/a> module. To easily figure out which module an unreal engine class requires, you can see our LNK2001 error troubleshooting guide<\/a>.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\/\/BcgAssetStyles.h\r\n\r\nclass FBcgAssetStyles : public FSlateStyleSet\r\n{\r\npublic:\r\n\r\n\tFBcgAssetStyles();\r\n\r\n\t~FBcgAssetStyles();\r\n};<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed0f479 elementor-widget elementor-widget-text-editor\" data-id=\"ed0f479\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>FSlateStyleSet has a constructor that <strong>requires<\/strong> that you supply a name for your style set. <strong>InStyleSetName<\/strong>\u00a0 is The name used to identify this style set. We need to do this in the CPP file on our constructor definition like this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-629b207 elementor-widget elementor-widget-code-highlight\" data-id=\"629b207\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>\/\/BcgAssetStyles.cpp\r\n\r\n#include \"BcgAssetStyles.h\"\r\n\r\nFBcgAssetStyles::FBcgAssetStyles(): FSlateStyleSet(\"BcgAssetStylesSet\")\r\n{\r\n}\r\n\r\nFBcgAssetStyles::~FMidiAssetStyles()\r\n{\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b354ca elementor-widget elementor-widget-text-editor\" data-id=\"0b354ca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>BcgAssetStylesSet in this case is the name we supplied. You can submit any name it doesn&#8217;t matter. It&#8217;s for internal use by unreal engine.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b485cf elementor-widget elementor-widget-heading\" data-id=\"5b485cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Preparing Our Custom Asset Thumbnail<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f22ef5 elementor-widget elementor-widget-text-editor\" data-id=\"4f22ef5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>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&#215;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<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23cbc85 elementor-widget elementor-widget-heading\" data-id=\"23cbc85\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Referencing Our Custom Asset Thumbnail In The FSlateStyleSet Class<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-afbbd29 elementor-widget elementor-widget-text-editor\" data-id=\"afbbd29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>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:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d84725 elementor-widget elementor-widget-code-highlight\" data-id=\"9d84725\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-cpp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-cpp\">\n\t\t\t\t\t<xmp>\/\/BcgAssetStyles.cpp\r\n\r\n#include \"BcgAssetStyles.h\"\r\n\r\nFBcgAssetStyles::FBcgAssetStyles(): FSlateStyleSet(\"BcgAssetStylesSet\")\r\n{\r\n    \/\/Get the plugin manager, find the plugin, and get its basedir\r\n    const FString PluginBaseDir = IPluginManager::Get().FindPlugin(\"BcgPlugin\")->GetBaseDir();\r\n    \r\n\t\/\/icon dimensions\r\n\t const FVector2D Icon64x64(64.0f, 64.0f);\r\n\t \r\n\t \/\/The Image in SlateBrush. Unreal Editor uses this.\r\n\tFSlateImageBrush* SlateImageBrush = new FSlateImageBrush(IconPath, Icon64x64);\r\n\t\r\n\tSet(\"ClassThumbnail.BcgAsset\", SlateImageBrush);\r\n}\r\n\r\nFBcgAssetStyles::~FMidiAssetStyles()\r\n{\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-717083e elementor-widget elementor-widget-heading\" data-id=\"717083e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">IPluginManager FindPlugin<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-97152ce elementor-widget elementor-widget-text-editor\" data-id=\"97152ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>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 <a href=\"https:\/\/docs.unrealengine.com\/4.27\/en-US\/API\/Runtime\/Projects\/Interfaces\/IPluginManager\/\" target=\"_blank\" rel=\"noopener\">IPluginManager<\/a> which has static methods to find plugins and from there figure out their paths.<br \/><br \/>Callling -&gt;GetBaseDir() should get us the directory of the plugin. Make sure you submit the correct plugin name to the FindPlugin function.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bc4134 elementor-widget elementor-widget-heading\" data-id=\"2bc4134\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">FVector2D<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd8c682 elementor-widget elementor-widget-text-editor\" data-id=\"bd8c682\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>We need an FVector2D initialized to the dimensions of our PNG icon. If you have a 128&#215;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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5d8d7e elementor-widget elementor-widget-heading\" data-id=\"f5d8d7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The Set Function<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31ed939 elementor-widget elementor-widget-text-editor\" data-id=\"31ed939\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>The Set Function is where the magic happens. This is where we &#8220;<strong>set<\/strong>&#8220;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. <br \/><br \/>BcgAsset here must match exactly your UAsset Class name, without the U. So if you have UBcgAsset, You need ClassThumbnail.BcgAsset. <br \/><br \/>There are more properties to customize about your asset apart from the Thumbnail. We will cover those in our Unreal Engine Plugin Development Course.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccb5ace elementor-widget elementor-widget-heading\" data-id=\"ccb5ace\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Register Our Custom Asset Style<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f99b3d elementor-widget elementor-widget-text-editor\" data-id=\"9f99b3d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>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<br \/><br \/><br \/>FSlateStyleRegistry::RegisterSlateStyle(StyleObjectHere);<br \/><br \/>And on the shutdown, we should deregister the style. <br \/><br \/>FSlateStyleRegistry::UnRegisterSlateStyle(*StyleObjectHere);<br \/><br \/>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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"featured_media":0,"template":"","asx-lms-tutorial-categories":[55,58,45],"asx-lms-tutorial-tags":[46],"class_list":["post-3670","asx-lms-tutorial-cpt","type-asx-lms-tutorial-cpt","status-publish","hentry","asx-lms-tutorial-categories-plugin-development","asx-lms-tutorial-categories-unreal-c-api","asx-lms-tutorial-categories-unreal-engine","asx-lms-tutorial-tags-cpp","entry"],"acf":[],"_links":{"self":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/asx-lms-tutorial-cpt\/3670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/asx-lms-tutorial-cpt"}],"about":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/types\/asx-lms-tutorial-cpt"}],"version-history":[{"count":0,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/asx-lms-tutorial-cpt\/3670\/revisions"}],"wp:attachment":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/media?parent=3670"}],"wp:term":[{"taxonomy":"asx-lms-tutorial-categories","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/asx-lms-tutorial-categories?post=3670"},{"taxonomy":"asx-lms-tutorial-tags","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/asx-lms-tutorial-tags?post=3670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}