New UI for Mods

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!