How to add weapon HUD image

Tutorial helps to add weapon hud images as developer does

Software you need:

  1. Laighter - tool for generating normal maps.

  2. Paint.Net - tool for drawing images (or any other image editor).

  3. SLK_img2pixel - tool for converting images to a limited palette.

  4. Hands Pack - PITO hands prefabs images

  5. PITO Palettes - palettes for SLK_img2pixel tool

Let's made sawed-off shotgun (obrez)! First of all, search in google some screenshots from stalker games where player hold obrez in hands, save image, then search for item icon. Sounds for reloading and shot you can find in google or from unpacked stalker game. Just convert them to low quality mp3 size (32-64 kbps).

For the item icon reference I will use 48x16 w_ak.png file from assets/ui/items/, and will clear it and paste there founded obrez icon, image sampling must be closest neighbour. And save it as new file called "w_obrez.png"

48x16 pixels weapon icon

Then open screenshot with hands from game, cleanup it, so background will be transparent.

Now image still a little bit blurry, size nearly 164x96

Now save it as separate file and open SLK_img2pixel tool.

Press "Load image" button and open previously saved HUD image. In sample tab set to Relative, x div and y div to 2. Sample - Floor

Open Colors tab and load one of the palettes what I provide at the top of tutorial.

Dither set to No Dithering.

Loaded pito palette, no dithering

Open Process tab and set your weapon image as you want, like contrast, hue, saturation etc.

Processing image

Go to the Load/Save tab and press "Save Image" button.

Open saved image in image editor, and correct hands colors to match a pito game original color palette/atmosphere.

Use hands pack to paste it into image and then edit or transform them until it suits the weapon.

Ready to use hud image, size 79x47

Resize image to size that power by two. Like 96x48. Save it as w_obrez_hud.png to assets/ui/ folder.

Now it's time to generate normal map image that help hud to interact with level light.

Open Laighter tool.

Laighter tool workspace

Open obrez hud file by clicking square with arrow down icon at the top left corner.

Open hud file.

It's a little bit blurry, need to setup correct sampling, go to Visualization tab at the right side and check Pixelated checkbox.

Now set Mode from Texture to Normal Map.

Click at the image at center of screen

Not transparent Normal Map

Then you will see, that all buttons and sliders is active now!

Workspace with activated sliders and options

Check Use Alpha at the bottom left corner.

Now image looks correct.

Normal Map

At the left side of the workspace in Normal tab you can play with settings to make normal map looks good to you when it's interact with light. To test how it interact with it, change Visualization Mode from Normal Map to Preview.

You will see this:

How Normal Map interact with light

If you zoom out, you'll see a light source that can be dragged around and changed it color. Middle mouse wheel button to drag around workspace, wheel up and down to zoom.

To change color, select light source and click on Color selector button in the Light group at the right side of Visualization tab.

Light group inside Visualization tab

When you will done with creating Normal Map - select image at center of workspace, then go to top left corner and click at squared with arrow up icon button to export image.

Export normal map

Export window will appear, select checkbox Original directory, it will save normal map file near w_obrez_hud.png file. Only check Normal checkbox and rename it from _n to _nm. Game use _nm suffix to apply normal map from file to selected hud.

Press export and close Laighter.

Normal Map is exported

Congratulations! You've created weapon hud image with icon and normal map!

Last updated