Using the sprite editor for the first time is crazy hard. This guide should make things easier.

The guide is looooong, but when you've done this once it's super easy to do again without the guide.

The process you'll learn here applies to any kind of sprite edits, not just weapon icons -- it's all roughly the same.

Note: If you've already edited the XMLs to add your gun, and you know where the .bsx files & game tools are, you can skip right to part 1.

Update: Here's a video by GartenMensch showing the whole 3-stage process. It shows how to add a new sprite for the level editor. The process is the same whatever kind of sprites you're editing (module > frame > animation).

https://www.youtube.com/watch?v=NJAOtmZSUH8

All the game files can be found in the Door Kickers - Action Squad folder in your main Steam folder.

If Steam is installed in the Program Files folder, it should be in either:

C:\Program Files\Steam\steamapps\common\Door Kickers - Action Squad\
C:\Program Files (x86)\Steam\steamapps\common\Door Kickers - Action Squad\

Moddable files are in the media folder:

Door Kickers - Action Squad\media

Before you start, make sure you back up any files you edit. It's a good idea to back up the entire media folder.

The sprite editor is here:

tools\SpriteEd\SpriteEd.exe

These are the files we'll be changing (starting from the media folder):

• interfaces\igm_interface.png
  
• interfaces\igm_interface.bsx
  
• interfaces\menus.png
  
• interfaces\menus.bsx

igm_interface is for the HUD (i.e. what's shown when you're playing levels in the game).

menus is for all the games menus, like the gear select screen.

The guide presumes you've already added a custom gun to the game. If you haven't yet, you can do this by editing these files:

• levels\data\gear_screen.xml
  
• levels\data\weapons_data.xml

Lists all the gear in the game (weapons, gear, ultimates etc). It's split into 3 parts:

• <SHOP> - Star costs. Order isn't important.
  
• <UPGRADE_BARS> - Skill tress for each class.
  
• <ITEMS> - Weapons, gear and ultimates for each class. Order IS important here. When you make a new gun, you need to add it to a class in this section.

Weapon icons are set with nIconIdx, which is short for "icon index". In part 1 of this guide you'll get a new nIconIdx for your custom gun icon.


Lists all the weapons in the game, including enemy weapons.

Further down, it also lists explosions and other things that do damage over time (DoT).

Player weapons have their HUD set with sHUDanimName, short for "HUD animation name". In part 2 of this guide you'll get a custom sHUDanimName to use for your custom gun icon.



I recommend using a code editor program to change XML files. VS Code[code.visualstudio.com] is amazing. You could also use Sublime Text, or even Notepad++

Before you start, make sure you back up any files you edit. It's a good idea to back up the whole media folder.

First, edit the image menus.png using your favourite graphics app and add your sprites.

When you've added your sprite to menus.png, open the Sprite Editor program and load the file menus.bsx.

Note the three large icons in the top left. Click them to see each pane. This guide will refer to them often, and you'll be using each pane in the order they're shown.

From left to right they are:

• Modules
  
• Frames
  
• Animations

Modules set the actual sprite you're using. Here you'll draw a box around your sprite, for use in the frame and animation panels.

• Open the Modules pane.
  
• You can drag the image around by holding right-click. Mouse wheel zooms. Clicking a module from the list on the left will select it, which gives it a red box.
  
• Click the "Create New Module" button in the top-left
  
  • The button is 2nd from the right.
    
  • You can always hover over any of these buttons to see what they do.
• Drag a rectangle around your new sprite.
  
  • To make dragging rectangle easier, you can change the grid to show 1px instead of 10px via Tools > Options > Options (tab )> Grid Size = 1
    
  • Don't forget to zoom in with the mouse wheel!
• When you're done, a new item should show at the end of the module list.
  
• If you need to edit your rectangle, you can either:
  
  • Click the Select Module button (at the top), click on your module, then use the small boxes on the edges of the red rectangle to resize it
    
  • Or you can edit the boundary manually by selecting it from the left list, then double-clicking one of the values to change (eg. X, the first value, sets how far from the left the rectangle starts).

Frames are easiest to think about in terms of animation: Every animation is made up from single frames. You make your frames up from the sprite you cut out in the modules panel. Gun icons don't use animation frames, but they work in a similar way.

During this stage you'll also set the bounding box and set the position of your module into the frame. If you're editing a character, the bounding box is their hitbox. Gun icons just have a square bounding box though.

Position is important for every kind of sprite edit, and different sprites have a different position, so always refer to an existing frame for reference.

• Open the Frames pane.
  
• Along the bottom you can see all the modules that exist. Drag the scrollbar all the way to the right and you should see yours!
  
• In the list on the left, right-click and choose Insert
  
• Click the newly added Frame from the bottom of the list
  
  • Nothing will show at first, because you need to add your new module to this frame
• From the modules list at the bottom, double-click your new module to place it into the frame.
  
• Click the Select button (at the top) then click your sprite.
  
  • This will put a red rectangle around your sprite and let you drag it around.
• Move your sprite so that it's right in the middle, where the two light lines intersect.
  
• When it's moved properly, right-click your new frame from the list on the left (it should be the last one), and choose "Find Bounding Box".
  
  • This will add an orange rectangle.
    
  • If you move your sprite after adding the bounding box you'll need to repeat this step.

In this stage you'll add your frame to an existing "animation". Gun icons aren't animated, but I think the sprite editor was built for animation, so that's why they're still called that. It might be easier to understand how the animations panel works if you open actors.bsx and look at the animations panel, and click through the various frames in the bottom left panel - but remember to save any changes you've made to menus.bsx before you open a different file!

• Open the Animations pane.
  
• From the left list, click the item named "ICONS_WEAPONS"
  
  • Note: The bottom list shows all the weapon icons that already exist.
• Double-click your new module from the thumbnail list at the bottom.
  
• This will add your module to the end of the list of ICONS_WEAPONS.
  
• Take note of the Index of your new item. It's the first column (in the bottom-left list).

Remember to save!!

Now you have your icon index, and you can add it to your modded gun entry in gear_screen.xml using your new icon's index.

For example, if my new icon had an index of 32, I would use 32 as the value of nIconIdx, eg:

Be sure to read the above section first.

To make your new gun icon appear in-game next to your character icon, you'll want to edit igm_interface, with the goal of getting a weapon HUD string to add to sHUDanimName="".

The process is the same as above, so first:

• Edit igm_interface.png to add your new gun sprite. There are blank panels in that image file you can use.
  
• Open the Sprite Editor and load igm_interface.bsx
  
• Create your module and frame, using the same steps as above.

When you get to the Animations stage the process is different to the steps above.

From the top list on the left, copy an existing weapon HUD by right-clicking it and choosing "Clone". Pick one with similar bullets. Eg. if your new gun is an assault rifle, clone WEAPON_SMG_MP5A3.

After cloning, your new entry will show at the bottom of the list. Remember to RENAME it by double-clicking the name. Copy this name down for later, it's what you'll use for sHUDanimName in weapons_data.xml.

Next, with your new cloned weapon HUD selected from the left TOP list, click through each frame from the BOTTOM list.

Each frame represents something different, and you'll probably only need to change one of them: The top one, for your new gun icon. If you want to make custom bullet sprites, you can edit the other frames too.

Here are what the frames are for, from top to bottom (indexes 0 to 5 are in brackets):

• (0) - Gun icon
  
• (1) - Bullets tray
  
• (2) - End of bullets tray. Added to the end of the bullets tray to set the clip size.
  
• (3) - Tray for the bulet in the chamber, if there is one (look in game to see this, most guns except shotguns have this).
  
• (4) - Full row of bullets, aligns with the bullet tray (index 1)
  
• (5) - Single bullet

To replace the gun icon:

• Right-click the item with index 0 and choose Delete
  
• Double-click your module from the long scroll list along the bottom to add it as an animation frame
  
• IMPORTANT: It will appear at the BOTTOM of the list. You need to drag it back up to the top.
  
• Make sure every value (Xmove, Ymove) is still set to 0.
  
  • You can fix non-zero values be either double-clicking the value to editing it manually and entering 0, or by moving your module around carefully with the mouse by holding Ctrl and dragging it.

When you're done, click through each indexed item, to make sure they're still in the right order.

Once you're finished, save your changes.

Now you can use the name you gave the new gun HUD. Edit your gun in weapons_data.xml and set the sHUDanimName.

Eg. if your new gun HUD was named WEAPON_CUSTOM_GUN then you'd use this:


Happy modding :D