Embedded Files
Icons are how assets are represented in the inventory to the player. The goal with icons is to have an image that closely resembles the asset with slight stylization to make the icon clearer to player despite it’s small size. To achieve this in ASA, a reference capture of the asset must be generated and from there a concept artist creates the final icon. Which will then be imported to the game engine. This guide will go over the entire process that is currently used in ASA so that you can generate your own similar icons starting with generating the icon reference captures all the way to checking the functionality of the icon and related features such as colorization.
📔Instructions
📔Instructions
Capture Icon Reference
The first step in creating an inventory icon is to create a reference capture. Reference captures are created sing Unreal’s high resolution screen shot feature along with custom depth to generate a PNG. From there the PNG is sent to the concept artist who will create a final icon from the reference capture. We’ll go over the steps on generating a icon capture below.
1. Find and load the Icon Capture Level.
The Icon Capture level is a simple level but it has everything you need to generate the icon capture. The reference for the Icon Capture Level is /Script/Engine.World'/Game/Test/Owen/IconMap.IconMap'. It’s encouraged to make a duplicate so that you may save your icon capture setups in case the icon needs to be recaptured for whatever reason.
The default icon map setup.
Icon Map Outliner
2. Duplicate the Demo Object folder and add your asset.
For this step it’s recommended you start by duplicating the Demo Object folder present in the icon map. The folder has a default mesh and is set up with a camera and three point lighting . It’ll be good starting point from which you can adjust the lighting and camera to better suit your asset. To duplicate the folder simply select the folder and it’s contents, right click and navigate to “Duplicate”.
The folder and it’s contents must be selected. If you just select the folder only the folder will be duplicated.
After duplicating the Demo Object folder you’ll need to replace the demo cube with your asset. To do so, select the cube actor, navigate to the static mesh parameter and then either drag and drop your asset or search for it in the drop down menu. Then click the arrow next to the material parameter to reset the material to that your static mesh. Once you have the demo cube replaced with your asset you are ready to begin adjusting the lighting.
3. Adjust your lighting and camera.
The demo object folder comes with the necessary components for three point lighting. Your primary light the key light, the back/rim light, the fill light, and a camera. For some objects the default set up may be sufficient, for others, you may need to adjust the lighting setup. When doing so it is important to keep the three point lighting intact as you adjust and move the lighting. At minimum, try to use two opposing lights to bring out the forms. If you object is metallic you may find it necessary to add additional fill lights, otherwise your object may become too dark. If you are unsure or having trouble with your lighting look at the icons of similar assets and try to replicate their lighting.
Diagram of a three point lighting setup.
Example of three point lighting.
4. Capture the Icon reference
With your lighting adjusted it’s now time to capture the reference image. To properly do so you’ll need to first pilot your camera. This done by right clicking on the camera actor, either in the outliner or in the scene, and then navigating to the “Pilot” view.
CTRL+SHIFT+P with the camera selected will also pilot the camera.
Once you have piloted your camera, navigate to viewport options menu (The 3 horizontal lines) in the upper left hand corner of the viewport and select “High Resolution Screenshot”.
Viewport options menu
After selecting “High Resolution Screenshot” the screenshot menu will pop up. There are two settings you need to set in this menu. The first is “Screenshot Size Multiplier” this will set the size of your capture. We want this to be fairly high to give the concept artist plenty of resolution to work with, however setting this value too high may cause your engine to crash. A “Screenshot Size Multiplier” value of 3 is recommended.
The second setting that needs to be enabled is “Use custom depth as mask” this will properly create the masked PNG from which the concept artist can create the alpha mask for the final icon. When “Use custom depth as mask” is enabled you should see just your asset against green. If you only see a green screen, your asset may not have custom depth enabled. If so, navigate to your mesh and in the details panel search for and enable “Render CustomDepth Pass”.
The High Resolution Screenshot menu with the correct settings
Make sure “Render CustomDepth Pass” is enabled when trying to capture the icon reference.
5. Finalize Icon.
In ASA the final step of generating the icon reference is usually to pass the icon to the concept artist who will modify and stylize the icon to better fit for aesthetic reasons and for clarity at the icons small in-game size. You can modify your icons however you wish, however you wish the most important part of finalizing the icon is ensuring that the final texture is power of 2 in size, typically 256x256.
Import Final Icon
When the icon is finalized you can now import it to engine. The naming convention for final icons is “HUD_AssetName_Icon”. Once you’ve imported your icon there are a few settings that need to be set. Ensure that the icon texture size is power of 2, typically icons should be 256x256 in size. Set the texture group to world and set the mip gen settings to “Sharpen 4”. Check that these settings are correct before committing the final icon.
Details panel of a final icon with correct settings.
Generate Icon Colorization Mask if needed
If your icon is for a structure you can move on to Step 5, however if your icon is for a weapon, armor or saddle, you must generate a colorization mask. This is because these items retain their colorization in the player’s inventory and should be represented in the icon. Similar to how colorization works on the assets themselves, icon colorization works by assigning different regions to parts of the icon so that the proper colors can be assigned in game via the material.
To start the process of generating an icon colorization mask it is recommended you recapture your icon reference, but this time reparent your asset's material instance to a material that that has the “Visualize Colorization Map” parameter. I recommend /Script/Engine.MaterialInstanceConstant'/Game/ASA/CoreMaterials/MasterMaterials/MIC/MI_ASA_Equipment.MI_ASA_Equipment'. Once your material instance is reparented you can enable the “Visualize Colorization Map” parameter to display the colorization regions of your asset. Some assets may require you set parameter “Invert Magenta/Yellow Colorization” to 0 to properly display the colorization regions in the right order.
Asset with it’s material instance reparented and “Visualize Colorization Map” enabled.
After you setup the material instance you are ready to capture your icon colorization reference. Capture the icon colorization reference with the same settings as before, however this time change your viewport view mode to “Unlit” as this will show our colorization colors without any influence from the lighting.
Icon Colorization Reference Capture
With the icon colorization reference captured we can now move to Photoshop. Start by opening the finalized icon and desaturating it to generate the colorized diffuse texture.
Final Icon with desaturation layer applied.
After desaturating your icon the next step is to import your colorization reference capture and resize it to fit over the final icon. From there you can use either the quick selection tool or color range select function to create new layers for the colorization regions from your colorization reference capture. If you would prefer you can also paint the colorization region layers instead.
Icon reference capture resized over final icon.
Final Icon colorization mask with color regions separated out.
Once you have your icon colorization mask and diffuse textures you’ll need to import to Unreal in the same folder as the final icon with the same texture settings. Just a reminder icon textures should be 256x256 in size, have their texture group set to world and mip gen settings set to “Sharpen 4”. The naming convention for the colorization mask is “HUD_AssetName_Icon_M” and “HUD_AssetName_Icon_D” for the diffuse texture.
Icon Diffuse and Colorization Mask alongside the final icon.
Set up HUD Colorization Material
Once you have your icon colorization mask and diffuse textures set up, you can now set up the HUD colorization material instance. To start setting up the material it is recommended that you find the HUD colorization material of a similar asset, duplicate it and move it to the icon subfolder you’ve created in your assets folder. The naming conventions of HUD colorization material instances is “HUD_AssetName_Icon_Colorized_MIC”.
Engineer Shirt Icon Subfolder.
With your icon material instance now in the right folder, you can hook up the colorization textures. To do so open the material instance and navigate to the “Albedo Map” parameter and either drag or drop your diffuse or search for it in the drop down menu. Do the same for the colorization mask with the “ColorizationMask” parameter. From there adjust you’ll need to adjust the colorization colors to match the original final icon as closely as possible. You may find yourself needing to make adjustments to the diffuse mask such as changing the contrast or brightness. Once you have your colors set you have finished setting up the icon colorization material instance.
A finished icon colorization material instance with the generated icon textures and proper colors.
Hook up Icons and Hud Material to relevant Blueprints
After importing your icon and setting up icon colorization as needed you can now move on to hooking the icon up to the BP. This step is quite simple, you’ll first need to identify the item BP for your asset. The easiest way to do so is to right click on your asset, navigate to the reference viewer and look for the BP that references the mesh. Then open the BP and search for “Item Icon” parameter. Once you have found the parameter you can either drag and drop the icon, or search for your icon in the drop down menu. If the asset also needed colorization you can hook the colorized HUD material instance up to the “Item Icon Material Parent” parameter as well.
Item BP Icon Settings.
Check Icon and Colorization functionality
Now all that is left to do is to check that the icon is properly displaying and is colorizable as needed. To check if a structure icon is working you’ll simply need to enter PIE and spawn in your structure using it’s primal item BP, which you should have found via the reference viewer in the last step. While you have the structure spawned be sure to check that it is colorizable and that the color regions are functioning as expected.
A structure with colorization correctly set up and a functioning icon.
To test if an icon with colorization is functioning correctly you’ll need to spawn in and paint the asset. After your asset been colorized the icon should reflect the new colors. Ensure that the color regions match, if not check to see if your icon colorization mask matches the colorization mask of the asset itself and adjust accordingly.
A armor piece with colorization correctly set up and a functioning colorized icon.
Page updated
Report abuse