This thread is being created to track my progress in a quest to Mod Civ4's Heads Up Display -- the user Interface / HUD. Please feel free to post comments/suggestions/questions/encouragements, as this is an ongoing project and feedback will be greatly welcomed.


OK, SO i've been spending a lot of time on this, and here are my notes I've taken as I've gone along.

At first, just to see that the HUD *was* moddable, I replaced /resource/Civ4/HUD/HUD_bottom.tga with a version that was just solid red.
First lesson: HUD Changes require a Civ4 restart to take effect.
second lesson: this was VERy visible in the game, giving me the courage to continue.

I decided on a new color. Cyan was the pick, with a somewhat darker-than-normal shade so it wouldn't look ungodly bright.

I then had some Photoshop learning to do. After a while I determined the best way to change the color without ruining the shading was through PS's Hue/Saturation Modify option. I looke dup the HSB for both the original color and the cyan i was replacing it with, and calculated the difference. This difference was the number plugged in to the HSB sliders to make the shift. After testing on a visible file, I saved this adjustment so I could just load it on every file without adjusting sliders every time.

For the record: HSD = Hue/Saturation/Brightness(lightness).

Side-track:
There are several ways to get a color on a computer. the most popular is RGB - the Red Green Blue values. Another is CMYK, which is more common when printing the image is important, as CMYK is what printers use. CMYK is CYan/Magenta/Yellow/blacK -- the colors of ink that make up the printed color.
The final method is more complicated - Hue, Saturation, Brightness. If you plot the color wheel on a circle, and shade the results from the inside out (Center Point being pure white, outside arc being pure color) you get every shade of color. Brightness affects this by dimming the Pure color. Hue is measured in degrees, Saturation in % distance from center, Brightness in ... something. % brightness of original color maybe? Anyway, if you pick the radius of the color, then Saturation, and shift the brightness, you get a color (incidentally it can be converted to RGB easily, the advantage is that it's easy to determine the mathematical difference in colors with HSB).

For example, the brighter shade of tan used in Civ4's original HUD Scheme is RGB: 249/223/191. It is HSB: 33/23/98.
The Cyan I was replacing it with was RGB 0/118/163. HSB 197/100/64.

The difference in RGB isn't easily adjustable... it requires finding a formula to shift each shade level. HSB accounts for that... the DIFFERENCE in HSB is +164/+77/-34. Plug these numbers directly into the hue/Sat sliders and presto! you've shifted the color, shading entirely intact! Now you can save this change to a file, and load it for every file you need to adjust, making the process super quick and simple!

I proceeded to run this filter on every file in /HUD. the result was pretty clear, a very different HUD coloration but using the same files! In the main game screen it looked awesome... with a few minor things i didn't notice until later. However, once I entered a City screen my heart sank a little... the City Header was still tan, but the rest of the screen was the new blue... what gives?

Turns out that the HUD pulls files from all THREE /Resource/Civ4 folders. The city screen files were found in /Civ4, but affected other parts of the game (loading screens' Slider bars, for example) as well. It became clear at this point that you cannot just modify the in-game HUD, you gotta modify ALL of the HUD.

At this point my research turned towards the elusive /Resource/Theme folder. This folder contains .thm files which were entirely greek to me at first. It turns out that Firaxis chose to use a 3rd-party tool to build their HUD, and these .thm files are like Markup Language files to describe the HUD layout. Best yet, they included the image file names to load in each spot! I could find all of the relevant IN-game .thm files and modify them to use copies of the relevant files so that the changes could be made to only affect in-game. OR, I could look further and see if there was a way to make a sort of switch, so the user (or game itself) could /change/ the theme on startup. Both methods had clear advantages and disadvantages.

Sadly, upon the end of tonight's research, I have concluded that the path to the Theme is hardcoded into the game itself. I cannot find any mention of the Theme in any python or XML file, nor in the .ini... This has the following impacts:

Any HUD change will affect ALL games, since it is not a CustomAsset subfolder. Mod-specific custom HUDs will not be possible (for instance, for your space-based Mod you can't do a space-looking HUD, because it will force the user to change the HUD for all their other games to that as well... while a mod-specific custom HUD would be awesome for flavor reasons, it just can't be done)

So the path to now follow is:
- Very carefully examine the .thm files to understand their markup language ( to my knowledge this is not documented anywhere, the 3rd party utility they used is fairly new).
- Determine all of the .thm files used during actual gameplay
- Pick a single folder for in-game HUDs to draw their graphics from. (likely /Resource/Civ4/HUD)
- Find all references to files NOT in that directory from the in-game HUD .thm files found in step 2.
- Copy these files to the HUD directory, and change the .thm reference accordingly.
- Begin editing the HUD files, so that gameplay interface is graphically different.
- Test, Test, TEST

A few notes to sign off this post:
1) I apologize, I'm long-winded. Please bear with me and you'll eventually figure out where I'm going =)
2) For a user to download and implement a HUD mod, they will be forced to mod the HUD for all of their games, until Firaxis finds it in their hearts to let us add new Themes, or put it in CustomAssets, or something.
3) In order to download a HUD mod, the user will need: First, back up old HUD (25 megs), basically make a safe copy of the entire/Resource Directory. Second, Replace all of the .thm Theme files. Third, replace all of the /Resource/Civ4/HUD images (and any other images that were changed by the HUD mod creator)
4) Restart Civ4 for the changes to take place.

A screenie of the Cyan Test HUD Mod:

(Bear in mind the entire HUD was originally Tan)

Also, I should note that Civ4 HUD uses a layered scheme. The Shading is often provided by a seperate image that consists of the shading mask. The shading mask is simply a null-background file containing Black where shading is desired. Black's OPACITY is set to varying percentages, higher percent = darker shade. This is not ALWAYS the case, but is frequent. Shading Masks should NOT be modified if you are simply changing the color of the HUD. If you are /replacing/ the HUD with all new graphics for a whole new look, modifying the Shading Masks will be a MUST.

One other thing I'm trying to find out is where the background color is set. You know, the dark blue that fills in all of the large sections.

I'm making significant progress in deciphering the .thm markup language. It's an interesting network of includes and defines and stuff, but it's becoming clear. Unfortunately many things rely on definitions in Civ4_Common.thm, for instance the background color of the major sections of the in-game HUD as well as message boxes throughout loading screens, and other stuff... this means, once again, that changing that color for in-game purposes will affect other things as well.

So rebuilding the .thm structure will be a MUST, if my goal of modding only the in-game HUD is to come to full realization. I want the loading screens and all that to remain jsut as they are, but the in-game HUD to take on a whole new look.

There's two paths that I'll be jumping between to do this - One will be to unravel all of the .thm files to see everything that affects in-game HUD stuff. Then finding references that lead to shared-resources and modifying them appropriately. THe other will be to look at major resources and change them to see what else they are used for.

An example of how I am doing this, is when trying to find what affects the background color in the major sections of the game screens. I traced the color back to a definition in Civ4_Common.thm, and changed its RGBO values to something drastically different, leaving the remainder of the HUD as they were out-of-the-box. The background color is normally dark blu so i went with bright red. The differences were astounding -- clearly I had found the right thing, but it also affected all of the loading screens, before even entiring the game. Because of this, I will have to create a seperate color definition for the in-game background colors, and change all references to use it.

Interesting finds. I imagine that when you are done you will post a fully documented tutorial on how to change the HUD?

I will keep checking back. If you need any help, let me know.

Interesting finds. I imagine that when you are done you will post a fully documented tutorial on how to change the HUD?

I will keep checking back. If you need any help, let me know.

I Intend to post both a tutorial and a working, completely different HUD for download =)

I don't need any help as of yet, right now it's still in the deciphering stages... I'm not a fantastic artist though, so when I get to that stage I might need some assistance.

After modding the wrong file for 3 hours, and sudenly noticing the mistake, I am now quite capable of reading the .thm files -- the markup language is pretty simple once you get used to it, and i can trace inheritance with ease. There are details I need to figure out, such as what certain commands mean, but overall it's now just a matter of trial and error, and "change this to see what happens".

I am currently in the process of breaking the HUD away from shared resources by making it use its own copy. I'm defaulting images to the /Resource/Civ4/HUD directory, and creating additional Hud handles for the .thm definitions (such as panel background colors)

Didn't get very far today, spent time answering questions regarding the Button Color-Change i posted in Tutorials, and trying to determine once and for all whether Themes *could* be made mod-specific (to date, I'm still under the distinct impression that they cannot -- There is still some testing I can do, but I'm so convinced right now, that it's almost pointless.)

I have managed to fully mod the background color of the panels. Once I figured out yesterday that I was modding the wrong file for 3 hours (I was changing my original backup, instead of the game copy :blush: ), It all became quite clear and easy. I am working towards a new theme for my changes, and things are coming together fairly well.

There's still a couple of things I don't understand in the core .thm files, however, and those are my current focus. I'm sure they tie in with python pretty heavily, but I haven't bothered to check into the python scripts to find my answers yet. I may look there next...

I've been tracking all of the changes I make, so I can backtrack to see what I've changed recently in case somethign goes horribly wrong. Also I'm making notes of what I've tested, so if i have to restore originals, I know what I can safely re-implement without starting completely from scratch.

I will begin posting these logs along with my regular updates.

Today I made more progress in changing the background color of the panels in the game. That is to say, everywhere there is a panel in the HUD with a dark blue background, I am changing to a dark green background. The green doesn't look half bad with the original tan border stuff, so it's a nice start to the HUD I have envisioned in the end. (I will eventually replace the tan things too, and have to write my own shading filters as a result... a full makeover is in the works)

There are a few panels I may have missed - I've changed everything I see frequently during my settler/tiny/one-opponent mod-test game. I have changed a few other things that I suspect *might* be visible at some point, such as Diplomacy Screen backgrounds... which I have only partially tested. A similar change was made to what appears to be the diplomacy screens for Multiplayer, but I don't play multiplayer, someone else will eventually have the honor of testing that for me =)

My ChangeLog to date consists of :

Changing File Civ4Theme_Common.thm -- Line 204
Insert NEW line 205 (immediately after GColor .BG) :
-----------------------------------------------------
GColor .HudBG =GColor( 25,123, 48,217): GFC_Control_Color; //Set for dynamic color change


CHANGE the following lines to use .HudBG instead of .BG:
Civ4Theme_HUD.thm:
------------------
Line 170 -- Top Center Panel BG
Line 207 -- Bottom Center Panel BG
Line 244 -- Top Right Panel BG
Line 281 -- Top Left Panel BG
Line 318 -- Bottom Right Panel BG
Line 355 -- Bottom Left Panel BG
Tested fine.

Civ4Theme_Custom.thm:
---------------------
Line 1129 -- City Top Panel BG
Line 1163 -- City Right Panel BG
Line 1197 -- City Left Panel BG
Tested fine.
Line 1985 -- Diplomacy Panel MP BG (NOT TESTED)

Following are single-player diplomacy panel: (NOT FULLY TESTED)
Line 2047 -- Center Top BG
Line 2082 -- Bottom BG
Line 2110 -- Sides Top BG

Line 2172 to see what it belongs to -- suspect Civpedia.
Turns out this affects the bottom panel at main menu and load screens, as well as Civpedia.
This means I'll have to find where Civpedia loads the bottom bar, and replace it with a copy of the bottom bar with the color changed.
-- Actually it's worse. This is the bottom bar for ALL full-screen advisor screens as well... a LOT of screens rely on this....
-- This is likely to be the same with Line 2138 as well, then... the accompanying Top Bar Panel BG.

Might be a silly question but...is there a way to close the minimap? There are really only a few areas of the hud that I find important. The rest are just eye candy that slows down the graphics as far as I'm concerned. All I could find was an all or nothing kind or option "alt-I".

try ctl-I. it is for a minimised interface. alt-i is turning off the interface

Great work Rayanth, this is the kind of thing that people will be very thankful for later.

Great work Rayanth, this is the kind of thing that people will be very thankful for later.

Thanks Trip, if only someone would get back to me on the possibility of making the HUD a dynamic setting in Mods in a future patch =)

I Did try out your suggestion and put a HUD in the Mod/res folder, but that is a replacement of /assets/res, not /resources. Needless to say, it didn't work -- and I suspect nothing will, until one of you Devs explicitly makes it moddable.

If nothing else, will the SDK be able to change this?

I was playing around with the tan to try to make it look more civ-ish:

http://img499.imageshack.us/img499/2340/tan2gy.jpg

Just the post I've been looking for. :)

Does anyone here know what numbers to use for simply a "clear" HUD? I want more visibility on the screen.

Just make the last number (the 217) a 0 :). That should make the opacity of the HUD 0.

Just the post I've been looking for. :)

Does anyone here know what numbers to use for simply a "clear" HUD? I want more visibility on the screen.

or you can use the existing commands: Alt-I and Ctrl-I to hide the HUD completely (the same command shows it again when you need it)

Rayanth's method is probably a better idea. With my method, there will be lots of free-floating text that will be very hard to read.

11/05/2005
----------
Today's work focused on playing Star Wars Battlefront 2, and determining the GRectMargin syntax -- what the heck coordinate system is it *using*? My method of testing this is to mod, pixel by pixel, one of the files that gets stretched. I'm trying to determine exactly how the coordinates in the GRectMargin are layed out, and what their reference point is. For some reason, they appear to be rather understandable in the X dimension, but Y's almost seem inside-out. More testing is necessary as of writing this sentence...

Alright, I've got it. Example Syntax: GRectMargin(16,1,156,26);
This coordinate system is listed in (X1, Y1, X2, Y2)
X1: Pixels In from the left edge of the image
Y1: Pixels in from the top of the image
X2: Pixels in from the right edge of the image
Y2: Pixels in from the bottom of the image
0 means no pixels at all, 1 is the first pixel in (the one on the edge), 2 is the one after it, etc.

What this all means? it's defining an inner rectangle, which is the rectangle that gets stretched to fit the panel. This is a bit more complicated than it sounds, and is worthy of a mini-tutorial on its own.

Due to this stretching, and my plans for the HUD, I am now entering a stage where I have a lot of Photoshop learning to do. I will still be fiddling with core bits of the markup language, as well as trying to find whether the panel *sizes* are set in python somewhere or something, but you might be seeing my posts taper off slightly. (I'm also taking a step up to full-time at work, so I won't have quite as much free time to work on this)

Hello Rayanth,

I just found this thread and immediately bookmarked it. :) Great work you're doing here. This thread might be laying the groundworks for many future Civ4 UI modding projects - keep up the good work! :goodjob:

Hello Rayanth,

I just found this thread and immediately bookmarked it. :) Great work you're doing here. This thread might be laying the groundworks for many future Civ4 UI modding projects - keep up the good work! :goodjob:

I could hope so =) When I started on this project, nobody had even *mentioned* changing the UI, and I love breaking new ground. While at first I had no actual interest in making a new UI (just wanted to prove it could be done, and how)... I have a great plan going for one now, which I'm making progress on.

For the record, I have received a few requests for information on making the background of a panel (default dark blue) an image instead of a solid color. To the best of my *current* knowledge, this is not possible due to the stretch mode of the panels (the image would be stretched, and would look very odd.) However there appear to be other possible modes for the panels that I have not yet figured out.

Big thanks to Rayanth and Gogf. :goodjob:

I changed the last unit to 0 and it worked perfectly how I wanted. Ctrl+I takes things such as the minimap away, so that wasn't gonna work for me. Here's some pics of the game in action. Warning ~650-750KB each.

http://www.civfanatics.net/uploads10/MPclear_land.gif
http://www.civfanatics.net/uploads10/MPclear_city.gif

Big thanks to Rayanth and Gogf. :goodjob:

I changed the last unit to 0 and it worked perfectly how I wanted. Ctrl+I takes things such as the minimap away, so that wasn't gonna work for me. Here's some pics of the game in action. Warning ~650-750KB each.

http://www.civfanatics.net/uploads10/MPclear_land.gif
http://www.civfanatics.net/uploads10/MPclear_city.gif

Wow, that looks much better than I would have guessed.

Wow, that looks much better than I would have guessed.
The diplomacy screen is unfortunately clear, but all the other advisor screens are not changed - they still have a blue background, which is good.

Big thanks to Rayanth and Gogf. :goodjob:

I changed the last unit to 0 and it worked perfectly how I wanted. Ctrl+I takes things such as the minimap away, so that wasn't gonna work for me. Here's some pics of the game in action. Warning ~650-750KB each.

http://www.civfanatics.net/uploads10/MPclear_land.gif
http://www.civfanatics.net/uploads10/MPclear_city.gif

That looks pretty nice...

The diplomacy screen is unfortunately clear, but all the other advisor screens are not changed - they still have a blue background, which is good.

You can change the diplomacy screens back to blue if you wish, just find them in the second file you edited, and change them back from _HudBG to _BG -- this should change their reference back to your original BG color, the blue.

just a quick note to say that my work may begin tapering off, here. I'll still be working on the UI mod I'm doing, and will eventually post it -- however as I've already said, I'm facing a photoshop hurdle now, and I'm back to full time at work, severely reducing the free time I have to work on this -- and hey, I gotta *play* civ4 some time, don't I?

Big thanks to Rayanth and Gogf. :goodjob:

I changed the last unit to 0 and it worked perfectly how I wanted. Ctrl+I takes things such as the minimap away, so that wasn't gonna work for me. Here's some pics of the game in action. Warning ~650-750KB each.

http://www.civfanatics.net/uploads10/MPclear_land.gif
http://www.civfanatics.net/uploads10/MPclear_city.gif

Can you zip up the folders you modded and upload them here? A lot of us would like to try out that clear-interface thing ourselves.

Can you zip up the folders you modded and upload them here? A lot of us would like to try out that clear-interface thing ourselves.

Follow Gogf's tutorial, here (http://forums.civfanatics.com/showthread.php?t=138104) (based on my work in this thread) But keep the following things in mind:

BACK UP YOUR ORIGINAL -- this can never be stressed enough, ESPECIALLY when moddign the HUD. You cannot do this in a mod pack, you MUST overwrite your original HUD. So back it up!

Following Gogf's tutorial to the letter will result in a tan interface.

To get clear, like Meteor's, follow Gogf's tutorial, with one minor change -- in the Code block in his tutorial, change the "217" to "0"

However, note that Meteor commented that the Diplomacy screen went clear, which he didn't want -- if you only want the in-game HUD clear, and NOT the diplomacy and advisor screens, follow Gogf's tutorial, with the addition noted above, but SKIP STEP 4.

Hope this helps =)

(it's much easier to make this change yourself, than post a file including the change, it's quite a simple one)

How would I skip Step 4? Leave my game on day and night?

How would I skip Step 4? Leave my game on day and night?

It appears that Gogf totally re-wrote the tutorial after I posted this -- Now I dunno what to say =)

It appears that Gogf totally re-wrote the tutorial after I posted this -- Now I dunno what to say =)

Woops! Forgot that you linked to my tutorial from this thread :lol:.

@MSTK:

Just don't edit the lines listed under "single player diplomacy panel" in this post (http://forums.civfanatics.com/showpost.php?p=3270763&postcount=9). In your case, just change them back to "BG" from "HudBG" :).

Easier way to change all the HUD background colors (all I want to do at this point)

Add the line just like he says in Civ4Theme_Common.thm line 204
"GColor .HudBG =GColor(Red, Green, Blue, Alpha): GFC_Control_Color;"
(changing RGBA values to your liking of course)

Then do a search & Replace in all files in that directory (I used TextPad (http://www.textpad.com)for example) and replace
"SF_CtrlTheme_Civ4_Control_Color_BG;"
with
"SF_CtrlTheme_Civ4_Control_Color_HudBG;"

All changed, including start menus, loading screens, and in game dialogs.

(I've seen no bad side effects so far - so if ya do this and find some, POST!)

Easier way to change all the HUD background colors (all I want to do at this point)

Add the line just like he says in Civ4Theme_Common.thm line 204
"GColor .HudBG =GColor(Red, Green, Blue, Alpha): GFC_Control_Color;"
(changing RGBA values to your liking of course)

Then do a search & Replace in all files in that directory (I used TextPad (http://www.textpad.com)for example) and replace
"SF_CtrlTheme_Civ4_Control_Color_BG;"
with
"SF_CtrlTheme_Civ4_Control_Color_HudBG;"

All changed, including start menus, loading screens, and in game dialogs.

(I've seen no bad side effects so far - so if ya do this and find some, POST!)


There's an easier way than that if you want to change ALL backgrounds, just skip the whole .HudBG thing and change the colors of .BG -- the search-and-replace is rather pointless if you want to change all colors, just change the original source of the color =)

The REASON for the .HudBG color addition was to change ONLY the in-game screens. My original purpose was to change only the in-game screens and not the start menu, loading screens, etc. Since the in-game screens reference the same background color as the start menu, I was forced to replace in-game screen references with the new HudBG reference.

Again, if you want to change ALL screens, ignore the entirety of the .HudBG addition and change the RGBA values of the original line 204 itself - the .BG definition.

Oh yea... duh =)

I have received confirmation that my hypothesis about making HUD's dynamically loadable by mod is more or less accurate -- in other words, It is NOT possible to change the HUD without overwriting the core, original HUD files.

I have subsequently submitted a request for a future-version change to this approach, if at all possible.

In reference to my previous post, I am currently working on a potential method of getting around this -- however it's possible it may not come to fruition, we shall see. (It involves the game's startup sequence, and more advanced knowledge of GFC's inner workings)

I decided to bypass Firaxis for once and directly ask Scaleform about documentation for the GUI system.

Here is my email:


Hello,

I write to you on behalf of the end-users of Firaxis Games' Civilization 4
for the PC, which utilizes GFC for its User Interface. As you are probably
aware, Civilization 4 was developed from the ground up to be customizable
and modifiable by the end-users, in virtually every way possible.

One of these ways, to a limited extent, is access to the files that make up
the game's GUI, which, as noted earlier, uses Scaleform GFC. While a group
of end-users has been working diligently in understanding the markup
language used to define the User Interface, there are many parts that
continue to elude us, and it is does not appear that there is any
readily-available doucmentation.

It is for this reason that I have come to inquire about the availability of
the GFC documentation for end-users. Does such documentation exist? Is it
freely available for distribtion? If end-user documentation does not yet
exist, is it possible to obtain access to the documentation on your website
without purchase of a license? The Register New User form for access to that
portionof your website appears to indicate that a license may be required
for such access, is this correct?

I thank you for your time, and for your role in helping to make Civilization
4 a wonderful success! I look forward to your reply.


And their reply:


We share your enthusiasm for modifying the Civilization IV user interface and look forward to seeing a wide range of new custom styles.

Scaleform is working on an exciting new visual tool, the Scaleform GFC Theme Editor, which will make it easy to visually develop new UI themes. We are in discussion with Firaxis regarding the distribution of the visual tool and will alert the Civ IV mod community as soon as it is available.

Unfortunately, we do not plan to release documentation of the theme system until after the visual tool is complete.

Sincerely,

The Scaleform Team


So basically, Modding the HUD right now is difficult at best, and possibly unwise due to the fact that it overrides the core HUD.

However, the good news is that they're working on an end-user tool that will help us do our own Themes for Civ4, and that they're working with Firaxis on it to make sure it'll work with Civ4 (is how I'm reading this) and that the Civ4 modding community can look forward to seeing it.

Looks like if we sit on our hands long enough, our work will be made much easier =)

In the meantime, I am focusing more on the Order of Operations in which the GUI is loaded, and the relative python files. I've already found ways to add mod-specific Movie intros into the game load-sequence (before menus), as well as remove the existing ones...

Civ IV UI Mod Tip:
You can attach custom GFC styles to UI elements in the Civ IV python script using the SetStyle(control_name, style_name) function. This will allow you to customize specific controls, a feature you will definitely enjoy!

Civ IV UI Mod Tip:
You can attach custom GFC styles to UI elements in the Civ IV python script using the SetStyle(control_name, style_name) function. This will allow you to customize specific controls, a feature you will definitely enjoy!

Iiiiiinteresteing, I'll give this a shot, thanks Scaleform!

The clear interface is more like what I'd like to achieve. Is it possible right now to have it look a little more opaque and not entirely invisible, though? So I can see the shading in the interface?

The clear interface is more like what I'd like to achieve. Is it possible right now to have it look a little more opaque and not entirely invisible, though? So I can see the shading in the interface?

change the RGB values to a desired shade color (0,0,0 for white, 255,255,255 for black) and the 4th value to a very low number but not quite 0.

anything other than black will show the interface shading well, white will show it best but may make the interface look kind of milky.

The 4th value being 0 makes it entirely invisible... setting it to something like maybe 26 will make it only 10% opaque... enough to have some color, but barely visible.

The value setup is R,G,B,A -- RGB make up a color (Red + Blue + Green), A is the Alpha channel, or how transparent it is. 0 is completely invisible, 255 is completely solid. Anything in between may be used. (divide by 255 for a rough estimate of the % opacity)

All of this is line 204 in (Civ4Main)/Resource/Themes/Civ4/Civ4Theme_Common.thm

Civ IV UI Mod Tip:
You can attach custom GFC styles to UI elements in the Civ IV python script using the SetStyle(control_name, style_name) function. This will allow you to customize specific controls, a feature you will definitely enjoy!

Been really busy lately but decided to attack this again. Doing some research, it doesn't look as easy as it sounded. That remains to be seen.

The function referenced by scaleform is imported from the game itself. this means I can't peek at the code to see how it works... meaning I have to use existing examples to see how to work it on my own:

screen.setStyle( "InterfaceCenterRightBackgroundWidget", "Panel_City_Right_Style" )

is used to set the Style for the panel on the city screen's center right. As you can see it is referencing the panel by a name (InterfaceCenterRightBackgroundWidget) and associating a pre-defined Style with it (Panel_City_Right_Style) -- this style is defined in the .thm Theme files i've played around with since the beginning of this diary.

the problem is, it appears the only way to override these is to use a new .setStyle to override the existing one in the python code, or edit the existing .setStyle. Why is is this a problem? Well, the second argument in every example, is a pre-defined Style from the theme files. The objective of using python to override these, was to avoid havign to edit the Theme files to begin with.

All hope is NOT lost, however! It is still possible to retain the original theme, and modify it based on a MOD, using the above fucntion! (It'll take a lot of work though!)

Here's the basic principle:

Create a whole new .theme file. Mimic the themes in the existing one, with new NAMES for the styles (ie, instead of Panel_City_Right_Style, copy that definition and change the name to Panel_City_Right_Style_MyMOD)

After you've created all of the CUSTOM themes, change the file
C:\Program Files\Firaxis Games\Sid Meier's Civilization 4\Resource\Themes\Civ4\Civ4Theme.thm

and ADD an include, that includes the file with your custom themes.

Now, in your Mod, edit the associated python scripts and change each required instance of screen.setStyle to use the new Style definition. This SHOULD change them when loading your mod, to the new one.

Caveats:
- Your end-user will still need to manually copy the additional .thm file to their /resources directory, and edit their Civ4Theme.thm to include it.
- The associated .setScreen calls are all OVER the place. the majority are in CvMainInterface.py, but there are some in CvOptionsScreen.py and CvTechSplashScreen.py as well -- in total, an estimated 70 or so lines to change.


However, the directions for doing that are fairly simple, have NO effect on the original game HUD if done properly, and will load your new theme ONLY when your mod is loaded! (since it is set by your mod's custom version of the python scripts)

You COULD theoretically make the HUD change by era! This is UNTESTED, but it could be possible to insert a new series of screen.setStyle in whatever portion of the code determines when a new era has happened. This sort of middle-of-game change (as well as testing the Mod-set Theme) is my next focus.

Ah hah. Stone-age themed interface during ancient era, and then high-end control panels during modern era. Imagine the implications!

Ah hah. Stone-age themed interface during ancient era, and then high-end control panels during modern era. Imagine the implications!

Precisely what i was thinking... a better visual indication of what Era you are in, and sort of a neat side-effect of advancing =) The itnerface itself advances with you!

Now, whether it is *possible* remains to be seen...

IT IS POSSIBLE!!!!

With a lot of hypothesis an da little testing, I have determined that it IS Possible to dynamically change the HUD while the game is running, triggered by whatever event you want!!!

I tested this by creating a new Theme file that overrode an existing setting. i then added a line of code to the function that is called when a player's turn ends (which i thought was when End Turn button is clicked) that called a change to setStyle that told it to use the new, overriden style.

It WORKED

Not quite how i expected... however I can trace down the error that happened (it went clear instead of blue) to an issue with my method of overriding the Theme, not with the code that set it...

This is VERY exciting, folks... this means that you will be able to DYNAMICALLY change the very look of the HUD, heck even the *layout* of the HUD, whenever you feel like it during the course of your mod! There could be no better way to help your user get into the feeling of your mod than changing the Interface to match the theme.

I will be fully researching this path of development for the near future -- most of that research will be returning to deciphering the structure of the Theme files so I know how to properly override certain portions.

I have succeeded in fixing the bug I had created -- it was MUCH simpler than i anticipated. I still must learn the detailed structure of these theme files, however at least for now I can say I have a working example of a dynamic event-driven mod-specific HUD change =)

Note: there is still one very minor change users would have to make to their Resources folder, to make this work. however the change is incredibly minor, and if done PROPERLY does not affect any other mod, or the core game. All that's required is that you put all of your specific hud changes in your OWN .thm file, and the user add a path to \Resource\Themes\Civ4\Civ4Theme.thm that includes your mod's .thm file. After that the rest can be done in the python files for your mod!

Note: the actual process of making the hud changeable dynamically is both simple and complicated at the same time. Adding the chaneg to the python is simple -- properly formatting the .thm file is somewhat more difficult. That is, still, my current avenue of research.

Man this thread excites me! Well done Rayanth, keep up the goood work and fight the good fight for us Civ modders. :D

This is VERY exciting, folks... this means that you will be able to DYNAMICALLY change the very look of the HUD, heck even the *layout* of the HUD, whenever you feel like it during the course of your mod! There could be no better way to help your user get into the feeling of your mod than changing the Interface to match the theme.

Great news! :goodjob:

This means we could do all sorts of polishing ... like, changing the HUD when you enter peace, war, a golden age, or a new era. :)

I think the real important one is having mod specific HUDs though. That is certainly something I would use in my mod if it's workable.

Has anyone noticed that the patch screwed with all the interface changes? Did this happen to anyone else? I might have accidently done it.

Has everyone abandoned this idea? Is it now possible with the SDK?

I only ressurect the corpse because a Mod specific GUI would PHENOMENAL for immersing the player in the world.

I have managed to make siginificant changes to the interface not using styles, but instead replacing the panels with .DDS files.

Unfortunetly, while most of the stanard .DDS files are available, not all are. This means it's quite tricky to make a template, as it wouldn't function the same as the normal interface.

http://img463.imageshack.us/img463/665/nottingham3aj.th.jpg (http://img463.imageshack.us/my.php?image=nottingham3aj.jpg)

(Still a WIP)

Very very nice, TGA - that's exactly the sort of look we could use.

When you've got a spare moment, do you think you could explain how you did that a little further?

Thanks a lot.

When you've got a spare moment, do you think you could explain how you did that a little further?
Tiny bit short of moments at the moment, but will write when I have a moment.

Tiny bit short of moments at the moment, but will write when I have a moment.

I know you dont have many moments, but maybe you could take a moment from working on Interstellar Colonization ( :P ) and write how you did that?

Great work Rayanth, this is the kind of thing that people will be very thankful for later.

Rayanth. I agree completely. I am very grateful for this info!

http://forums.civfanatics.com/showthread.php?t=244965
Modders are now using this info for making HUD Mods for BTS! Here's a tutorial Fabrysse wrote up. Good work Rayanth. :goodjob:

I think we should move tis to the SDK/Python subforum for its value

I thought I would revive this slightly old discussion by asking the obvious: has anyone ever succeeded in making the era-specific UI that was mentioned above a reality? This is something we were planning on doing for WoL, back when that project was active, but I'd like to continue with it.

I don't think anyones done it Gaius, I was a little surprised to see you posting here. ;) Well that question would be aimed at a coder, 3 files directories and contents would need to be changed era to era. You may have problems with it, because the HUD loads with the start of the game.

You may have problems with it, because the HUD loads with the start of the game.

Yes, but the interface is redrawn every 250 ms so I suppose you could override it somehow... I'd have to think.

Good luck, you'll get some screwy spit in the process.

If you need any answers to questions PM me.

Yes, but the interface is redrawn every 250 ms so I suppose you could override it somehow... I'd have to think.

I've made a new interface for the Main Interface in the relevant .py file. I just made new panels with other .dds files. I do a check for what Civ the player is playing as and change the color and some images (like showing the leaders face) of the interface depending on the active Civ and Leader.

I could easily do the same but for eras instead. Just do a check for what era it is and change the image accordingly. For example:


iEra = CyGame().getActivePlayer().getCurrentEra()

screen.addPanel("InterfaceTopLeft", u"",u"", True, False, 4,yResolution +4, 256, 128,PanelStyles.PANEL_STYLE_EMPTY)
screen.addDDSGFC( "InterfaceTopLeft", 'Art/Interface/Screens/MainScreen/Topleft_'+str(iEra)+'.dds', 1, 1, 256, 128, WidgetTypes.WIDGET_GENERAL, -1, -1 )
screen.hide( "InterfaceTopLeft" )
And then have an image for every era with the name Topleft_#.dds where # is that era's index.

You can even update the interface on every frame by calling on the screen in your onUpdate() event function in your eventManager.


def onUpdate(self, argsList):
'Called every frame'
self.parent.onUpdate(self, argsList)
fDeltaTime = argsList[0]
global TARGETING
global CLICKED_ON_PLOT
global UNLOADING

if not gc.getGame().GetWorldBuilderMode():
screen = CyGInterfaceScreen( "MainInterface", MAIN_INTERFACE )
screen.hide( "InterfaceDamageOverlay" )
screen.hide( "DamageOverlayTitle" )

mousePos = CyInterface().getMousePos()
overlayX = mousePos.x+20
overlayY = mousePos.y+10
I use this to update the stars you see in the screenshots below, and for the Damage Overlay seen, to follow the cursor.

BRA-VO!
Great job!

I agree, bravo, Grey Fox! That's precisely along the lines I was thinking. :)

One other question: I noticed in those screenshots that you have units with extra elements, such as "fuel" and "health." How did you manage that? (SDK work, I know...) I'm curious because I might be able to use that for the Quantitative Resources project, particularly the oil counter I am working on. Is there anyplace I can download the source code? :mischief:

I will share the code once it's stable enough.

But while I am here with internet access, I might make a modcomp with the fuel part.

The health is basically the old strength attribute just renamed. The reason I use it as health (with a new icon) is cause I don't use it all for combat anymore (I got a completely new combat system in place).

And the ammo system is a bit harder to make into a modcomp since it's part of my new combat system.

So I'll see about doing a fuel modcomp.

Good, it would be interesting to see how our two different systems compare. :D From the screenshot, I take it that you've made it unit-specific, so that each army has its own supplies lines and fuel reserve. The way I plan to do it in QR, based on Duke176's oil counter, it's a civ-wide reserve, so that movement takes fuel from a national stockpile.

I don't know how you've arranged it exactly, but I'm curious as to how you addressed the resupply and micromanagement issues. Is there just a set range based on borders and cities, where a unit is "in supply", and if it leaves that area, it's out of supply? Or is it deducted per turn? Anyways, looks to be very good stuff. :D

Land units and sea units lose 1 fuel per turn, and 1 fuel per tile moved. Air units lose 2 fuel per turn, and 1 fuel per tile moved. Sea units are the same as land units except for submerged submarines that lose 5 fuel per turn. (They start surfaced and are not invisible like that)

Infantry use the same function as other land units, Fuel is just renamed Rations in the Hud.

Units can resupply in the appropriate city type, Land units in cities and bases, air units in airports and sea units in ports. APCs can also resupply all unit types (with the resupply mission which resupplies all units in the 4 directions N, S, E and W. And also, all units situated next to the APC at beginning of turn gets resupplied automatically)

Air units and sea units with 0 Fuel at beginning of turn falls from the sky or sink. Land units just can't move.

Wow! I'm pretty impressed! I thought I was the only one working on a complex HUD, but apparently I am mistaken. I must hurry and finish mine before someone does something more impressive. :P

Well, I was going to wait until it was complete to show this, but I'm so close to being finished that I might as well post an example. This is what I've managed to achieve with a little knowledge of the thm files and python, a few games with good graphics to steal, photoshop and a lot of patience.

http://i270.photobucket.com/albums/jj106/The_Mattastic/CityScreen.jpg

I'm pretty fond of the progress bars. I think I've done a good job. :)

Yeah that's looking pretty sweet actually. :)

wow real impressive

GREAT JOB!!!
(10 chars)

Good, it would be interesting to see how our two different systems compare. :D From the screenshot, I take it that you've made it unit-specific, so that each army has its own supplies lines and fuel reserve. The way I plan to do it in QR, based on Duke176's oil counter, it's a civ-wide reserve, so that movement takes fuel from a national stockpile.

That's basically what I've done in the modcomp I promised. No supply lines or anything, but that can be added easily through python or additional changes in the SDK.

Download it here (Unit Fuel Mod) (http://forums.civfanatics.com/showthread.php?t=269430)

Great job @ Mattastic!!!

I came to this thread because I am working on a mod for Diplomacy games, and the main title image is green, dark brown, and gold. Which just so happen to be the same colors used in that image you posted. Would you mind if I used it for our mod? I'll give credit obviously, because that looks fantastic!

I just realized how long ago he posted that, and that he didn't seem to have uploaded anything. :(

Well back to the drawing board.

Good evening everyone!

I am so incredibly glad to see that my old project on this has spawned enough interest to become a core part of many of the great Civ4 Mods out there.

Sadly I haven't touched Civ4 in quite some time - I've fiddled a little here and there when the new expansions were released, but thanks to numerous changes in personal life, time is just so hard to come by.

I managed to find a copy of Civ Revolution for Xbox 360 recently, and started thinking of this old HUD-modding project I had started back in the old early days of the game, and wanted to touch base with everyone who had seen this and thanked me and took my work a step further.

First, my apologies for dropping the whole thing without warning. When I had originally started this project, I was a store manager at EBGames/GameStop. Losing that job caused a flurry of activites that, two years later, has resulted in my current occupation in the United States Air Force as an F-15 Mechanic.

Unfortunately, my new career is infinitely time consuming. But my love of gaming has never died down, and I intend to take Civ4 off the shelf, dust it off a bit and give it another go. Between two MMO's that I currently play, and a handful of console games as well, though, I cannot say that I'll be able to do any sort of modding work.

I wish everyone luck in their modding endeavors, and perhaps some day in Civ5 I'll find a way to get elbows deep in code again :D

-- Rayanth

Never posted here, but used this thread quite a bit while re-designing the Fall from Heaven interface. You should check out what you spawned sometime if you get a chance ;)