A simple tutorial for adding custom research buttons.

Files needed (*Optional):

HUDIcon-Research.brushes
Buttons_Research_Normal.tga
Buttons_Research_Disabled.tga
Buttons_Research_CursorOver.tga
Buttons_Research_Pressed.tga

* You can also create your own brushes file and texture files, just be sure to add the new brush file to the brush.manifest.

Steps to create new button.

1) Find or create 2d artwork for the button

2) Find an open spot in the Buttons_Research_Normal.tga texture file.

3) Turn off the alpha layer. This helps us control what the visible elements of the button will be.

4) Copy the picture. You'll notice with the alpha channel deselected it is much easier to control what the visible elements will be.

5) Scale the image to fit the visible area of the button.

6) Now to copy the gradient bar over the new button.

7) Now that you have your nice normal button you'll need to copy it to the CursorOver, Pressed and Disabled texture files.

For the CursorOver and Pressed file, I've found copying the image and then adjusting the brightness up/CusorOver or down/Pressed gives a nice affect.

For the Disabled file, I convert the normal image to Grayscale and then copy the grayscale image into the Disabled file.

8) Add the button name and location to the HUDIcon-Research.brushes or your brush file by locating the upper left x and y position of your button. The coordinates can be found by hovering the mouse over the top left pixel of the image (the coordinates will display on the bottom left of GIMP). The position and size is repeated for each of the entries in the brush file.

brush
 name "HUDICON_RESEARCHSUBJECT_MYBUTTON"
 content "States"
 Disabled
  fileName "Buttons_Research_Disabled"
  pixelBox [ X , Y , 47 , 33 ]
 Pressed
  fileName "Buttons_Research_Pressed"
  pixelBox [ X , Y , 47 , 33 ]
 CursorOver
  fileName "Buttons_Research_CursorOver"
  pixelBox [ X , Y , 47 , 33 ]
 Focused
  fileName "Buttons_Research_Normal"
  pixelBox [ X , Y , 47 , 33 ]
 Normal
  fileName "Buttons_Research_Normal"
  pixelBox [ X , Y , 47 , 33 ]

9) The button can now be referenced from any of the entity files in your mod.