• Home
• Game Info
• Gallery
• Downloads
• Forum
• Press
• Buy
• 

Modding Instructions Part 3 - GUI

Welcome to the 3rd part of modding.

This time we are going to take a look at the GUI (Graphical User Interface).
Again, all the GUI-elements are moddable as are the model textures.

I've opened up the tactical_gui_2_48px.dds and here's what it looks like:

(Click the image for a larger version.)

you can see there are all the graphical elements you get in the games tactical view.

You can basically do anything here, but you still have a few rules.
First of all the picture is divided into 48 by 48 pixel blocks. To see these "blocks" you have to turn on the grid in Photoshop. View -> Show -> Grid.

After that you have to adjust the grid to the correct size by choosing Edit -> Preferences -> Guides, Grid and Slices... From here you have to adjust the Gridline to 48 pixels and the Subdivisions to 1.

(Click the image for a larger version.)

Now you are able to see how the picture is divided into blocks. Some of the elements take only one block, some multiple.
The next thing you'll notice is that some of the graphical elements look a bit weird.

There might be some "garbage" around them. In this case it doesn't matter because the image has an alpha channel, which controls the opacity of the image. To see the alpha channel, select the channels tab next to Layers and click on the eye icon next to the Alpha 1.

The alpha channel is just a grayscale image which represents the transparency of the image. White color will reveal the image 100% and the black 0%.

By default the alpha channel is represented as a red color on top of the image with a 50% opacity. If you want to adjust the amount of red you see in the image, doubleclick the Alpha 1 icon and adjust the opacity of the alpha. Note that this does not affect the alpha and how it works, but only the transparency of the alpha image on top of the picture.

If you want to see just the Alpha channel, just turn off the eye icon next to the RGB channel. This way you'll see only the black and white alpha image.

This of course means that if you modify the GUI elements so that the shapes change, you have to take care that the alpha is also modified accordingly.

So lets make a simple change in the GUI. A simple thing to do here would be to change a flag to another country's flag, so here goes.
Zoom in to the flag you want to change and turn it into another one. I'll just draw a Finnish flag on top of the Danish one.

So here's before and after:

As you can see, the flag elements are inside their own "blocks". This means that the element is read from that block and you cannot draw anything that goes outside this block.
Since we didn't change the shape of the element, there is no need to adjust the alpha channel.

If you want to create more radical changes to the GUI you can always modify the alpha as needed.
For example here I've created a few cracks in the panel by drawing black in the alpha channel, so that part of the panel is hidden by the black and making little adjustments to the image itself.

Here's the image and the alpha:

(Click the image for a larger version.)
   

Now you are ready to save the image. Save the original one, so that you can revert to that whenever you need to!!! When saving, remember to use the 8.8.8.8 ARGB 32 bpp unsigned and choose no MIP maps.

And here's shots from the game:

Again, your imagination is the limit here. Lets see some Star Wars -themes out there !!!

Best,
Niko

© 2017 Nitro Games Plc. "East India Company" is a trademark of Nitro Games Plc. All rights reserved.