GettingStarted
From XfireWiki
Contents |
Introduction
Xfire uses a skinning system that allows it to change its appearance quickly and easily. By providing a multitude of looks and feel Xfire continues to stay fresh and entertaining.
Xfire's skinning system seperates content and design. Content is provided and protected by Xfire while the layout and design is left to the skinner. The negative side of that kind of freedom is because so much control is allowed to the skinner, learning how to create your own skin is a little overwhelming at first. There are a lot of details to take care of, and the mass of information can seem incomphrensible. However, there is a basic structure that, once learned, will make it possible to decipher everything, even if it doesn't make it easy.
Creating a skin is a lot of work. You will need a bit of determination as well as creativity, and quite a bit of free time. If you succeed, however, millions of Xfire users will see your work.
Overview
Imagine the Xfire client as a big jigsaw puzzle. Each puzzle piece has a picture on it that when combined with other pieces create a larger picture. This is what Xfire does. When the Xfire client loads, it solves a jigsaw puzzle by loading a bunch of pieces together in a certain order. However, Xfire cheats. The Xfire client demands (and gets) a cheat sheet that tells it where each puzzle piece goes, so that the end result looks right and proper.
In order to create your own skin, you have to make the puzzle pieces and provide Xfire with a cheat sheet. We'll cover the puzzle piece creation first, to get that out of the way.
Graphics
You probably have some idea of what kind of skin you want to create. Unfortunately, at some point you will have to know exactly what kind of skin you want to create. When you create a puzzle, you start with the overall picture first, and then cut it apart into little pieces. The same process applies in skinning. You should create the overall look, and get that looking exactly the way you want it, before you proceed. If you need help with Photoshop... um, sorry. Use Google!
After you create the look you want the mockup needs to be torn apart. Into 114 pieces. No, I'm not kidding. I did mention this involved a bit of work, didn't I? Seriously, the best way to learn this is to look at the standard skin in the Xfire directory. Each picture file contains an element such as a button, a tab, or a side of a window. Cut apart your skin so that the basic structure is similar to the structure for the standard skin. This isn't a requirement, as you can do anything you want, but it makes things easier.
Note about graphics:
The graphic files can be either gifs or pngs. Gifs are recommended as they are easier to work with. If some parts
of the picture need to be transparent, color that part of the picture #FF00FF (a bright hot pink). Xfire won't show
that part!
Code
After you have a bunch of little picture files representing what used to be your nice and clean design, you will need to create the cheat sheet. Xfire needs to know what each file is and where to put it. Xfire uses XML to do this. XML (or Extensible Markup Language) is actually easy to understand once you get a little explanation. XML documents are a list of elements with each element having a list of descriptions about it. Lets take a quick look at how XML works. Here is a sample:
<wagon>
<name>My Wagon</name>
<color>Red</color>
<type>Red Flyer</type>
</wagon>
This XML document has a list of descriptions about a wagon. The words inside the <> are called tags. Learn that, it will come up a lot. This is how the Xfire client determines what is what. The client will search through your cheat sheets looking for a specific tag. Once it finds that tag, it will read all the descriptions about the tag. Confused? Sorry, I know that was a quick and insufficient introduction. For more reading, you can look at http://www.w3schools.com/xml, or you can take your chances and keep moving on with this guide. I say keep moving on!
The rest of this guide will go over the XML files required for the Xfire client, and work through some examples. The documents discussed are the XML files from the standard skin directory from your Xfire installation. They are also posted on this wiki, and you can find the links at the end of the respective section.
The XML specification has the templates and exact definitions for people who already understand XML and want to get to the coding.
XML Documents
skin.xml
The first document to concern yourself with is skin.xml. Xfire needs to know how to render each window, infoview, and popup, and this is the file that tells it what to look for. This file doesn't contain this information. Instead, it contains where to find this information. Its an important distiction. If you take a look at the structure of this file, you will see a bunch of tags and include statements. Each tag lists an element, then the filename of the element's specifications. Take a look at the file:
<XfireSkin>
<Include File="themes.xml" />
<Include File="strings.xml" />
<Include File="components.xml" />
<Include File="popups.xml" />
<MainSkin>
<Include File="mainwindow.xml" />
</MainSkin>
<ChatSkin>
<Include File="chatwindow.xml" />
</ChatSkin>
<GroupChatSkin>
<Include File="groupchatwindow.xml" />
</GroupChatSkin>
<InGameMainSkin>
<Include File="ingamemainwindow.xml" />
</InGameMainSkin>
<InGameAlertSkin>
<Include File="ingamealertwindow.xml" />
</InGameAlertSkin>
</XfireSkin>
A "tag" is anything inside the less than and greater than sign. <InGameAlertSkin> is a tag that begins the InGameAlertWindow segment, and </InGameAlertSkin> ends that segment. Anything that looks like this: ". The computer wouldn't recognize the "and" in the previous sentence.
There are 9 files specified here. Themes.xml contains information regarding the available theme options for your skin (if you are totally new, themes allow the skin to change color without changing the graphics or layouts). Strings.xml contains all the text in the client. These first three xml files (skin.xml, themes.xml, strings.xml) are all simple files that are good to study first. The other files get a little more complicated. Popups.xml contains specs for the different informational popups that occur occasionally, while components.xml has a bunch of different component lists. The other 5 xml files are all window specs. Don't worry, we'll cover them all!
In order to change the name or location of the file referenced, you just change the filename inside the quotes. For an example, if I want to name my group chat window file gcwheeee, because I want to have the most confusing names possible, I would write:
<GroupChatSkin>
<Include File="gcwheeee.xml" />
</GroupChatSkin>
The tag is GroupChatSkin, and the file name is gcwheeee.xml. Don't change the tag, as those are specific names meant to communicate with the Xfire client. Change the file name as often as you'd like!
For further study: skin.xml.
info.xml
To give the skin some extra information and add some credits to it, there is the info.xml. This document adds extra information to the skin. Below is an example of a default file included with the standard skin with Xfire.
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE SkinDescription SYSTEM "xfireskin.dtd">
<SkinDescription>
<Author Type="original">Xfire, Inc.</Author>
<Author Type="contributor">Tim Brengle</Author>
<Website>http://www.xfire.com/</Website>
<Name>Standard</Name>
<LongName>Standard</LongName> <!-- Name that shows up in Xfire when the user chooses the skin -->
<Version>2</Version>
<CompatibleVersion>1.59</CompatibleVersion>
</SkinDescription>
This file is required for every skin. Even though most of the information is not used by Xfire at the time of writing (v1.72), it might have use in the future. To preventproblems in the future, add all this information in your file.
themes.xml
The themes.xml file is a good file to look at next. Take a moment and look at the similarities between skin.xml and themes.xml. Although themes has considerably more entries, and therefore looks much more intimidating, it has the same basic structure. Here it is stripped down to a few examples per section:
<Themes>
<Theme name="default">
<Colors>
<Color name="AdAreaCG">RGBA(8,16,32,0)</Color>
<Color name="TitleBar">RGBA(0,0,100,0)</Color>
<Color name="TitleBarDeactivated">RGBA(-30,-30,-30,0)</Color>
<Color name="MenuHoverCG">RGBA(30,30,30,0)</Color>
...
...
</Colors>
<ColorShifts />
<Sounds />
<Bitmaps>
<Bitmap name="ADBARLEFT">adbar-left.gif</Bitmap>
<Bitmap name="MIDDLE">middle.gif</Bitmap>
<Bitmap name="TOPLEFT">topleft_edge.gif</Bitmap>
...
...
</Bitmaps>
</Theme>
<Theme name="MyOwnTheme">
...
</Theme>
</Themes>
The Themes section contains two different themes, "default" and "MyOwnTheme" (which I made up!). MyOwnTheme would look suspiciously like "default," so it has been omitted.
For each theme four sections are listed: color, color shifts, sounds, and bitmaps. Each section contains a list of variables. A variable is simple an association, in this case between words and a color. This allows you to state "TitleBar" in every xml files instead of RGBA(0,0,100,0) everywhere. This has an added benefit in that when you want to change the color, you change it here in the xml file and every place you typed "TitleBar" it will reflect that change!
<Color name="TitleBar">RGBA(0,0,100,0)</Color>
To be exact: "TitleBar" is the variable name. RGBA(0,0,100,0) is the color. If you want to change the color, change that to "RGBA(x,y,z,q)." The four numbers represent the color levels of the color. There are a couple ways to find out what numbers you want, from web sites or a graphics program such as Adobe Photoshop.
For further study: themes.xml.
strings.xml
The strings.xml file associates a string resource id with another variable name of your choice.
<Strings lang="en"> <String name="AddButtonTip" resourceid="221" /> <String name="ChatButtonTip" resourceid="222" /> <String name="GameButtonTip" resourceid="224" /> <String name="InfoButtonTip" resourceid="226" /> ... ... </Strings>
If you want to overwrite a string in order to create your own, the tag changes a little bit. For example:
<String name="InfoButtonTip">This is my info button tip!</string>
The string "This is my info button tip" will display wherever the InfoButtonTip tag is used.
For further study: strings.xml.
components.xml
Hopefully by now you are feeling a bit more comfortable with the xml structure, because this next file is going to test your determination. Remember, it all has the same structure, all that is added is more numbers!
Components.xml is a catch-all file. Every component is described here, and that description has to be fairly specific depending on what component it is describing. Yes, it is enormous. But remember, you don't have to write everything. Instead, you should find what you want to change, and edit that portion.
For further study: components.xml.
popups.xml
Popups are tiles that may contain tiles. Only an info popup, chat info popup, and group info popup need to be defined. Here is a simplified version (the ... represents the layout definitions):
<Tile Name="InfoPopup" ... >
<Tile Name="XfireTopRow" ... />
<Tile Name="XfireBottomRow" ... />
<Tile Name="XfireMiddleRow" ... />
<Tile Name="BackDrop" ... />
<Tile Name="InfoView" ... />
<Tile Name="InfoGripperTR" ... />
<Tile Name="InfoGripperBR" ... />
<Tile Name="ResizeRight" ... />
<Tile Name="JoinButton" ... />
<Tile Name="JoinChatTab" ... >
<Tile Name="HostChatButton" ... />
<Tile Name="JoinChatButton" ... />
<Tile Name="LeaveChatButton" ... >
<Tile Name="TalkingStateButton" ... />
</Tile>
</Tile>
<Tile Name="CloseInfoView" ... />
</Tile>
Two examples of complete tile definitions from above:
<Tile Name="XfireBottomRow" - Name of the tile
ResizeX="100" - Allows the window to be resized 100% along the X axis
JustY="BOTTOM" - Aligns the tile along the bottom of parent window
Component="XfireBottomRow" - Of type XfireBottomRow (which is defined in components.xml)
/> - Closes the tile
<Tile Name="InfoView"
Y="8" - Horizontal position relative to parent window
X="4" - Vertical position relative to parent window
IndentRight="4" - Right margin
IndentBottom="48" - Bottom margin
ResizeX="100" - Resizing along the x axis
ResizeY="100" - Resizing along the y axis
Component="InfoView" - Of type InfoView (which is defined in components.xml)
/>
For further study: popups.xml.
Window Layouts
Each window in the Xfire client needs to have a structure and layout specified. The windows include:
These files have the same tile layout as the popups do.
But how do I make a skin?
If you have read this far, you are probably confused. If you skipped to the end, you are probably even more confused. If you would like to just get started, check out this tutorial put together by Starsoft.
Still in progress...
