View unanswered posts | View active topics It is currently Wed Sep 26, 2018 4:01 am



Reply to topic  [ 4 posts ] 
 GUI Editing 
Author Message
happy carebear mom
User avatar

Joined: Tue Mar 04, 2008 1:40 am
Posts: 7089
Location: b8bbd5
Reply with quote
Post GUI Editing
Since the GUI is not well documented (if at all?), and I fiddled with it a little, I figured I should probably write it up in case someone wants to make a reskin in the future. This is so far just for the main menu and loading screens, but it is likely directly applicable to ingame GUI.

Programs you will need:
Image editor
Text editor

Major folders of importance:
Base.rte/GUIs/
Base.rte/GUIs/Skins/MainMenu/
Base.rte/Title/

Major images of importance:
Base.rte/GUIs/LoadingSplash.bmp

Base.rte/GUIs/Skins/MainMenu/bluegui.bmp
.../greengui.bmp
.../browngui.bmp
.../pointer.bmp

Base.rte/Title/Moon(Alpha).bmp
.../Nebula.bmp
.../Planet(Alpha).bmp
.../Station.bmp
.../Title(Alpha/Glow).bmp
Base.rte/Title/Stars/Star(Huge(000/001)/Large/Small(000/001/002/003)).bmp

Major inis of importance:
Base.rte/GUIs/Skins/MainMenu/skin.ini
.../LoadingSkin.ini

Every button and control in the main menu is defined in MainMenu/skin.ini, and that in turn points to two .bmp files, bluegui.bmp and greengui.bmp.
bluegui items include everything in the main screen and most everything in all submenus. The only exception is the scene picker in the skirmish menu, which is mapped to greengui.bmp.
You may safely change every greengui.bmp reference to a bluegui.bmp reference to avoid having to hunt for the specific controls that pick from greengui.bmp, all three gui bitmaps (blue, green, brown) have the exact same images with different colors.

None of the bitmaps used in the main menu or loading screen require a palette. In fact, the only image that is by default in palette is the loading screen image, which does not actually need to be in palette.
The only requirement as far as colors is that the blue/green/browngui.bmp images must have 255,0,255 spots for transparency, or the entire screen under the component will be filled with 255,0,255.

Inside the skin.ini and LoadingSkin.ini files is a listing of component styles, roughly adhering to this sort of format:
Code:
[Name_Of_Component]
Filename = [blue/green/browngui.bmp image file to draw from]
TopLeft = 0,24, 2,2 [coordinates for a square image to draw as the upper left corner of the component]
Top = 3,24, 1,2 [coordinates for a square image to tile across the top of the component, between the TopLeft and TopRight images]
TopRight = 7,24, 2,2 [same as TopLeft, but for the upper left corner]
Left = 0,27, 2,1 [same as Top, but for the left side]
BottomLeft = 0,31, 2,2 [" " TopLeft " " " lower left corner]
Bottom = 3,30, 1,3 [" " ", " " " bottom side]
BottomRight = 7,31, 2,2 [" " TopLeft " " " lower right corner]
Right = 6,27, 3,1 [" " ", " " " bottom side]
Filler = 12,24, 8,8 [coordinates for a square image to tile inside the component, under any text]


In addition, components with text will have the following lines:
Code:
Font = [fatfont.bmp image to draw font bitmaps from]
FontColor = 0 [unknown, perhaps a color rotation]
FontKerning = 0 [unknown]
FontShadow = 0 [unknown, boolean whether to draw shadow or not?]


There are several font options that are unknown to me, including the Color, Kerning, and Shadow options above, and these I found in the List_Box control:
Code:
FontSelectColor = 15
SelectedColorIndex = 61

Possibly these draw from one of the palettes (likely titlepalette.bmp if so) for their indices, but I am not sure. They may also just refer to a Hue rotation value.

There are several minimal line controls, such as ScrollTopArrow:
Code:
[ScrollTopArrow]
Filename = bluegui.bmp//green
ColorKeyIndex = 0
Rect = 114,64, 3,3 [coordinates for a square image to draw the arrow image from]


And of course, radio buttons and checkboxes:
Code:
// Checkbox Control
[Checkbox]
Filename = bluegui.bmp//green
ColorKeyIndex = 0
Font = font.bmp
FontColor = 0
Base = 16,60, 7,7
MouseOver = 9,0, 8,8
Check = 0,9, 8,8
GreyCheck = 9,9, 8,8

// RadioButton Control
[RadioButton]
Filename = browngui.bmp
ColorKeyIndex = 0
Font = fatfont.bmp
FontColor = 0
FontKerning = 0
Base = 0,60, 7,7 [coordinates for a rectangular image to draw the unchecked image from]
MouseOver = 8,60, 7,7 [" " " " " " " " mouseover image from]
Check = 0,67, 7,7 [" " " " " " " " checked image from]
GreyCheck = 8,67, 7,7 [" " " " " " " " disabled image from]


There are many more controls, but most of them are self-explanatory, even these ones I did explain.

It is likely that one could make changes to the shapes of controls, which I did not do, and even start from a new image instead of editing the currently available ones for color, using these inis.


The loading screen GUI is much the same, but uses only browngui.bmp to draw controls from. LoadingSplash.bmp is the main bitmap seen to the left of the datamodule check tree.

The main menu graphics are the funnest parts to play with, since they are so prominent. All three, title, planet, and moon, are two-image composites (title is three-image), with one image being the actual image to display and the -Alpha.bmp being what pieces of it to display (consider this the alpha channel instead of an internal one).
Title has a third image, -Glow.bmp, which is drawn directly over Title.bmp and acts exactly like an ingame glow, though this one flickers a bit.
I have not experimented with resizing nebula.bmp, but it looks like this might be a bad idea. The intro uses the full height of it. Perhaps Data was smart enough to script it by percent rather than absolute movement.
Station.bmp may be resized if desired, though I am not sure if it automatically recenters the point of movement or not.
All images are used for the main menu, campaign menu, and intro, where they appear.



It is outside of the scope of my experiments, but it looks like the demo advertising images, title backstory images, and pie icons can all be edited to your heart's content.
Base.rte/Title backstory images appear to live in Title, demo advertising images in Base.rte/RegSpash, and pie icons in, well, Base.rte/GUIs/PieIcons .


Thu Nov 12, 2009 10:25 pm
Profile
User avatar

Joined: Wed Sep 09, 2009 3:16 am
Posts: 3029
Location: Somewhere in the universe
Reply with quote
Post Re: GUI Editing
Did this come off of Loading Splash Discussion, when i asked about the boring brown loading window on my Sci-Fi loading splash?
Just to clarify, you can technically have a 32-bit bmp loading splash, since thats what i have.


Fri Nov 13, 2009 3:54 am
Profile WWW
Moderator Hero

Joined: Sun Dec 24, 2006 11:28 pm
Posts: 868
Location: London Server
Reply with quote
Post Re: GUI Editing
Added to mod making FAQ.


Fri Nov 13, 2009 5:14 pm
Profile
User avatar

Joined: Tue Aug 21, 2007 6:50 pm
Posts: 93
Location: Lithuania.
Reply with quote
Post Re: GUI Editing
Edited Buy Menu and some more GUIs. Be careful and make some back up's.


Attachments:
BuyMenuGUI.bmp
BuyMenuGUI.bmp [ 449.12 KiB | Viewed 2994 times ]
GUIs.rar [235.29 KiB]
Downloaded 149 times
Sat Apr 10, 2010 11:39 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: Google [Bot]


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.
[ Time : 0.021s | 16 Queries | GZIP : Off ]