Create your own Icon Library
Do you ever dreamed of seeing your own icons in Fallout 4? Now you can do! This howto describes how to do it in simple steps with free tools.
Requirements
JPEXS (download is here)
Dummy Icon Library Extension
Your icon(s) in SVG format
Tips
- You can find many free icons at svgrepo.com (Make sure to check the license if you want to publish your icon library!)
- Free SVG editor: InkScape
- The dummy icon libary package already comes with the correct folder structure for automatic loading as FIS2 extension. If you want to use it for another item sorter you need to adjust the folder structure accordingly.
Step by step
Step 1: Preparations
- Choose a unique name for your icon library with simple characters and without spaces. For this howto we use "MyIconLib".
- Rename the icon lib from "DummyIconLib.swf" to your icon libs name, e.g. "MyIconLib.swf".
- Rename the xml file "DummyIconLib.xml" to your icon libs name, e.g. "MyIconLib.xml".
- Your SVG must be white with transparent background. If your SVG doesn't is like that, you can use a SVG editor to adapt it.
- Open the renamed swf file with JPEXS
Step 2: Inserting icon graphic with JPEXS
- Now you need to locate the next free shape. It's easy by following this steps:
- Open tree node "sprites" and click on the DefineSprite with the name "...Dummy01" (Note: for your second icon use Dummy02, for the third Dummy03 and so on)
- Then a info panel appears in the bottom left. Click on the linked number after "Needed Characters".
- After that the corresponding shape is selected in the tree view.
- Right-click on the highlighted shape in the tree view and select "Replace...". Then choose your SVG file in the popup.
Step 3: Name your icon with JPEXS
- Choose a icon name with simple characters and without spaces, e.g. "MyFirstIcon". Then add your icon library name and a dot to the beginning. So you will have a full name like: MyIconLib.MyFirstIcon
- Go into "others > ExportAssets" in the left tree.
- Click the button "Edit" in the bottom
- Unfold node "assets" in the right panel and search the line with "Dummy01"
- Click on the last part with the name, so a text input will apear.
- Rename the entry to "m_" plus your full icon name. E.g.: "m_MyIconLib.MyFirstIcon" (Note: If you don't see the text field after pressing edit try maximizing the window)
- Click the button "Save" in the bottom
- Go into "others > SymbolClass" in the left tree and do exactly the same as with assets there. So unfold symbols, find line, click edit, rename and save.
- Go into "scripts > m_DummyIconLib > Dummy01" in the left tree
- For this script you need to split your full name at the last dot. So for example for "MyIconLib.MyFirstIcon" you will have:
- 1. Part: MyIconLib
- 2. Part: MyFirstIcon
- Click on the button "Edit ActionScript" in the bottom
- Do this line edits:
- Line 2: Replace "m_DummyIconLib" with "m_" + your 1. part, e.g. "m_MyIconLib".
- Line 5: Replace "Dummy01" with with your 2. part, e.g. "MyFirstIcon".
- Line 7: Replace "Dummy01" with with your 2. part, e.g. "MyFirstIcon".
- Click the button "Save" in the bottom
- Click on "Save" in the top left to save the swf file
- Close JPEXS
Step 4: Create your tag configuration
- Open the xml file with a text editor.
- Adjust the filename in "<tags iconLibraryFile=..." from "DummyIconLib.swf" to your swf filename
- Find the <tag> line with Dummy01
- Replace "DummyIconLib.Dummy01" in the icon attribute with your full icon name, e.g. "MyIconLib.MyFirstIcon". Note: Don't use the "m_"-prefix here!
- Replace "Dummy01" in the keyword attribute with your wanted tag name without brackets. So for example if you like to add a tag [MyPistol], then replace it with "MyPistol".
- Do any further customization you like to have, like own colors or sort it into categories (See FIS - Howto Modify And Extend)
- Save the file
Done! :)
That's it, you have successfully created your own icon library with an icon!
You can now use your icon by renaming items and add your tag. E.g. rename your pistol from "Pistol" to "[MyPistol] Pistol".
Also your new icon will appear in the FallUI Workbench tag picker!
To add further icons, simply repeat the steps 2-4 for up to 10 icons. If you need more, you can simply create another copy of the dummy package with a new name.
To use your icons just install the folder structure in your mod manager.
You can also zip the top folder "Interface" to share your mod as mod-manager-ready and easy-to-install FIS2 extension!
10 comments
I'm trying to make an icon library plugin for FIS. My goal is to add the SS2 sub-plot icons, for better sorting when picking plots.
Following the instructions here, I've figured out how to convert the png from the SS2 Wiki into the svg format for the swf.
I have a request; would you be so kind as to add how do I add more icons to the library in JPEXS?
Also, in the dummy icon extension swf, in the scripts\m_DummyIconLib there is a script named m_DummyIconLib, do I need to do anything to it as well?
I'm an old dog learning new tricks, so I appreciate the documentation.
Thanks,
(Building a new file containing more than 10 icons in one swf requires swf building tools, so that is very difficult. So i recommend to just use the simple method with multiple dummy files and using the easier JPEXS method in this article)
This is the xml for the new IconLib
<?xml version="1.0"?>
<TagConfiguration>
<colors>
<color name='gunmetal' hex='708090' />
<color name='laserblue' hex='3e27f4' />
</colors>
<tags iconLibraryFile="ItemSorter/FIS/TagConfiguration.Addons/WeaponIconLib.swf">
<tag keyword='Glock4' icon='WeaponIconLib.Glock4' colorname='gunmetal' category='handguns' tagSortBefore='' ></tag>
<tag keyword='Revolver4' icon='WeaponIconLib.Revolver4' colorname='gunmetal' category='revolvers' tagSortBefore='' ></tag>
<tag keyword='Bullpup4' icon='WeaponIconLib.Bullpup4' colorname='gunmetal' category='bullpups' tagSortBefore='' ></tag>
<tag keyword='AR4' icon='WeaponIconLib.AR4' colorname='gunmetal' category='assaultrifles' tagSortBefore='' ></tag>
<tag keyword='CombatShotgun4' icon='WeaponIconLib.CombatShotgun4' colorname='gunmetal' category='shotguns' tagSortBefore='' ></tag>
<tag keyword='DMR4' icon='WeaponIconLib.DMR4' colorname='gunmetal' category='longrangerifles' tagSortBefore='' ></tag>
<tag keyword='LaserRifle4' icon='WeaponIconLib.LaserRifle4' colorname='laserblue' category='energyrifles' tagSortBefore='' ></tag>
<tag keyword='DoubleBarrel4' icon='WeaponIconLib.DoubleBarrel4' colorname='gunmetal' category='shotguns' tagSortBefore='' ></tag>
<tag keyword='Barrett4' icon='WeaponIconLib.Barrett4' colorname='gunmetal' category='longrangerifles' tagSortBefore='' ></tag>
<tag keyword='SMG4' icon='WeaponIconLib.SMG4' colorname='gunmetal' category='submachineguns' tagSortBefore='' ></tag>
</tags>
</TagConfiguration>
This is the Categories xml
<?xml version="1.0"?><TagCategories> <taggroups><taggroup id="archery" icontag="Bow4" name="«Archery»" tags="Bow4" ></taggroup> <taggroup id="pipeguns" icontag="PipeRevolver" name="«Pipe Guns»" tags="Syringer,PipeGun,PipeRevolver,PipeShotgun,PipeRifle" ></taggroup> <taggroup id="revolvers" icontag="Revolver4" name="«Revolvers»" tags="Revolver,44P,44P2,44P3,Revolver4" ></taggroup><taggroup id="handguns" icontag="Glock4" name="«Handguns»" tags="Handgun,Pistol,10mm,TheDeliverer,Glock4" ></taggroup><taggroup id="energypistols" icontag="LaserPistol" name="«Energy Pistols»" tags="LaserPistol,PlasmaPistol,AlienGun,Gamma" ></taggroup><taggroup id="uniquepistols" icontag="FlareGun" name="«Unique Pistols»" tags="FlareGun,ThirstZapper,AcidSoaker" ></taggroup><taggroup id="shotguns" icontag="Shotgun4" name="«Shotguns»" tags="DoubleShotgun,DoubleBarrel4,Shotgun,Shotgun2,Shotgun3,CombatShotgun,CombatShotgun2,CombatShotgun4" ></taggroup><taggroup id="longrangerifles" icontag="HuntingRifle" name="«Long Range Rifles»" tags="Leveraction,HuntingRifle,HuntingRifle2,HuntingRifle3,DMR4,Barrett4,Ranged" ></taggroup><taggroup id="submachineguns" icontag="SMG4" name="«Submachine Guns»" tags="SMB,SMG4" ></taggroup><taggroup id="bullpups" icontag="Bullpup44" name="«Bullpups»" tags="Bullpup4" ></taggroup><taggroup id="assaultrifles" icontag="AR4" name="«Assault Rifles»" tags="AssaultRifle,AR4,HomemadeRifle" ></taggroup><taggroup id="battlerifles" icontag="CombatRifle2" name="«Battle Rifles»" tags="CombatRifle,CombatRifle2,BattleRifle4" ></taggroup><taggroup id="energyrifles" icontag="LaserRifle4" name="«Energy Rifles»" tags="LaserMusket,LaserRifle,LaserRifle4,PlasmaRifle,RadiumRifle,InstituteRifle,GaussRifle" ></taggroup><taggroup id="uniquerifles" icontag="Cryo" name="«Unique Rifles»" tags="Cryo,Railway,HarpoonGun" ></taggroup><taggroup id="lightmachineguns" icontag="PlasmaRifle2" name="«Light Machine Guns»" tags="LMG4" ></taggroup><taggroup id="heavyweapons" icontag="Minigun" name="«Heavy Weapons»" tags="Minigun,Gatling,Flamer4,Flamethrower" ></taggroup><taggroup id="launchers" icontag="Fatman" name="«Launcher»" tags="Cannon,JunkJet,Rocketlauncher,Rocketlauncher2,MLauncher4,GLauncher4,Fatman" ></taggroup><taggroup id="pistols" remove-tags="Pistol,10mm,TheDeliverer,44P,InstitutePistol,PipeRevolver,LaserPistol,PlasmaPistol,AlienGun,FlareGun,Gamma,ThirstZapper,AcidSoaker" ></taggroup><taggroup id="shotguns" remove-tags="Shotgun,DoubleShotgun" ></taggroup><taggroup id="rifles" remove-tags="Ranged,Cryo,Syringer,PipeRifle,Leveraction,Rifle,InstituteRifle,HuntingRifle,Railway,GaussRifle,LaserRifle,PlasmaRifle,SMB,CombatRifle,AssaultRifle,RadiumRifle,HarpoonGun,LaserMusket,HandmadeRifle" ></taggroup><taggroup id="heavies" remove-tags="Minigun,Gatling,Flamethrower,JunkJet,Cannon,Rocketlauncher,Fatman" ></taggroup><taggroup id="grp_energy" remove-tags="InstitutePistol,LaserPistol,PlasmaPistol,AlienGun,Gamma,Cryo,InstituteRifle,GaussRifle,LaserRifle,PlasmaRifle,RadiumRifle,LaserMusket,Gatling" ></taggroup> </taggroups><pipboy> <tab id='pip_weapons' add-taggroups="archery" ></tab> <tab id='pip_weapons' add-taggroups="pipeguns" ></tab><tab id='pip_weapons' add-taggroups="revolvers" ></tab><tab id='pip_weapons' add-taggroups="handguns" ></tab><tab id='pip_weapons' add-taggroups="energypistols" ></tab><tab id='pip_weapons' add-taggroups="uniquepistols" ></tab><tab id='pip_weapons' add-taggroups="shotguns" ></tab><tab id='pip_weapons' add-taggroups="longrangerifles" ></tab><tab id='pip_weapons' add-taggroups="submachineguns" ></tab><tab id='pip_weapons' add-taggroups="bullpups" ></tab><tab id='pip_weapons' add-taggroups="assaultrifles" ></tab><tab id='pip_weapons' add-taggroups="battlerifles" ></tab><tab id='pip_weapons' add-taggroups="energyrifles" ></tab><tab id='pip_weapons' add-taggroups="uniquerifles" ></tab><tab id='pip_weapons' add-taggroups="lightmachineguns" ></tab><tab id='pip_weapons' add-taggroups="heavyweapons" ></tab><tab id='pip_weapons' add-taggroups="launchers" ></tab> </pipboy></TagCategories>
I am a visual/hands on learner, so while the directions were simple and direct. I am not confident that the swf is 100% error free. During Step 2 "Click on the linked number after "Needed Characters", the link number is 19 but when I select it, it changes to 20. Dummy01's, "sprites", "ExportAssets", and "SymbolClass" ID numbers are not the same. All of which made me feel like I was not doing something correctly. Any input would be much appreciated.
The id's in the file aren't the same for shape and sprite. But the shape id should be lower than the associated sprite id, as it is earlier in the binary file. Try re-doing that step carefully.
For an example, the first sprite (dummy01) has the ID 20, and the associated shape (where you must replace your image) has ID 19. So if you see "Character Id" is 19 in the bottom left info table you are at the correct shape for the first image.
To find the error you should also try to narrow it further down. For example use the existing icon library and icon names to see if your tags/category definitions are working. For example use icon lib path iconLibraryFile = "FallUI_IconLib.swf"" and icon = "M8r.Fo4Misc.Alert" in one of your tags. If you see the icon, then the problem is at your icon library. And if not, it's something with your tag configuration.
I did as you suggested with changing the icon info, iconLibraryFile = "FallUI_IconLib.swf"" and icon = "M8r.Fo4Misc.Alert", and the icon did appear on weapons tagged with "my custom tag" [Glock4]. So I deleted the custom swf and xml. re-downloaded and installed JPEXS and dummy files and started over. I documents each step I took. I did try setting up a pastebin but kept getting an error when trying to create a new pastebin. So lets try the spoiler on more time.
Made a copy of "DummyIconLib.swf" and changed it's name to "WeaponIconLib.swf"
Made a copy of "DummyIconLib.xml" and changed it's name to "WeaponIconLib.xml"
Opened "WeaponIconLib.swf" in JPEXS
Expanded "sprites' file branch
Clicked on "Define Sprite (20:m_DummtIconLib.Dummy01)"
In lower left "Basic tag info" window, "Need Characters" = 19 +
Clicked on the 19
Redirected to "shapes" file branch, "DefineShape3 (19)"
Right click on "DefineShape3 (19)" and selected "Replace"
Selected svg file made in Affinity, file name "Glock4"
The correct image of "Glock4.svg" appeared in center window
Expanded "others" file tree
Selected "ExportAssests"
Expanded "assests [count] file tree
Clicked "Edit" and selected "tag[9]:UI16=20,name[9]:String=m_DummyIconLib.Dummy01"
In new input window, highlighted "20" and replaced with "m_WeaponIconLib.Glock4", then selected "Save"
Selected "SymbolClass"
Expanded "symbols [numSymbols] file tree
Clicked "Edit" and selected "tag[7]:UI16=20,name[7]:String=m_DummyIconLib.Dummy01"
In new input window, highlighted "20" and replaced with "m_WeaponIconLib.Glock4", then selected "Save"
Expanded "scrips" file tree, then expanded "m_DummyIconLib" file tree
Select "Dummy01" file and selected "Edit ActionScript"
In line 1, changed "m_DummyIconLib" to "m_WeaponIconLib"
In line 5, change "Dummy01" to "Glock4"
In line 9, change "Dummy01" to "Glock4" (the posted directions say to make this change in line 7, but line 7 & 8 are blank)
After making changes, selected save
New file tree named "m_WeaponIconLib" was created in "scripts" file tree.
Saved swf file and exited JPEX
Opened "WeaponIconLib.xml"
Changed "color name='mygoldcolor' hex='f4b83f'" to "color name='gunmetal' hex='708090'"
Changed "iconLibraryFile="ItemSorter/FIS/TagConfiguration.Addons/DummyIconLib.swf""
to "iconLibraryFile="ItemSorter/FIS/TagConfiguration.Addons/WeaponIconLib.swf""
Changed "tag keyword='Dummy01' icon='DummyIconLib.Dummy01' colorname='mygoldcolor' category='' tagSortBefore=''"
to "tag keyword='Glock4' icon='WeaponIconLib.Glock4' colorname='gunmetal' category='handguns' tagSortBefore='FNX4'"
Saved xml
Added new swf and xml into file directory "Interface > ItemSorter > FIS > TagConfiguration.Addons", packed into 7.zip and installed into MO2
Veryified [Glock4] tag was added to mod "Heckler and Koch - Mark 23 SOCOM" weapons.
Loaded a clean save at the exit of vault 111. Picked up "Foxhound" from mod "Heckler and Koch - Mark 23 SOCOM" at vault 111 exit. The icon area was blank but "foxhound" was inside the correct "handgun' category
There has to be something I am misunderstanding and inputting incorrectly, I am not sure what it is. Any further assistance would be appreciated.
Can you explain the process for referencing a custom icon to be used for a new custom subcategory? I've tried plugging in the "MyIconLibrary.MyFirstIcon" value into the "icontag" section when creating a new subcategory, but I only seem to get a little box with an X through it when doing so.