Modding Tutorial: Icons and Leader Images

This tutorial assumes you know the basics of creating a mod. This is not a tutorial to teach you how to make a leader or civilization. Instead, its focus is on making and implementing icons and leader art.

• This tutorial uses "->" to represent choices in a context menu, such as in a right-click or drop-down list.
  
• Regularly hit Ctrl+Shift+s to save all when working in your project.
  
• For steps that are similar or identical to preceding steps, images are largely omitted.
  
• The method by which leader icons are added in this guide can be used to add icons for most other elements of the game, such as civilization or unit icons.
  
• There are several mentions of the SDK assets folder, which can be found at steamapps\common\Sid Meier's Civilization VI SDK Assets\Civ6\pantry\Textures.

A solid preparation phase means fewer—hopefully zero—broken icons or Cleopatra leader images in the future.

First thing's first, right-click your Art.xml file in your Solution Explorer -> Rename, and change any underscores to spaces (unless you actually have underscores in your project name). Otherwise, when we go to use Asset Editor later, it'll throw a hissy fit. Don't launch Asset Editor quite yet.

⠀

Let's yeet some folders into this project. Right-click the project name -> Add -> New Folder. We want the following folders at root level: Artdefs, Icons, XLPs.

Right-click the Icons folder -> Add -> New Item. Create an Icons.xml file.
If you don't already have a config file: Repeat the previous step, this time right-clicking the name of your project ("Icons and Leader Art Tutorial" in the above image). Name the new file Config.sql. Now, it's time to launch the infamous Asset Editor. From the top toolbar, Tools -> Launch Asset Editor...
With Asset Editor open, File -> New -> Artdef. Now, you should have something like this:
From the Template drop-down -> Leaders. Ctrl+s and save as Leaders in your project's Artdefs folder, but don't close it just yet. Now right-click the Leaders entry in your artdef -> Add Element, and an element with a green dot should appear.
Click that element to bring up its details in the right panel.
Change the Name field to your leader's LeaderType as defined in the database. In my case LEADER_SAILOR_SKELLYTON. Change the Audio field to the civilization whose music you'd like your leader to use. I chose Cree because I hate myself. Ctrl+s to save. Ctrl+w to close. Similar to the above. File -> New -> Artdef. From the Template drop-down -> LeaderFallback. Ctrl+s and save as LeaderFallbacks in your project's Artdefs folder, but don't close it just yet.

Now right-click the Leaders entry in your artdef -> Add Element, and an element with a green dot should appear. Click that element to bring up its details in the right panel. Change the Name field to your leader's LeaderType as defined in the database. In my case LEADER_SAILOR_SKELLYTON. Now right-click Animations -> Add Element, and a new line should appear in the right pane. Looking to add portraits that change depending on the leader's mood? If so, check below for a few more steps. Otherwise: Ctrl+s to save. Ctrl+w to close. We'll come back to this later. Continue to the "XLPs" section below.

Only consult this section if you're adding multiple mood portraits for your leader. You're going to want to repeat the right-click Animations -> Add Element process until you have 23 lines. Use the following list for entries in the Name column. Each new entry is separated by a comma: DECLARE_WAR_FROM_AI, DECLARE_WAR_FROM_HUMAN, DEFAULT, DEFEAT, ENRAGED, FIRST_MEET, HAPPY, HAPPY_IDLE, HAPPY_NEGATIVE, HAPPY_POSITIVE, KUDOS, NEUTRAL, NEUTRAL_GREETING, NEUTRAL_POSITIVE, NEUTRAL_TO_HAPPY, NEUTRAL_TO_UNHAPPY, UNHAPPY, UNHAPPY_IDLE, UNHAPPY_NEGATIVE, UNHAPPY_POSITIVE, UNHAPPY_TO_NEUTRAL, WARNING. The BLP Entry column will contain the names of the files you want to use for these moods, but we'll come back to this once we've actually imported the files. For now, your artdef should look like the image below. Ctrl+s to save. Ctrl+w to close.

Still in Asset Editor, File -> New -> XLP gives you this:
From the XLP Class drop-down -> UITexture. Enter UI/Icons in the Package Name field.

Ctrl+s and save as Atlas in your XLPs folder. Ctrl+w to close. File -> New -> XLP. From the XLP Class drop-down -> UITexture. Enter UILeaders in the Package Name field.

Ctrl+s and save as UILeaders in your XLPs folder. Ctrl+w to close. File -> New -> XLP. From the XLP Class drop-down -> LeaderFallback. Enter LeaderFallbacks in the Package Name field.

Ctrl+s and save as LeaderFallbacks in your XLPs folder. Ctrl+w to close. What you add here will depend largely on what your mod is trying to do—leader, civ, unit, district, etc. I'm going to tell you what to add specifically for leader icons and art. If yours differs, or you want an automated method, I suggest skipping this section and using thecrazyscot's Mod Art Generator[forums.civfanatics.com] at the very end of this tutorial, just before building your solution. Still in Asset Editor: File -> Open Art.xml -> choose your project's Art.xml file. Your screen should look something like this:

Scroll the list of items in the Art Consumers box until you find Leaders, and choose that. Now, on the right side, beside Packages, click the Add... button. From there, choose your Leaders artdef file.*
Scroll the list of items in the Libraries box until you find LeaderFallback, and choose that. Now, on the right side, beside Packages, click the Add... button. From there, choose your LeaderFallbacks XLP file.* * See the end of this section.
Scroll the list of items in the Libraries box until you find UITexture, and choose that. Now, on the right side, beside ArtDefs, click the Add... button. From there, choose your Atlas and UIleaders XLP files. Should then look like this:

Scroll the list of items in the Libraries box until you find LeaderFallback, and choose that. Now, on the right side, beside Packages, click the Add... button. From there, choose your LeaderFallbacks XLP file.

Ctrl+s to save. Ctrl+w to close.

Now, switch from Asset Editor back to your Modbuddy project. In solution explorer, right-click the Artdefs folder -> Add -> Existing Item... and choose the two artdef files you created. Next, right-click the XLPs folder -> Add -> Existing Item... and choose the three xlp files you created. Your solution explorer probably won't have only these folders and files, but it should have at least these folders and files:

* Open your Art.xml in Modbuddy. Ctrl+f to search for Leaders.artdef in Current Document. Change it to <Element text="Leaders.artdef"/> removing the folder path. Do the same thing with LeaderFallbacks.artdef, changing it to <Element text="LeaderFallbacks.artdef"/>. Ctrl+s to save.

From the top bar, click Project -> YourProjectHere Properties... You should see something like this:
⠀

• Switch to the FrontEnd Actions tab.
  
• Now click the Add Actions button. This will add an UpdateDatabase action by default.
  
• Click that, and it'll expand to the right with ID, Type, Custom Properties, and Files.
  
• Change the ID field from NewAction to Icons.
  
• Click the Type drop-down where it says UpdateDatabase, and choose UpdateIcons.
  
• To the right of the Files box, click Add. A prompt will appear with the File and Priority options.
• From the drop-down, choose Icons/Icons.xml. Leave Priority empty. Click OK.

Click the In-Game Actions tab and repeat the previous instructions.

• Switch to the FrontEnd Actions tab.
  
• Now click the Add Actions button. This will add an UpdateDatabase action by default.
  
• Click that, and it'll expand to the right with ID, Type, Custom Properties, and Files.
  
• Change the ID field from NewAction to Art.
  
• Click the Type drop-down where it says UpdateDatabase, and choose UpdateArt.
  
• To the right of the Files box, click Add. A prompt will appear with the File and Priority options.
• From the drop-down, choose (Mod Art Dependency File). Leave Priority empty. Click OK.

Click the In-Game Actions tab and repeat the previous instructions. If you don't already have a config file.

• Switch to the FrontEnd Actions tab.
  
• Now click the Add Actions button. This will add an UpdateDatabase action by default.
  
• Click that, and it'll expand to the right with ID, Type, Custom Properties, and Files.
  
• Change the ID field from NewAction to Config.
  
• To the right of the Files box, click Add. A prompt will appear with the File and Priority options.
• From the drop-down, choose Config.sql (or your config file). Leave Priority empty. Click OK.

Remove any inserts into the DiplomacyInfo table. Some civilization and leader guides use this, and it conflicts with this guide.

The LoadingInfo table handles the loading screen. Set it up like so, replacing LEADER_SAILOR_SKELETON with your leader's LeaderType.

Tip: You can change the BackgroundImage column to a background used by an existing leader, such as LEADER_GORGO_BACKGROUND for red. More info below in the Leader Backgrounds section of Image Creation

In your config file, the Players table has a number of columns related to displaying your leader and civilization images. This only affects the leader selection screen. Please bear in mind that the list below relates only to columns relevant to the tutorial.

• Portrait: This generally goes unused unless you're using a custom portrait specifically for leader selection (see Image Creation below).
  
• PortraitBackground: Your leader's background. Typically uses the same background used during loading, but can be customized. (LEADER_SAILOR_SKELETON_BACKGROUND)
  
• LeaderIcon, LeaderAbilityIcon: Your leader's portrait icon without the size attached. Both entries are typically identical. (ICON_LEADER_SAILOR_SKELLYTON)
  
• CivilizationIcon, CivilizationAbilityIcon: The alpha image of your civilization's icon (white with transparent background).

The same logic can be applied to the PlayerItems Icons column.

Proper preparation is what makes all this go as it should. For image creation, just grab GIMP, Photoshop, or some alternative. Learning how to use any image manipulation software is beyond the scope of this tutorial.

Don't worry about saving as .dds. You don't need to anymore, so it isn't worth the effort. .png only. .png is seiso. All image layers should be merged before saving (only one layer!). Otherwise, don't start bawling when your art's bonkers.

• Sizes (square): 256, 80, 64, 55, 50, 45, 32
  
• On a 256x256 image, your portrait icon should have empty padding of about 10 pixels on each side. One way to achieve this is to first make your portrait as a 235x235 image, then increase the canvas size to 256x256 when you've finished, centering the portrait on the new canvas.
  
• Naming convention:
  
  • ICON_LeaderType_Size.png
    
    • Ex: ICON_LEADER_SAILOR_SKELLYTON_256.png

Examples:
⠀

• Size: 825x1024
  
• Your leader should be aligned to the left side of the image, completely within the frame, with about 40% of the image empty. This gives your leader some padding in relevant screens. You can fiddle with the width if you'd like more padding.
  
• Naming convention (save two copies):
  
  • FALLBACK_NEUTRAL_LeaderType.png
    
    • Ex: FALLBACK_NEUTRAL_LEADER_SAILOR_SKELLYTON.png
  • LeaderType_NEUTRAL.png
    
    • Ex: LEADER_SAILOR_SKELLYTON_NEUTRAL.png

Only consult this section if you're adding multiple mood portraits for your leader. Normally, a static leader portrait will use FALLBACK_NEUTRAL. However, if you followed the preparation step earlier for multiple portraits in your LeaderFallbacks.artdef, you can create as many different portraits as there were moods in the Name column. For each image change NEUTRAL in the filename to a mood for which you'd like to use that portrait. Examples:

• FALLBACK_NEUTRAL_LEADER_SAILOR_SKELLYTON
  
• FALLBACK_ANGRY_LEADER_SAILOR_SKELLYTON
  
• FALLBACK_POSITIVE_LEADER_SAILOR_SKELLYTON

Example Portrait:

⠀

• Size: 1920x960
  
• Naming convention:
  
  • LeaderType_BACKGROUND.png
    
    • Ex: LEADER_SAILOR_SKELLYTON_BACKGROUND.png

Tip: You can skip this step (and all further steps relating to _BACKGROUND.png) by changing the BackgroundImage column in the LoadingInfo table to a background used by a civ leader, such as LEADER_GORGO_BACKGROUND for red. Leugi made a handy reference image for exactly this, which he has kindly allowed me to use here.

This consists of two separate images, one layered over the other. The first (1) is the background art for your leader's diplomacy scene. The second (4) is the stylized frame that covers most of the background.

I've uploaded the stylized frame (4) here[i.imgur.com], but you can normally find it in the SDK assets folder. The frame often has a color applied to it.

• Size: 1920x1010
  
• Naming convention:
  
  • Background art: Remove LEADER from LeaderType_1.png
    
    • Ex: LeaderType LEADER_SAILOR_SKELLYTON becomes SAILOR_SKELLYTON_1.png
  • Frame: Remove LEADER from LeaderType_4.png
    
    • Ex: LeaderType LEADER_SAILOR_SKELLYTON becomes SAILOR_SKELLYTON_4.png

Tip: If you have a wide chongus leader who doesn't fit leader select all that well, you can create a tailored LEADER_SAILOR_SKELLYTON_SELECT.png in addition to _NEUTRAL.png and add it to your Config file by inserting LEADER_SAILOR_SKELLYTON_SELECT into the Portrait column of the Players table.

Tip: Ever wonder what happens between _1 and _4? Some leaders have props or layers that appear below layer _4 and move to create a more involved parallax effect. You can find examples in the SDK assets folder, and if you wish, you can add your own by using the established naming convention and using images with filenames ending in _1, _2, and _3.

Your file list should now look something like this:

Time to import these bad boys in Asset Editor. Tools -> Launch Asset Editor...

With Asset Editor open, File -> Open XLP. Open Atlas, LeaderFallbacks, and UILeaders.

⠀
Click the second folder icon in the Entries panel (follow the red arrow above), and a prompt will pop up. Click Add Source File... -> Choose all your ICON_ images. Now, in that same prompt, change Exporting Class to UserInterface, then click Apply to Selected. Click Import at the bottom right. Ctrl+s to save, Ctrl+w to close.
Click the second folder icon in the Entries panel, and a prompt will pop up. Click Add Source File... -> Choose all your FALLBACK_NEUTRAL_LEADER image. Now, in that same prompt, then click Apply to Selected. Click Import at the bottom right. Ctrl+s to save, Ctrl+w to close.

Click the second folder icon in the Entries panel, and a prompt will pop up. Click Add Source File... -> Choose your LEADER_X_NEUTRAL image, LEADER_X_BACKGROUND image, and your _1 and _4 images. Now, in that same prompt, change Exporting Class to UserInterface, then click Apply to Selected. Click Import at the bottom right. Ctrl+s to save, Ctrl+w to close.
⠀
File -> Open Art Def -> LeaderFallbacks.artdef. Expand the folder and your LEADER_ element so that you can see the Animations entry. Select Animations. In the pane to the right, change the Name field to DEFAULT and the BLP Entry field to the name of your FALLBACK_NEUTRAL_LEADER_ file (without the extension). Adding multiple mood portraits for your leader? Skip to the extra step below. Otherwise: Ctrl+s to save, Ctrl+w to close.

Only consult this section if you're adding multiple mood portraits for your leader. For each value in the BLP Entry column, you're going to add the name of the leader mood portrait that you want the game to use for that leader state. For example, you might want to use FALLBACK_POSITIVE_LEADER_SAILOR_SKELLYTON for the HAPPY row. When you've finished, your artdef should look something like the image below. Ctrl+s to save. Ctrl+w to close.

Close Asset Editor.

Copy + paste the following into your Icons.xml file. Then find and replace LEADER_SAILOR_SKELLYTON with your leader's LeaderType.


IconDefinitions tells Modbuddy what texture atlas to look at for the icons for your leader. IconTextureAtlases tells Modbuddy what the files are, and where to look in them. It could be more complicated than this, but K.I.S.S.

Ctrl+Shift+s, build or rebuild your solution. Easy peasy bones over easy.

If you need help, want to help others, or simply want to take part in the modding community, you're welcome to join the Civ VI Modding Helpline Discord[discord.gg]

Let's say you're adding something that doesn't require an artdef, like a new project for the Preserve district, and you have no other artdefs to be cooked in your project. Then you'll run into an issue with Modbuddy not generating a BLP. To get around this, create an artdef called UserInterface.artdef. Copy + paste the following into the artdef, replacing "Project Name Here" with the name of your Modbuddy project (as in the project within the solution—also the name of your Art.xml file).