Custom in-game icons

Creating a custom inkatlas

Tools needed:

Wolvenkit ⇗ Paint.net ⇗

Preview images

Okay, now you've added something! But it doesn't have a preview icon yet - you'll have to add this manually. For this purpose, you'll have to edit an image.

For a guide how to ensure image transparency, see here ⇗.

Cyberpunk uses xbm as format for its textures. These textures are then mapped (divided into slices) by inkatlas files. The individual slots can then use these individual slices for various purposes, such as UI elements like phone call icons and image previews.

If you want to use the in-game previews, you can find them under base\gameplay\gui\common\icons\items

Setting up the files

Download the template archive: Template Download ⇗ This includes the following files:

Template	Size of slot image
5_outfits	160x320 (x5)
5_weapons	360x120 (x5)
40_items_inkatlas_template	160x160 (x40)

The template provided contains these folders

Template Credits: Apart

This guide assumes you already have a collection of pre-made icons. If you don't and are unsure where to begin, you can refer to The item addition guide ⇗, specifically the "Making the icon" section for guidance.

From the template file, choose "40_items_inkatlas_template" and paste both the .inkatlas and .xbm files into a folder of your preference within your Wolvenkit project.

In this guide, we'll use the tutorial\ops folder as an example. We are renaming both files to preview_icons to avoid confusion in the future:

YourWolvenkitProject
  source
    archive
      tutorial  
	ops		   
      	  - preview_icons.inkatlas  
      	  - preview_icons.xbm      

1. Export preview_icons.xbm via the Export tool.

2. Open 40_item_template.pdn (Provided on the template archive) in paint.net and put all your icons in.

3. Once you're done, hide the background layer and overwrite the file you've created in Step 1:

<yourModDirectory>\raw\tutorial\ops\preview_icons.png

4. Import the file using the Import Tool. Make sure that "IsGamma" under the Import tool options is turned off, everything else should already be OK. You can now open preview_images.xbm in Wolvenkit and see your new, edited items.

5. Link the xbm file to the inkatlas: copy the relative path (right click on the file -> "copy relative path") and paste it on the texture slot on the inkatlas (image A)

6. 

   Image A
7. (Optional) If you want to connect the inkatlas with your item, refer to the ArchiveXL ⇗ guide for detailed instructions. In the YAML file created for your item, include the path in the "icon" section (Image B).

  icon:
    atlasResourcePath: base\40_item_template.inkatlas
    atlasPartName: slot_01

Image B (Optional)