Skinning Tutorial

ini Files and their use in skinning of SpeedSim is not that difficult. The communication between the skin and SpeedSim works over an ini File with 5 sections. An ini file is structured that way:

; everything behind a semicolon
; will be ignored
; comments can be only at the beginning of a line
[Section1]
Key1=something
Key2=foo
Key3=bar
[Section2] 
Key4=anything else. . .

As you can see an ini file consists of the section names (those one in squared brackets) and the corresponding keys where the data is stored. An ini File for a SpeedSim skin is structured this way:

; Filename e.g. Skin.ini  
[General] 
SkinDesc=Your skin description§With a line break
CSS_BWC=/skinpath/layoutbwc.css
CSS_CR=/skinpath/layout.css

[Bitmaps] 
; various bitmaps / background, buttons
Background=/skinpath/Skinbitmap1.bmp 
Button_normal =/skinpath/Skinbitmap3.bmp 
Button_pressed = /skinpath/Skinbitmap2.bmp  

[Colors] 
; colors for buttons, checkboxes, edit fields etc. (see below for description)
Button_TextColor = 255, 0, 0 
Edit_TextColor = 255, 255, 255 
Edit_BG_Mode = TRANSPARENT 
Edit_BG_Color = 255, 255, 0 
CheckBox_BG_Mode = TRANSPARENT 
CheckBox_TextColor = 255, 255, 255 
CheckBox_BG_Color = 0, 0, 0 
Label_TextColor = 255, 255, 255 
Label_BG_Mode = TRANSPARENT 
Label_BG_Color = 100, 100, 100 
GroupBox_TextColor = 255, 255, 100 
GroupBox_Framecolor = 0, 255, 0
Button_TransColor = 255, 0, 255

[LabelColors]
; certain elements can be colored individually
LC_Defender = 128, 128, 128 
LC_Attacker = 128, 128, 128 
LC_Ships = 200, 50, 0 
LC_Defense = 50, 200, 0 
LC_Techs = 200, 200, 0 
LC_Res_Scan = 200, 200, 0 
LC_Res_Win = 200, 200, 0 
LC_Res_TF = 200, 200, 0 
LC_Res_Loss_Att = 200, 200, 0 
LC_Res_Loss_Def = 200, 200, 0 
LC_Res_Moon = 200, 200, 0 
LC_Res_Th_Beut = 200, 200, 0 
LC_Res_Pr_Beut = 200, 200, 0 
LC_Res_Sprit = 200, 200, 0 
LC_Res_Welle = 200, 200, 0
LC_ReadInTitle = 200, 200, 0
LC_NumSims = 200, 200, 0
LC_OwnPos = 200, 200, 0
LC_ACSSlot = 200, 200, 0
LC_FleetSpeed = 200, 200, 0
LC_Ships_Res_Att = 255, 255, 255
LC_Ships_Res_Def = 255, 128, 255
LC_Ships_Res_Def2 = 255, 128, 255

[Font]
; if you want to change the font of the windows
FontName = MS Sans Serif  
FontHeight = 8 
; FontFormat
; choose one of the following or combine them  
; BOLD, UNDERLINE, ITALIC, STRIKEOUT  
FF_Ships_Techs = BOLD
FF_Result = NORMAL 
FF_Misc = BOLD 
FF_Options = BOLD, ITALIC
FF_Titles = BOLD 
FF_Buttons = BOLD
FF_GroupBoxes = ITALIC

That ini file is aleady a bit bigger. It consists of 5 sections. Those are:

  • General
  • Bitmaps
  • Colors
  • LabelColors
  • Font

The section [General] has two keys. The key SkinDesc can be used by yourself and will be outputted as a MessageBox if this skin is chosen. Use '§' to insert a line break. CSS_BWC and CSS_CR are optional and define the css file which will be used for the html files (Best/Worst-Case and the combat report).

The section [Bitmaps] contains the information about the bitmaps used in the skin. The files can be relative path names, too. In Background you have to set the image that will be used as background image. If it does not have the correct size it will be stretched to the correct size. Button_normal is the bitmap for the button who are in normal state (not pressed). Therefore the key Button_pressed is the bitmap that will be painted if you press down a button.

The section [Colors] describes the colors of all elements. The this ini file color values are set as RGB (red, green, blue) mix. The components of the are are seperated with a comma. So white is 255, 255, 255 and pink would be 255, 0, 255. The key names have a uniform format. The first word is the name of the element (button, edit, label, groupbox, checkbox) the second word says which property will changed. _TextColor, logically, specifies the color of the text. _BG_Color specifies the background color of the text or the element. And _BG_Mode sets whether the backgound should be drawn or not. If you use TRANSPARENT, the background of the element won't be changed. OPAQUE makes the skinning engine overwrite the old background with the specified background color. Finally, GroupBox_FrameColor specifies the color of the frame of group boxes. In version 0.9.4.3b a new Key as been added: Button_TransColor. If you set this key, the specified color will not be painted on buttons (this color is transparent).

The section [LabelColors] sets a few color values for certain labels. If a key is not set, the default value from [Colors] is taken:

  • LC_Attacker: The word 'Attacker' in the tables.
  • LC_Defender: The word 'Defende' in tables.
  • LC_Ships: The ship names (Small Cargo, Heavy Fighter...).
  • LC_Defense: Names of denfence units (Missile Launcher...).
  • LC_Techs: Technology names
  • LC_Res_Scan: The text field next to "Battle on" (Res stands for Result)
  • LC_Res_Win: The text field next to "Result"
  • LC_Res_TF: Right to "Debris field"
  • LC_Res_Loss_Att: "Losses Attacker"
  • LC_Res_Loss_Def: "Losses Defender"
  • LC_Res_Moon: "Moonchance"
  • LC_Res_Th_Beut: "Theoretic Plunder"
  • LC_Res_Pr_Beut: "Real Plunder"
  • LC_Res_Sprit: "Fuel"
  • LC_Res_Welle: "Plunder from Wave"
  • LC_ReadInTitle: "Reading field"
  • LC_NumSims: "Number of Simulations""
  • LC_OwnPos: "Own Position"
  • LC_ACSSlot: "ACS Fleetslot"
  • LC_FleetSpeed: Above the fleet velocity ("Speed")
  • LC_Ships_Res_Att: Surviving ships of attacker
  • LC_Ships_Res_Def: Surviving ships of defender
  • LC_Ships_Res_Def2: Surviving defense of defender

In the last section [Font] you can do various settings for the font. Those are: font name (FontName), font size (FontHeight) and some font formats for certain 'areas' (FF_*). In FontName just write in the name of the font, like "Arial" or "MS Sans Serif". The possible font formats are BOLD, UNDERLINE, ITALIC and STRIKEOUT and you can also combine them as you like. If you do not wish to change the font format, just write in NORMAL or leave the key empty. Thoese are the areas for the font formats:

  • FF_Ships_Techs: Used for ship, defence and technology names
  • FF_Result: For all fields in the combat result.
  • FF_Options: For al fields in the 'Options' group box.
  • FF_Titles: "Attacker" and "Defender" will get the format specified there
  • FF_Buttons: For the text on the buttons
  • FF_Misc: Most of the missing fields
  • FF_GroupBoxes: Border and Title around Fleet, Defense etc.

Tips

Last but not least a few tips:
  • Size your background image to 800x666. Then it wont be streched in a strange way if there are transparent elements on it.
  • Save your bitmaps in a subfolder with the name of your skin. Then add the folder to the image name (e.g. Background=MySkin\bg.bmp). However the ini file must be in the SpeedSim folder or else the skin can't be loaded.