[Tutorial] How to create a research button with Gimp

from Sins Forums

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.

modding
11,827 views 7 replies
Reply #1 from Sins Forums Top

great work k1

SoaSE Modder's

Sins of a Solar Empire II
Reply #3 from Sins Forums Top

Looks nice on the soase.weebly.com :thumbsup:

Lets see if I can use this to add player pictures. This could also use a bump

It should work for you. I've used this process to add player pictures previously.

Here's a Player Portrait example I've done.

Reply #4 from Sins Forums Top

You found some nice sci-fi pics there. I have a couple questions.

Can we make the Player portraits larger to fit more pics. The bottom row is cut and I wouldn't mind more rows or columns. Not that I would use them all but it would be nice to have all the pics in. Or just make another file and reference that?

Why is there a Player_Portrait_Large.dds & a Player_Portrait_Large.tga?

Reply #5 from Sins Forums Top

At least I am not fighting old hags anymore  :grin:

 

Reply #6 from Sins Forums Top

That is way too cool. Some of those pics are really nice :inlove:

You found some nice sci-fi pics there. I have a couple questions.

Agreed! some are filler until I can find better though.

Can we make the Player portraits larger to fit more pics. The bottom row is cut and I wouldn't mind more rows or columns. Not that I would use them all but it would be nice to have all the pics in. Or just make another file and reference that?

I think it is done by row offset if you look at the playerPictures window file. So if you wanted more pictures I believe you would need to extend to the right and keep the offsets the same. Would also need to increment the rowItemCount (you may have already figured this out since you have 10 pics)

Why is there a Player_Portrait_Large.dds & a Player_Portrait_Large.tga?

Here is my story...

Developer A creates original Player_Portrait_Large.dds for vanilla sins. Developer X notices the code can't find Player_Portrait_Large.tga because it is a dds format. So he changes the code to ignore extensions instead of fixing the playerPictures files (One can only assume the extension is not strictly enforced as the original game references the tga extension but only provides the dds files).

Developer B notes that the playerPictures references a non existant file so creates Player_Portrait_Large.tga for entrenchment (quadroupling the size of the file I might add).

Developer C blindly copies both Player_Portrait_Large.dds and Player_Portrait_Large.tga into diplomacy Textures directory after adding the new pictures because he has no idea how it is code or why there are two files.

 

 
Reply #7 from Sins Forums Top

 

How about some new blank buttons to work from.

Some you can find already existing in the research sheets and others but the highlight is part of the image. I made separate highlights to place as the top layer. The new button should be...

Layer 1 - Coloured Button
Layer 2 - Your Image
Layer 3 - Button Highlight

Button Order is...

Disabled
Pressed
CursorOver
Normal

buttonblanks[myfist0].7z

My 1st icon set