File paths

Open WolvenKit and create a New Project

• on the new Project go to Asset Browser and find the the following paths:

First Path is for the Main Menu (after the Breaching Screen)

base\gameplay\gui\fullscreen\main_menu\singleplayer_menu.inkwidget

The Second Path is for Pause Menu when you press ESC:

base\gameplay\gui\fullscreen\pause_menu\pause_menu.inkwidget

Add both files to your new Project.

Editing the files:

Select the Inkwidget that you want to edit and choose "open this file" option

This guide is valid for both files (main menu and pause menu)

From here move to the new open window were we are going to start editing our menu and you should see something like this:

Button Size:

Follow this exact file structure and here you can change the button size:

Change the values to Negative side to make the buttons smaller or to Positive to make them bigger.

Button Spacing:

Same rule apply as Button Size and the path for it can be fond here:

Again, change the values to Negative side to make the spacing smaller or to Positive to make the spacing bigger.

Button Inner Shadow:

Same rule apply as the other two and the path for it can be found here:

Here change the values to negative ones (except Right value - Changing that will make the shadow to not fill the button on the right side) as we want the inner button drop shadow to fit inside button rectangle.

Inner Writing Font Size:

Same rule apply as the others and the path for it can be found here:

Here is entirely up to you, how big or small you want the font (default size is 50) and as usual, bigger number makes the font bigger and smaller number makes the font smaller

If everything is done correctly, you should end up with something like this:

Inkwidgets: a custom interface

Inkwidgets are a mapping of widgets and effects onto a 2D plane.

The structure of inkwidget is a graph/tree with parent and children nodes.

Important elements of the inkwidget

• anchor - This is treated as the center of the widget. It is what animations are centered, scaled, and rotated around.

• margin - This is what allows precise positioning of the widget by adding space in the corresponding direction. Can use negative numbers as values as well. Widget Preview in WolvenKit is useful when adjusting margin values.

• parentWidget - This should always point back to the parent. When you are creating or editing children, make sure to right-click the parent in WolvenKit and select 'Copy Handle', then right-click the child parentWidget and select 'Paste Handle'.

• effects - Enable certain effects that can be triggered from a corresponding .inkanim file. Note that overlaying two of the same effect on the same widget can cause flickering when rendered in game, even if the animation times are offset, so test in game when trying this. Effects must be triggered from a inkanimEffectInterpolator with the matching effectName and effectType in the inkanim file.

• renderTransform - Adds the ability to perform a scale, rotation, and shear to the widget. Without this, you would need multiple source graphics in different orientations/sizes, so using this is useful.

• textureAtlas - Full path to the inkatlas file that contains your image.

• texturePart - The name of the part of the graphic defined in the inkatlas file.

• visible - Shows or hides the widget. Useful when testing or aligning widgets in Widget Preview.

Inkanims: apply animations to widgets in Inkwidgets

Each animation needs a definition (what kind of animation) and target (which widget animation applies to).

Important elements of inkanim definitions

There are a set number of different animation types. Their names are mostly self-explanatory. In WolvenKit, use 'Create Handle' on a handleinkanimInterpolator to choose a animation.

• duration - The time in seconds that the animation should last.

• startDelay - Time in seconds from the beginning of the animation that this animation should trigger.

• startValue/endValue - Can be a single value if using something like a transparency animation (0 is transparent, 1 is opaque), or more values for example a 2D coordinate if using a translation animation.

• effectName - Must match with a named effect in the inkwidget file to trigger.

• effectType - Choose one of the available types of effects. Must match with the effect type defined in the inkwidget file.

The last definition are AdvertPauseEvents. These are the times in seconds from the start of the animation that the animated inkwidget can pause when moving out of animation range in game. Multiple of these can be defined to make it possible to pause at multiple points in the animation.

inkanim targets

Can have any number of values, relating to the corresponding inkwidget file children nodes. Define these values, adding a new element in the array for each nested child as needed. For example, if you want to animate a widget that is nested in the first child, and the sixth child within the first child, then the target path would be 0 # 0, 1 # 5.

The definitions and targets are linked by their index in the array (e.g. first definition uses the first target, and so on). The last target doesn't have a path because it corresponds to the AdvertPauseEvent definition, but do not delete this as the inkanim should have the same number of targets as definitions.

Ensure that the total number of inkWidgetLibraryItems in the inkwidget file is the same as the total number sequences in the inkanim file - 1 (subtract one because Root inkWidgetLibraryItem is a given and not counted). Also, the order of the sequences in inkanim should be the same order of the inkWidgetLibraryItems in the inkwidget file.

This is the landing page for guides that teach you how to influence Cyberpunk's base UI and its textures.

For a full overview of guides linked here, please check the link tree on the left.

Summary

Uploaded: ??? by Last documented update: Mar 18 2024 by yellingintothevoid

This guide will teach you how to make custom inventory preview icons.

The guide below will teach you how to make preview icons. While it's a technically a subsection of the ArchiveXL item additions guide, you can use the steps below to make any kind of preview item.

Difficulty Level: You know how to read and can either edit images or make use of the corresponding guide. While the process is easy, it also is, unfortunately, quite tedious!

Wait, this is not what I want!

• If you want to have gendered preview icons, check here.

• For a script to generate inkatlas files, check The Magnificent Doctor Presto's github

• To learn more about the files involved, check Game icons: The inkatlas file

The required files

If you downloaded the example project (#getting-the-files), the preview is already hooked up. Otherwise, download the template archive for your kind of template (kindly provided by Apart).

Go away with your examples, I'll do everything by hand!

Okay, you do you. Here's how:

You should now have a structure like this:

tutorial  
    ops           
          - my_tshirt_factory.csv 
          - translation_strings.json  
          - preview_icons.inkatlas       <<<  
          - preview_icons.xbm            <<<  

Taking preview pictures

You have two options on taking preview pictures. Both are relatively tedious, since you have to do it by hand. This is not a step-by-step, but you can find a few pointers here:

Blender

You can export your mesh with all its materials to Blender and take your preview pictures there:

In-game

Overview of the Process

The idea is to combine mods that make V invisible and a ReShade filter called DepthAlpha.fx to create in-game screenshots of your item where the background is transparent. This means you don't have to spend a lot of time painstakingly removing the background manually in Photoshop. The screenshots taken with DepthAlpha.fx only need a little bit of cleanup (#creating-the-actual-icon), but can be basically directly imported into the .xbm file containing your icons.

Prerequisites

Invisible V by manavortex or the Invisibility Cap and Shoes by PinkyDude

Optional, but highly recommended:

AMM & AMM Props - PhotoStudio

ReShade

DepthAlpha.fx (make sure to set up the depth buffer properly)

AppearanceCreatorMod or Equipment-EX

The Process

Preparation:

Start the game

1. Equip the invisibility garment and the item you want to create icons for.

   1. To switch through appearances on-the-fly, you can use AppearanceCreatorMod while V is in the center of the camera.

   2. Alternatively, you can save outfits for all colour variations of your outfit In Equipment-EX:

Lighting:

Game.GetTeleportationFacility():Teleport(GetPlayer(), ToVector4{x=-1349.5053710938, y=138.80358886719, z=545.84600830078, w=1}, ToEulerAngles{roll=0, pitch=0, yaw=0})

Taking the screenshots

1. To actually take the screenshot, position the Photo Mode camera so that it is rougly parallel to the bottom edge of your photo booth.

2. Set the Field of View to about 30 to prevent distortion when taking a closeup.

3. Move the camera so that the item fills the entirety of your screen without cutting off a part of it.

1. Switch to the pose tab and cycle through all appearances of your item and take a screenshot of each one (make sure you haven't skipped any!).

Photoshop

Fixing Jaggy Edges Left By DepthAlpha.fx

1. Open the first of your screenshots in Photoshop and drop all other screenshots of the item onto the one you've just opened.

2. Select the newly created Smart Objects, right click them and select "Rasterize Layers".

3. Select the first layer and hide all other layers.

4. Go to "Layer" in the menubar at the top of your screen on the left and select "Layer Mask" → "From Transparency".

5. Create a new colour fill layer and choose a colour that contrasts with your item.

6. Double click the layer mask on your first layer in the layers window to enter Select and Mask mode.

7. Make sure your View Mode is set to "On Layers" and play around with the "Global Refinements" until the outline of your item looks smooth.

1. Duplicate the Layer Mask onto your other layers.

2. From here on out, you can play around with a bunch of Adjustment Layers with Clipping Masks for each of your layers/appearances. I recommend some Levels Adjustments to set proper black and white points, as well as Black & White Adjustment Layers for items that are black, grey, silver or white and so on.

3. Once you're done with that, select each layer and its Adjustment Layers, right click them, and select "Convert to Smart Object".

4. Give each layer a meaningful name and save your image as a .psd.

Creating The Actual Icon

1. Open this .psd and import the Smart Objects of your icons into it. The .psd is based on the preview_icons.xbm found in manavortex's Archive XL item additions and guide and can be easily used with projects based on the guide.

2. With all layers selected in Photoshop, transform them so that the longest side is 158px.

3. Align each item to the centre of each grey square.

4. Hide all other layers except your icons.

5. Now save the image as a .png in the raw folder of your WolvenKit project.

6. Import the .png into your WolvenKit project with the TEXG_Generic_UI TextureGroup setting and make sure that "Transparency from alpha channel" is enabled.

Hooking up the inkatlas

1. Open the file in WolvenKit.

2. Open the list slots.

3. For the first two inkTextureSlot items, set the value for DepotPath to the relative path of your xbm (tutorial\torso\my_custom_shirt\ops\preview_icons.xbm):

1. Save the file. If it doesn't update, reload it (Hotkey: Ctrl+R)

2. You now have a tab "PartMapping", where you can see which texture corresponds to which slot: select it on the left and check the partsName, which corresponds to the entry in the slot's parts array:

Using it

You can now hook up your preview icon(s) to whatever mod you are making.

ArchiveXL: Add it to the .yaml

Check the code box below — the last three lines add a preview icon.

Items.my_custom_shirt_redwhite:
  $base: Items.GenericInnerChestClothing
  entityName: my_custom_shirt_factory_name
  appearanceName: appearance_root_entity_white_red
  displayName: my_shirt_localization_name_white_red
  localizedDescription: my_shirt_localization_desc
  quality: Quality.Legendary
  appearanceSuffixes: []
  icon:
    atlasResourcePath: tutorial\torso\my_custom_shirt\ops\preview_icons.inkatlas
    atlasPartName: slot_01

Please refer to the ArchiveXL guide for an explanation of the other properties, as this page will only hold information about preview icons.

• atlasResourcePath: relative path to your .inkatlas file

• atlasPartName: slot name in your .inkatlas file (which you can see in the PartsMapping tab)

That's it! Time to test!

If you run into any issues with your texture's transparency, please check the textures import/export guide!

This is a sub-page of "" and only contains information on how to hook up gendered variants once you already have the files. If you aren't quite there yet, refer to the other guide first.

For the technical documentation, check TweakXL's .

Requirements:

This will not work unless your item is using the corresponding suffix. Without it, the game has no way to tell male and female items apart.

The shortcut

Type the following command into your CET browser:

That won't help you if you want to path items in bulk, but it'll help you to spot mistakes. For the rest, please keep reading.

How to do it

By adding an icon property to your item's yaml, you're setting the UIIcon property of your record. The generated records will be the same for all genders, variants and tags.

If you want to use a gendered preview picture, you can create a more specific record yourself. In this case, you can delete the icon entry from your item.

Its name will follow this schema:

Wait, what?

ENTITYNAME, APPEARANCENAME, SUFFIXES and VISUALTAGSabove are placeholders for the corresponeding fields in your YAML.

For example, if you have the following item:

… then you'd define a preview image like this:

The trailing underscore separates the empty visual tags from the suffixes entry.

Does this work with dynamic variants?

It does! All you need to do is to add the appearanceSuffix Gender and define an anchor for your $instances, like this:

ArchiveXL will ignore suffixes for dynamic variants, but they need to be present in the yaml file for the icons to work.

Then, you can define your preview images (remember to strip away the ! and + from the variants):

The rest just works (tm)

More Complex Examples

Multiple Variants

Given an item with multiple variants:

The icon definition would then look like:

Mixing Static and Dynamic Variants

You can also use static variants - the same rules apply, even if the result looks strange.

Given an item with a mixture of static and dynamic variants:

The icon definition would then look like:

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.

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.

Setting up the files

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

Template Credits: Apart

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

1. 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.

2. 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)

3. 
4. (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

Summary

Published: July 15. 2023 by Last documented edit: Mar 24 2024 by manavortex

This guide tells you how to add a custom HUD icon for a weapon. It is a subsection of the ItemAdditions: Weapons guide, but since the same principle applies for all parts of the UI, it can be used standalone.

The final result

Step 1: Setting up the files

We need an .inkatlas file and a texture.

1. Download the correct template from the wiki's github repository. For a hudicon, that's weapons_hudicon.zip

2. Extract both files to a fitting subfolder in your Wolvenkit project.

Now we need to custompath those files:

1. Open your .inkatlas file

2. Open the slots array

3. Click on each slot and set the value to your texture's relative path

Optional: re-name your slot

If you're cool with your slot's name being your_custom_hudicon, you can change its name:

1. Expand the first slot (the one with the number 0)

2. Expand its list of parts

3. Select the first entry your_custom_hudicon and change its name to whatever you want to use in the yaml

Editing the texture

Export your .xbm (texture) via Wolvenkit, then edit the resulting .png in chosen your image editor of choice.

• For more info on texture editing (and transparency!), check Textures: Importing, editing, exporting

• For a (far) more detailed guide, check creating custom inventory icons

Once you are done, Import your PNG over the xbm with those settings:

1. Edit the inkatlas file as in the icon creation guide.

Editing the .yaml file

Now that you have a custom preview icon, it's time to hook it up. You do this by editing the .yaml file.

You'll find written instructions below the screenshot.

The base record

Add a HUDWeaponIcons entry at the root level of your .yaml (no indent). Give it a name, such as HUDWeaponIcons.TheFallout in the screenshot above.

It has the following properties (indent level 1):

Making the weapon use it

Add a new property to the weapon that refers to the record you have created above:

That's it! After starting the game,