Toggle search
Toggle menu
10.8K
22.4K
4.2K
230.9K
bg3.wiki
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Editing Modding:Creating Item Icons

From bg3.wiki
More actions
Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.

Latest revision Your text
Line 1: Line 1:
{{PageSeo
|title=Modding Resources
|description=This page is a hub for everything related to Modding Baldur's Gate 3. Check out the following guides to learn how to mod BG3.
|image=Modding_resources.webp
}}{{Modding box}}{{Modding sidebar}}<div column-width: "60em2;>
This guide is for when you want to give your modded in items unique icons that look like the ones in the game.
== Dimensions ==
== Dimensions ==
An item Icon has 3 dds parts.
An item Icon has 3 dds parts, all perfect squares.


=== Tooltip Icon ===
=== Tooltip Icon ===
This is 380x380px icon in the best quality it will be seen, when you hover over the item in the inventory.
This is 360x360px 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.
It has a fade gradient from the bottom.


=== Controller Icon ===
=== Controller Icon ===
Line 23: Line 15:
This is a 64x64px square tile that will be seen in the inventory and hotbar.
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).
It is part of an atlas. This part requires code


== Folder Structure of Icons ==
== Folder Structure of Icons ==
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 ==


<?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 ==
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:
[[File:Item icon template.webp|thumb|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 ==
== Tools to Create Icons ==
- The [https://github.com/ShinyHobo/BG3-Modders-Multitool Modder's Multitool] has an atlas converter.
- The [https://github.com/ShinyHobo/BG3-Modders-Multitool Modder's Multitool] has an atlas converter.
Line 251: Line 30:
- [https://www.nexusmods.com/baldursgate3/mods/492 Visible Shields] - if you have made a shield, this will make it visible in the respec screen.
- [https://www.nexusmods.com/baldursgate3/mods/492 Visible Shields] - if you have made a shield, this will make it visible in the respec screen.


- [https://www.nexusmods.com/baldursgate3/mods/249 Sample Equipment Mod] has a template for icons that still works.
- [https://www.nexusmods.com/baldursgate3/mods/3862 Mod Builder] will generate LSX code and folder structure for you.
 
- [https://www.nexusmods.com/baldursgate3/mods/3862 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.
 
- [https://www.tumblr.com/gaylockpick/tagged/mirza's%20resources Icon resources, ripped from game] (tumblr)


- [https://www.nexusmods.com/baldursgate3/mods/3125 Icon resources ripped from game] (nexus)
== Basic guide to create icons ==
 
== Basic image editing guide to create icons ==


* Install the [https://www.nexusmods.com/baldursgate3/mods/238 Custom Backgrounds] background mod  
* Install the [https://www.nexusmods.com/baldursgate3/mods/238 Custom Backgrounds] background mod  
Line 270: Line 43:
* Add the fade gradient. You should have 2 different .PNG versions of the icon, one with the fade out and one without.
* 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
* Size correctly, and save as .DDS
=== Creating Spell Icons ===
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 <code>Game\Public\Game\GUI\Assets\ControllerUIIcons\icon_bg_png\</code>
Most useful will likely be the <code>action_bg</code> or<code>spell_bg</code> files.


== Compression ==
== Compression ==
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)
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)
Notably 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+)
 
[[Category:Modding guides]]
[[Category:Armor modding]]
Contributions are considered to be licensed under CC BY-NC-SA 4.0 and (where possible) CC BY-SA 4.0. See Copyrights for details. Per our Content Rules, you are promising that any new text you add was written by yourself, or is available under a license that permits its inclusion in bg3.wiki. Do not submit copyrighted work without permission!

To edit this page, please answer the question that appears below (more info):

Cancel Editing help (opens in new window)

Templates used on this page:

Retrieved from "https://bg3.wiki/wiki/Modding:Creating_Item_Icons"