Custom Weapon Icon Template

This information is also on Nexus

This is a resource for other mod authors to add their own custom HUD and Favorites menu weapon icons.

If you are not a mod author making a custom weapon mod, you do not need to download this as it will be a file mod authors include in their mod.

If you are a mod author who has a custom HUD mod, this article explains how to update your existing player HUD interface files with fairly minimal effort.

Native Custom Weapon Icon Support

Starfield beta branch v1.15.214 changed the player HUD and Favorites menu interface files to allow mod authors to include their own custom weapon icons in their mod. It's unfortunately not as straight forward as just creating an icon image or having the CK generate an icon texture and it does require some flash knowledge. To that end I set out to figure out how it loaded icons and was able to make it work easily.

This modding resource is the output from that, I have created a whole tutorial and template SWF file so any mod author can download this, make the edits as needed and include the files inside their mod to make their custom weapon have icons out of the box.

Remarks

This is different than what I do in Ammo HUD but both methods work along side each other and this template file does not have any Ammo HUD features except custom weapon icons, it just uses the new method BGS gave us in the beta branch instead (I did not want to force Ammo HUD features on everyone using this template).
I will be modifying Ammo HUD v4+ to use this method but modified a bit, it will still require patches but those patches will be a lot less invasive once everyone starts adopting this method. I will maintain current patches as they currently are and if mods update to add their own icons file then I will update the Ammo HUD patch accordingly.

Usage and Credits

If you use this in your mod all that I ask is that you note that you used this template by me somewhere in your mod description (a link to this page would be cool too but not required).
This can be included in any mod, paid or otherwise.

Permissions

Other user's assets
- All the assets in this file belong to the author, or are from free-to-use modder's resources
Upload permission
- You can upload this file to other sites but you must credit me as the creator of the file
Modification permission
- You are allowed to modify my files and release bug fixes or improve on the features so long as you credit me as the original creator
Conversion permission
- You can convert this file to work with other games as long as you credit me as the creator of the file
Asset use permission
- You are allowed to use the assets in this file without permission as long as you credit me
Asset use permission in mods/files that are being sold
- You are allowed to use the assets in this file in mods/files that are being sold, for money, on Steam Workshop or other platforms
Asset use permission in mods/files that earn donation points
- You are allowed to earn Donation Points for your mods if they use my assets

Below is a tutorial on how to use this file for your mod, its fairly straight forward but will require more than just an image file.

Getting started

There are a few prerequisites which will be required to make this work.

Required Software

You will need to download and install JPEXS Free Flash Decompiler
You will need standard mod development tools (CK and/or XEdit)
You will need a program to make your icon a SVG (I use Adobe Illustrator but there are many alternatives)

Creating Weapon Icon Image

The best way that I have found to make icons is to preview the weapon in CK with the textures disabled (so its all pink) and the background in the preview window turned off. This allows an easy single-color image that you can then use live trace in your vector tool to generate a vector image of the weapon silhouette (almost all Illustrator alternatives have a tracing feature).

Let me know in the comments on the Nexus page if anyone would want a tutorial on how I do this.

You can also just use the CK to generate your icon for the weapon workbench and go from there, but I have found this generates a very small image and makes it hard to convert it to a good quality icon.

It does support a PNG with an alpha channel but you will get mixed quality results doing it that way

Custom Weapon Mod

This is kind of an obvious one, you are here reading this because you want to add custom icons to your custom weapon mod but its technically a prerequisite so I'm mentioning it here.

Setting up your weapon mod to use the template

In this section I will show you how to setup the UI_Icon keyword for your custom weapons so that they work with this new loading method. I will be using Plasma Weapons Bundle by Bub200 to demonstrate this method as it already is setup with custom keywords for the weapons included.

Since I did not create the mod we are using for this demo, this will be making a patch to that mod, but the process is the same when doing it with a mod you have made.

Creating UI_Icon Keywords

The first thing you need to do is create a custom UI_Icon keyword for each weapon in your mod. If you have multiple weapon forms but its all the same model then you just need one.

Here you can see that the author had already done this previously: Creation Kit UI_Icon form

Each UI_Icon keyword must have the following settings:

Unique ID: Its best if you keep to the UI_Icon_WeaponName convention
Type set to: UI Icon Linkage Name
Unique Linkage Name: I like to make this the same as the ID but with out the "UI_Icon_" part

In normal usage you would then make sure your weapon forms each have their corresponding keyword. There are more advanced usages where you change the icon based on a weapon mod but I won't be covering that here.

Now with the basics of UI_Icon keywords explained, the new method that BGS has provided basically looks for a prefix on the Linkage Name of the UI_Icon keyword. If it sees this prefix it then knows to load a file named the same as the Linkage Name.

This prefix is "CCSUP" and it must be the first 5 letters of the Linkage Name.

I think the best naming convention here would be to name it like "CCSUP_WeaponName" that way its easier to read over all.

So back to the CK, here you can see that I have changed the Linkage Name to include the "CCSUP_": Creation Kit UI_Icon form: Changed values

We do this for each included weapon: Creation Kit UI_Icon form: Changed values for multiple weapons

Important #1

The way BGS made this you have to have multiple SWF files as its a one-to-one Linkage Name + SWF (Explained more below)

Important #2

You should only have one UI_Icon keyword on your form, if you add more than one only the first one that it finds alphabetically will work. Just make sure the weapon form only has the custom one you just made.

Using the SWF template to add your icons

Ensure you have JPEXS Free Flash Decompiler installed and have downloaded the file from this pages file section.

I also like to setup a folder workspace for each mod that I am working on to make things easier, but that's entirely up to you and your workflow.

Opening the template file in JPEXS

JPEXS can seem a bit complicated and confusing at first but you should be able to follow the steps below and get through it easily enough. I am always available for questions so feel free to comment or reach out to me directly.

When you first open JPEXS you will want to click Open in the top left:

In the open window navigate to where your mod files are and where you have placed the template SWF:

You will see the following warning, just click No:

When it loads the first thing you are going to do is click on Shapes:

Here you will see two assets in the file, the first one is the actual weapon icon asset that you will be replacing with your weapons icon.

The second is a guide to allow you to know where to position the icon (explained more below), you should not edit or move the Icon Size Template image at all, I have it so when the game loads the SWF file that image is hidden so you don't need to do anything with it and just use it as a guide.

Adding your weapons icon

Now that you have the file open, double click on the "Replace Me" image (first one).

Important

I would save after each change (two buttons to the right of Open) you do just as a good practice!

This will take you to the following screen where you will click on "Replace - update bounds":

If you click on "Replace" it will distort your icon unless its the exact same size as the AA_99 icon, while you can fix this easily enough its best to do "Replace - updated bounds" option so your icons aspect ratio is retained.

This will take you to the following screen where you will click on "Replace - update bounds"

For this demo we will be focusing on the "BubPlasmCAN" weapon but I will be doing both weapons to show the files and packaging it up later in the tutorial.

Select your icon that you have previously created and click Open:

You will see this warning when using a SVG, you can click do not show again if you like but just click Ok:

You will see the icon show up and the tree item on the left will go bold which is tell you there is an unsaved change:

Important

If your icon is not centered like this, sometimes with SVGs there will be what I call a rouge point somewhere which is causing it to think its bigger than it is, you can fix this by clicking Edit Points and deleting the point that's causing it. I recreated the problem here so I can show you just keep in mind this is not something you should need to do often.

If your icon is not centered edit points to find and remove a rouge point

Here you can see the rouge point, all you have to do is click the point and press Delete on your keyboard then click save:

And after that we are back to here with a good looking and centered icon:

Scaling and positioning your icon

Now that the icon has been imported into the file now you need to scale and position it so that it fits neatly in the Icon Size Template box

On the left side click "sprites" and then you will see your icon most likely not positioned correctly on the right:

Double click on the second item which has your weapon icon (outlined above) then on the left you want to expand the "DefineSprite" item and then expand "frame 1" and click on the first "PlaseObject2" which does not have a label then you will click on "Transform" on the bottom:

This parts a bit tricky, the best thing to do is to align the weapon icon with the center of the Icon Size Template box and then scale it using the scale option on the right. You can also use the Move option on the right to move it by increments if you need to.

You can see here that i used my mouse and just centered it approximately in the center of the template box and you can see the position has changed in the move menu:

Now to scale it proportionally the best method is to use the Scale menu on the right, I like to set it to 99% and click Apply a bunch to get it to scale into the box bounds:

Here i have zoomed using the zoom buttons on the bottom right so we can get a better view for alignment:

I got it pretty close to the center and almost spot on vertically, so now we just need to bump it to the left a bit.

The easiest way to do that is to use the Move section on the right and check "Relative move" and set the vertical to 0 and the horizontal to -1 (negative numbers go left on the horizontal and up on the vertical) and once you have it placed in about the right spot then just click Save: Centering your icon

You will see that there is now unsaved changed again and this step is complete:

Configuring the SWF to your weapon Linkage Name

In order for Starfield to know what to load we need to set the name of the "DefineSprite" to your Linkage Name

We do this by expanding Others on the left and clicking "SymbolClass":

Then on the right side you want to click Edit on the bottom and expand the "Symbols" item at the top of the right panel and click the tag item which includes the "CCSUP_CustomWeaponTemplate" name:

Important

Do not touch the number at all, it MUST stay "52"

Set the string here to the same as your Linkage Name in your UI_Icon keyword, in this case we are going to use "CCSUP_BubPlasmCAN" and then click Save on the bottom and you will see the name has changed both in the symbols and on the DefineSprite item (also SymbolClass is bolded since there are unsaved changes): Set the string here to the same as your Linkage Name in your UI_Icon keyword, in this case we are going to use "CCSUP_BubPlasmCAN" and then click Save on the bottom and you will see the name has changed both in the symbols and on the DefineSprite item (also SymbolClass is bolded since there are unsaved changes)

Setting the weapon name in the loader script

This basically just tells Starfield to load the sprite we just named (the names need to match basically)

On the left expand Scripts > <default package> and then click on "CCSUP_CustomWeaponTemplate" and then click "Edit ActionScript" on the bottom:

There are two places you need to set the name, be sure and only replace the "CCSUP_CustomWeaponTemplate" and don't touch any other part of the script. Once again in this case we are going to set it to "CCSUP_BubPlasmCAN" and then click Save on the bottom:

After clicking Save you can see the names have changed in the file and there are unsaved changes for the script:

Saving your new custom weapon file

The last step in JPEXS is to save it as the name of your Linkage Name

If you have been saving throughout this you can either just close JPEXS and rename the file if you want

To save it as a different name click "Save as" in the top ribbon and navigate to where you want to save it:

Then just enter the Linkage Name again and click save, again for this we will be using "CCSUP_BubPlasmCAN":

Reminder

If you have more weapons to do you need to basically repeat all of these steps for every weapon you have in your mod.

Adding the interface files to your mods BA2 archive

This is just a quick overview on what the files should look like in your BA2 archive, I'm just going to use archive2 for this but you can use any of the other tools and I believe CK supports these files in an archlist

For this tutorial I am going to use the Starfield Data directory instead of my usual MO2 just so its obvious where the files are going but you want to place all the SWF files you just made in "Data\Interface" $For this tutorial I am going to use the Starfield Data directory instead of my usual MO2 just so its obvious where the files are going but you want to place all the SWF files you just made in "Data\Interface"$

Then just add them to your BA2 archive, here I am just going to add them into bubs BA2 for his "Plasma Weapons Bundle" mod:

These files go in the "Main" BA2 archive

Then just add them to your BA2 archive, here I am just going to add them into bubs BA2 for his "Plasma Weapons Bundle" mod

Thats all you need to do to package it up!

Showing it works in game

Now just to show that it works in game, I have disabled all mods except "Plasma Weapons Bundle", my patch to it, and SKK Fast Start so I can show this off faster.

This particular mod requires me to craft the custom HUD icon to show the custom icon, so in these screenshots I have already done this. You do not need to make the icon craftable in your mod, as long as you have the right keyword added to your weapon form then you should be good.

HUD Icons

HUD Icons in game

Favorite Icons

Favorite Icons in game