Modding:Creating Item Icons

From bg3.wiki
Revision as of 16:59, 26 February 2024 by CommanderStrawberry (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
bg3.wiki modding
Modding homepage
Modding resources - Meshes, Models, Tools, etc.
Armor/Clothing Texture Maps
Body Models
Custom polymorph
Dependencies
Face and body textures
Fixing bone errors
Fixing neck seams
Fixing UV errors
Getting Started with BG3 Modding
Hair Meshes
Head Models
Mod troubleshooting
Modding class icons
NPC Head Models
Tiefling Horn Models
Non-VT Shaders
Race UUID
Sample Templates
Texture formatting
Tools
TreasureTables References
Tutorials
VertexColorMaskSlots
Working with LSX files
Modding guides
BG3 Mini Tool
Blender Export Settings
Code Snippets
Coding An Item
Compatibility Framework
Creating a custom cloth collider
Creating and Exporting Meshes in Blender
Creating Item Icons
Creating meta.lsx
Creating mods
Editing a Character Creation Preset
Editing Equipment.txt
Hotloading
How To Find A Virtual Texture
Installing mods
Localization
Modding resources
Packaging mods
Texture formatting
Understanding Mod Folder Structure
Unpacking and converting files
Working with LSX files
Hair modding
Creating Custom Hair with Hair Tool
Creating hair merged.lsf with custom texture
Creating Hair Mods
Creating meta.lsx
Custom Hair Highlights
Hair Meshes
Hair Mod File Setup
Hair Mod Mesh Setup
Head modding
Creating meta.lsx
Face and body textures
Fixing neck seams
Head Modding
Head Models
Head Troubleshooting
NPC Head Models
Item modding - Armours, Outfits, Weapons etc.
Armor/Clothing Texture Maps
Coding An Item
Creating and Exporting Meshes in Blender
Creating Armor Mods
Creating Item Icons
Creating meta.lsx
Creating Outfit Textures
Fixing bone errors
How To Find A Virtual Texture
Texture formatting
TreasureTables References
Use Outfit Builder To Refit Outfits
VertexColorMaskSlots
Race/class modding
Creating Race Mods
Editing a Character Creation Preset

This guide is for when you want to give your modded in items unique icons that look like the ones in the game.

Dimensions[edit | edit source]

An item Icon has 3 dds parts.

Tooltip Icon[edit | edit source]

This is 380x380px icon in the best quality it will be seen, when you hover over the item in the inventory.

It has a transparency fade gradient from the bottom.

Controller Icon[edit | edit source]

This is a 144x144px icon. It will be seen by people who play the game with a game controller.

It is the same as the above, but it has no fade gradient.

Icon Atlas[edit | edit source]

This is a 64x64px square tile that will be seen in the inventory and hotbar.

It is part of an atlas. The atlas requires code to register in the game(see below).

Folder Structure of Icons[edit | edit source]

MySweetMod>Public>Game>Assets>ControllerUIicons>items_png 144px icons for your items

MySweetMod>Public>Game>Assets>ControllerUIicons>skills_png 144px icons for your spells and ability icons

MySweetMod>Public>Game>Assets>Tooltips>Icons 380px spell icons

MySweetMod>Public>Game>Assets>Tooltips>ItemIcons 380px item icons


MySweetMod\Public\MySweetMod\Assets\Textures\Icons 'MySweetMod_Icons.dds' Icon atlas dds goes here.

MySweetMod\Public\MySweetMod\Content\UI\[PAK]_UI Your _merged.lsx goes here. This tells the game where the atlas is. (and has its own UUID)

MySweetMod\Public\MySweetMod\GUI Icons_Items.lsx goes here. This tells the game what size the atlas is, where the image is on the atlas and what name the icon has to link it all up. This file is NOT converted to lsf!

Sample Code for _merged.lsf[edit | edit source]

<?xml version="1.0" encoding="utf-8"?>
<save>
   <version major="4" minor="0" revision="9" build="328" />
   <region id="TextureBank">
       <node id="TextureBank">
           <children>
               <node id="Resource">
                   <attribute id="ID" type="FixedString" value="GENERATE NEW UUID" />
                   <attribute id="Localized" type="bool" value="False" />
                   <attribute id="Name" type="LSString" value="MySweetMod_Icons" />
                   <attribute id="SRGB" type="bool" value="True" />
                   <attribute id="SourceFile" type="LSString" value="Public/MySweetMod/Assets/Textures/Icons/MySweetMod_Icons.dds" />
                   <attribute id="Streaming" type="bool" value="True" />
                   <attribute id="Template" type="FixedString" value="Icons_Items" />
                   <attribute id="Type" type="int64" value="0" />
               </node>
           </children>
       </node>
   </region>
</save>

Sample Code for Icons_Items[edit | edit source]

If your mod uses only one icon and has a 64x64 atlas, you can use this: 

<?xml version="1.0" encoding="utf-8"?>
<save>
   <version major="4" minor="0" revision="9" build="328" /> 
   <region id="TextureAtlasInfo"> 
       <node id="root">
           <children>
<node id="TextureAtlasIconSize">
                   <attribute id="Height" type="int64" value="64"/>
                   <attribute id="Width" type="int64" value="64"/>
               </node>
               <node id="TextureAtlasPath">
                   <attribute id="Path" type="LSString" value="Assets/Textures/Icons/MySweetMod_Icons.dds"/>
                   <attribute id="UUID" type="FixedString" value="GENERATE NEW UUID HERE"/>
               </node>
             <node id="TextureAtlasTextureSize">
                   <attribute id="Height" type="int64" value="64"/>
                   <attribute id="Width" type="int64" value="64"/>
               </node>
<node id="IconUV">
<attribute id="MapKey" type="FixedString" value="MySweetMod_Item_Icon"/> 1
<attribute id="U1" type="float" value="0.0"/> Left side of icon
<attribute id="U2" type="float" value="1.0"/> Right side of icon
<attribute id="V1" type="float" value="0.0"/> Top side of icon
<attribute id="V2" type="float" value="1.0"/> Bottom side of icon
</node> 
           </children>
       </node>
   </region>
</save>

If you are making a mod that has a 256 size atlas room for 16 icons, you can use this:

256x256 image template for icons. Each square is 64 px across.
<save>
   <version major="4" minor="0" revision="9" build="328" />
   <region id="TextureAtlasInfo"> 
       <node id="root">
           <children>
               <node id="TextureAtlasIconSize">
                   <attribute id="Height" type="int64" value="64"/>
                   <attribute id="Width" type="int64" value="64"/>
               </node>
               <node id="TextureAtlasPath">
                   <attribute id="Path" type="LSString" value="Assets/Textures/Icons/MySweetMod_Icons.dds"/>
                   <attribute id="UUID" type="FixedString" value="GENERATE UUID HERE"/>
               </node>
               <node id="TextureAtlasTextureSize">
                   <attribute id="Height" type="int64" value="256"/>
                   <attribute id="Width" type="int64" value="256"/>
               </node>
           </children>
       </node>
   </region>
   <region id="IconUVList">
       <node id="root">
           <children>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_1_Icon"/> 1
                   <attribute id="U1" type="float" value="0.0"/> Left
                   <attribute id="U2" type="float" value="0.25"/> Right
                   <attribute id="V1" type="float" value="0.0"/> Top
                   <attribute id="V2" type="float" value="0.25"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_2_Icon"/> 2
                   <attribute id="U1" type="float" value="0.25"/> Left
                   <attribute id="U2" type="float" value="0.5"/> Right
                   <attribute id="V1" type="float" value="0.0"/> Top
                   <attribute id="V2" type="float" value="0.25"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_3_Icon"/> 3
                   <attribute id="U1" type="float" value="0.5"/> Left
                   <attribute id="U2" type="float" value="0.75"/> Right
                   <attribute id="V1" type="float" value="0.0"/> Top
                   <attribute id="V2" type="float" value="0.25"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_4_Icon"/> 4
                   <attribute id="U1" type="float" value="0.75"/> Left
                   <attribute id="U2" type="float" value="1.0"/> Right
                   <attribute id="V1" type="float" value="0.0"/> Top
                   <attribute id="V2" type="float" value="0.25"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_5_Icon"/> 1
                   <attribute id="U1" type="float" value="0.0"/> Left
                   <attribute id="U2" type="float" value="0.25"/> Right
                   <attribute id="V1" type="float" value="0.25"/> Top
                   <attribute id="V2" type="float" value="0.5"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_6_Icon"/> 2
                   <attribute id="U1" type="float" value="0.25"/> Left
                   <attribute id="U2" type="float" value="0.5"/> Right
                   <attribute id="V1" type="float" value="0.25"/> Top
                   <attribute id="V2" type="float" value="0.5"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_7_Icon"/> 3
                   <attribute id="U1" type="float" value="0.5"/> Left
                   <attribute id="U2" type="float" value="0.75"/> Right
                   <attribute id="V1" type="float" value="0.25"/> Top
                   <attribute id="V2" type="float" value="0.5"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_8_Icon"/> 4
                   <attribute id="U1" type="float" value="0.75"/> Left
                   <attribute id="U2" type="float" value="1.0"/> Right
                   <attribute id="V1" type="float" value="0.25"/> Top
                   <attribute id="V2" type="float" value="0.5"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_9_Icon"/> 1
                   <attribute id="U1" type="float" value="0.0"/> Left
                   <attribute id="U2" type="float" value="0.25"/> Right
                   <attribute id="V1" type="float" value="0.5"/> Top
                   <attribute id="V2" type="float" value="0.75"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_10_Icon"/> 2
                   <attribute id="U1" type="float" value="0.25"/> Left
                   <attribute id="U2" type="float" value="0.5"/> Right
                   <attribute id="V1" type="float" value="0.5"/> Top
                   <attribute id="V2" type="float" value="0.75"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_11_Icon"/> 3
                   <attribute id="U1" type="float" value="0.5"/> Left
                   <attribute id="U2" type="float" value="0.75"/> Right
                   <attribute id="V1" type="float" value="0.5"/> Top
                   <attribute id="V2" type="float" value="0.75"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_12_Icon"/> 4
                   <attribute id="U1" type="float" value="0.75"/> Left
                   <attribute id="U2" type="float" value="1.0"/> Right
                   <attribute id="V1" type="float" value="0.5"/> Top
                   <attribute id="V2" type="float" value="0.75"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_13_Icon"/> 1
                   <attribute id="U1" type="float" value="0.0"/> Left
                   <attribute id="U2" type="float" value="0.25"/> Right
                   <attribute id="V1" type="float" value="0.75"/> Top
                   <attribute id="V2" type="float" value="1.0"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_14_Icon"/> 2
                   <attribute id="U1" type="float" value="0.25"/> Left
                   <attribute id="U2" type="float" value="0.5"/> Right
                   <attribute id="V1" type="float" value="0.75"/> Top
                   <attribute id="V2" type="float" value="1.0"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_15_Icon"/> 3
                   <attribute id="U1" type="float" value="0.5"/> Left
                   <attribute id="U2" type="float" value="0.75"/> Right
                   <attribute id="V1" type="float" value="0.75"/> Top
                   <attribute id="V2" type="float" value="1.0"/> Bottom
               </node>
               <node id="IconUV">
                   <attribute id="MapKey" type="FixedString" value="MySweetMod_16_Icon"/> 4
                   <attribute id="U1" type="float" value="0.75"/> Left
                   <attribute id="U2" type="float" value="1.0"/> Right
                   <attribute id="V1" type="float" value="0.75"/> Top
                   <attribute id="V2" type="float" value="1.0"/> Bottom
               </node>
           </children>
       </node>
   </region>
</save>

Tools to Create Icons[edit | edit source]

- The Modder's Multitool has an atlas converter.

- Invisible Head and Body

- Custom Backgrounds

- Chroma Key Droppable Object

- Visible Shields - if you have made a shield, this will make it visible in the respec screen.

- Sample Equipment Mod has a template for icons that still works.

- Mod Builder will generate LSX code and folder structure for you. It is recommended you use this over the sample equipment one, as its atlas is more compact, and few mods add 54+ icons.

- Icon resources, ripped from game (tumblr)

- Icon resources ripped from game (nexus)

Basic image editing guide to create icons[edit | edit source]

  • Install the Custom Backgrounds background mod
  • Put the clothes or the weapon on your character, and enter the respec screen via Withers.
  • Alternately, you can edit the equipment.txt of a class to have your outfit as its starting equipment, and start a new game to look at the character in the CC
  • Screenshot
  • Paste your screenshot into your image editing program.
  • Select and Remove background
  • Create border around object (edit > stroke) > (still selected) Gaussian blur. You can also experiment with colour layers.
  • Add the fade gradient. You should have 2 different .PNG versions of the icon, one with the fade out and one without.
  • Size correctly, and save as .DDS

Creating Spell Icons[edit | edit source]

The process is similar, but in your atlas you need to give a spell icon a background and not leave it transparent.

You will find backgrounds for spells in Game\Public\Game\GUI\Assets\ControllerUIIcons\icon_bg_png\

Most useful will likely be the action_bg orspell_bg files.

Compression[edit | edit source]

Save your icons in .DDS DTX5, No Mipmaps. (Mipmaps are only needed for things that move closer and further to the camera, they will only make your icons blurry)

You will need to name your atlas .dds NOT .DDS. (or to match whatever you have written in your .lsx code)


Settings for Paint.NET: R8G8B8A8 (sRGB, DX 10+)

Retrieved from "https://dev.bg3.wiki/w/index.php?title=Modding:Creating_Item_Icons&oldid=155953"