Editing Modding:Creating Item Icons

Jump to navigation Jump to search
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 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.
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 ==
Line 39: Line 31:
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\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!'''
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.'''
 
== 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 44:
- [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 image editing guide to create icons ==
== Basic 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 57:
* 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]]
Please note that all contributions to Baldur's Gate 3 Wiki are considered to be released under the CC BY-NC-SA license, except when noted otherwise (see BG3Wiki:Copyrights for details). If you do not want your writing to be edited and redistributed at will, do not submit it here. Per our Content Rules, you are promising that you wrote this yourself, or copied it from a public domain or similar free resource. 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)