New UI for Mods

Article written by Erechel
Published on 02-02-2014; updated on 08-17-2014
Tags: , ,

The Basics

Every mod has to have a properly designed UI for each civilization. It’s not very accurate that the new civilization of the -for example- Zulus to have an User Interface from the Japanese or the Goths.

A Total Conversion Mod is specially praised if it has unique designed UIs for each civilization changed. Let’s take for example my A Song of Ice and Fire mod, a Game of Thrones. Its really a buggy thing that the Night’s Watch, namely the Man in Black, built in the place of the Koreans, to have the colorful blue and red UI from this civilization.

So we have to change it. For doing this, we have to use one of the grahic programs: Mod Pack Studio, Turtle Pack, or the many others.

I prefer the Turtle Pack. It’s very user-friendly, and, although it has its tricks, it’s an easy program to use. With Mod Pack Studio we can do it anyway, but you have to replace the graphics, and you cannot add new ones -but, for this topic, it would be useful anyway.

The DRS Library

Once we have chosen the program, it’s time to open the library, and found the graphic we want to replace. The Interface Graphics are in the Data folder, in the Interfac.drs library. We can open it with the DRS editor of Turtle Pack, a program that allows us to see, extract and replace the SLPs that we want. Then we can use the SLP editor to see, extract, create the SLP or replace the bitmaps from an existing one.

I’ll give you a list of the User Interface SLPs in the DRS Library:

INT51101 UI English small INT51121 UI English medium INT 51141 UI English large
INT51102 UI Franks small INT51122 UI Franks medium INT51142 UI Franks large
INT51103 UI Goths small INT51123 UI Goths medium INT51143 UI Goths large
INT51104 UI Teutons small INT51124 UI Teutons medium INT51144 UI Teutons large
INT51105 UI Japanese small INT51125 UI Japanese medium INT51145 UI Japanese large
INT51106 UI Chinese small INT51126 UI Chinese medium INT51146 UI Chinese large
INT51107 UI Byzantines small INT51127 UI Byzantines medium INT51147 UI Byzantines large
INT51108 UI Persian small INT51128 UI Persian medium INT51148 UI Persian large
INT51109 UI Saracen small INT51129 UI Saracen medium INT51149 UI Saracen large
INT51110 UI Turkish small INT51130 UI Turkish medium INT51150 UI Turkish large
INT51111 UI Viking small INT51131 UI Viking medium INT51151 UI Viking large
INT51112 UI Mongol small INT51132 UI Mongol medium INT51152 UI Mongol large
INT51113 UI Celts small INT51133 UI Celts medium INT51153 UI Celts large
INT51114 UI Spanish small INT51134 UI Spanish medium INT51154 UI Spanish large
INT51115 UI Mayan small INT51135 UI Mayan medium INT51155 UI Mayan large
INT51116 UI Aztec small INT51136 UI Aztec medium INT51156 UI Aztec large
INT51117 UI Huns small INT51137 UI Huns medium INT51157 UI Huns large
INT51118 UI Koreans small INT51138 UI Koreans medium INT51158 UI Koreans large

Small, medium and large are the sizes used by the game for different screen resolutions. Make sure that you make one UI for every size, or at least warn the downloaders that you only have changed the UIs in x resolution. The equation is simple, larger resolutions use larger UIs. There you choose what to replace.

Creating the SLP

Let’s discuss something else. I’ve cracking my head on the walls in this particular topic: You extract the SLP, then you go to the SLP editor and extract the bitmap, then you edit that, and try to replace the bitmap in the SLP with the new one. It’s all there, I’ll wait until you have learned the basics of the program.

You are sure that you are doing everything OK, and even choose the auto mask off and the transparency in the 255 value, but… there is not transparencies. The user interface look like this:


The transparent (white) screen is white, and there it is all sort of odd transparencies throughout the UI (background in pink).

This is because the program recognizes the last line as the transparent mask. It doesn’t really matters that you choose auto transparent or 255: if you try, every time the program launches the same values.

There are two solutions:

-first: you leave a line whit a random colour, the same you use for the screen, let’s say magenta (value 252). It recognizes now the transparent screen. Now you set the anchor in x0 y0 (this is important: the X in the screen MUST be exactly in the left superior edge), save the SLP, replace the SLP in the DRS, save, and voila you have the UI correctly placed… but there it is a nasty magenta or white line in the bottom of the screen. No way to fix it: it will be there always. So

-Second Solution: go to the Paint or the program you use, select the BMP, and then go to the Image option, and then inverse colours. Or directly, press CTRL +I:


Then you see the UI like this:


Then, all you have to do is select the bucket option, and paint the screen pitch black, like this:


Then, inverse the colours again, and save. But remember ALWAYS inverse the colours and paint pitch black the transparent area AS THE LAST ACTION BEFORE SAVING. Every other change in the picture will return the 255 white to another white value. The real 255 white is the opposite colour to the pitch black. Then when we have it done, we save, and replace the picture in the SLP for our new UI, set anchor to x0-y0, replace the corresponding SLP in the DRS, save and voila, we have the fancy North UI -in this case, replacing the celtic UI INT51133-:


Cheers, and I hope it could be useful.

Do you want to comment on this article? Thank the author? Tribute resources for its improvement? Raze it to the ground?

Come by and visit its thread in the University Forum!