Skins
From IfsoGUIWiki
Contents |
Skins
Skins allows you to set a theme for your game/application. You design the graphics and the GUI uses them. You are free to use one of the skins that comes with ifsoGUI, or you can create your own. Skins are fairly easy and straight forward to create. Please look into the Skin directory of one of the example applications to get an idea of what files are where.
Requirements For Creating Your Own Skin
- The graphics for each gadget you plan to use.
- An entry in the dimensions.txt file for each gadget you plan to use.
- If you plan to allow the GUI to draw the mouse, you must include mouse graphics and the dimensions.txt file for the mouse graphics.
Skin Directory Structure
Inside of your Skins directory, the directory structure must look like this:
- SkinDir/graphics
- SkinDir/graphics/cursors
To Load your skin, you call GUI.LoadTheme("SkinDir"). SkinDir can be any path relative or absolute to the skin graphics.
The graphics directory should contain all of the graphics for the gadgets you intend to use. Do not forget that some gadget are dependent on others, so you need graphics for their dependencies as well. For instance, if you use a panel, then you will need to provide the graphics for the scrollbar, since panels use scrollbars.
The cursor directory should contain the graphics for the mouse cursors. If a mouse cursor graphic doe snot exist, then the normal mouse graphic will be used in its place. If the normal graphic does not exist, then the system mouse will be shown. This allows you to use none, one, or all of the mouse graphics. For instance, you could just use the IBar graphic so that textboxes have the ibar mouse, while all the other mouse states will just be the default OS graphic.
The graphics directory and the cursors directory should both contain a dimensions.txt file that tells the GUI how to use your graphics.
The documentation for each gadget explains which graphics are needed and how the dimensions.txt file entry(s) should be formatted in the Skinning section.
Some gadgets have multiple image files and some are optional. For example, the button gadget can have a normal graphic, a mouseover graphic, and a pressed graphic. The mouseover and pressed graphics are optional, if either or both are missing, the normal graphic will be used. Some gadgets have multiple parts and they all must be included, scrollbars have this requirement. One graphic for the bar, one for the slider button, and one for the arrow graphic that is on the buttons. All of these necessities are explained in each gadgets Skinning section.
Graphics Dimensions.txt File
In the graphics directory, this file tells the GUI the dimensions of the corners, sides, center, etc of the graphic elements for the gadgets. This allows the GUI to draw the gadgets at variable sizes.
The graphics dimensions.txt file has one or more lines per gadget. Each line begins with a keyword and must match exactly. The format is as follows:
keyword,tlw,tlh,tcw,tch,trw,trh,lw,lh,cw,ch,rw,rh,blw,blh,bcw,bch,brw,brh,T/S sides,T/S center
T = Top
B = Bottom
L = Left
R = Right
C = Center
W = Width
H = Height
T/S = Tile/Stretch
This gives three rows of 3 graphics. Each row has a left, a center, and a right, and whether or not the sides and center should be stretched or tiled when drawing.
sample line: panel,2,2,5,2,2,2,2,5,5,5,2,5,2,2,5,2,2,2,T,S
This line is for the panel graphic, the top left corner is 2×2, the top center is 5×2, the top right corner is 2×2, the left side is 2×5, the center is 5×5, the right side is 2×5, the bottom left corner is 2×2, the bottom center is 5×2, the bottom right corner is 2×2, the sides will be tiled, and the center will stretched.
The actual graphic is one png file named panel.png. When the GUI is started, it will read the panel.png file and the dimensions.txt file and separate the panel.png file into pieces, so that panel can be drawn at variable sizes.
All of the heights of each row must be the same. For example, if your top left corner is 3 pixels high, then the top center height and the top right corner height must also be 3 pixels high. The same is true for the middle three pieces and the bottom 3 pieces, they must share the same height among the three pieces from the row. But, the top row does NOT have to have the same heights as the middle row or bottom row.
Stretched or Tiled? If a side is to be tiled, then the entire graphic is drawn over and over as many times as it takes to draw the entire side of the gadget. If a side is stretched, then the graphic that makes up the side will be stretched the entire length of the side. Same goes for the center graphic, if tiled, it is drawn over and over the entire center area, if stretch, it is stretched to fill the area.
Mouse Dimensions.txt File
In the cursors directory, this file is formatted as follows:
5
normal.png,0,0
mouseover.png,5,0
mousedown.png,5,0
mouseresize.png,7,6
ibar.png,5,8
Line 1: number of cursors
Line 2: graphic file for normal mouse,x,y
Line 3: graphic file for mouse over,x,y
Line 4: graphic file for mouse down,x,y
Line 5: graphic file for mouse resize,x,y
Line 6: graphic file for ibar,x,y
The x,y values should be where the mouse’s actual pointing spot is when using that graphic. The ibar graphic is the cursor that normally appears when you mouse over a textbox type gadget.
