Xfire Game Skins

Starting with release 1.42, Xfire supports "game skins". A game skin is a set of one or more html (and css and javascript) files that are drawn in the infoview when you select a game server in the Servers tab or a person playing a game on the Friends tab.

If you do not have a game skin for the selected game, then you get some standard information about the server (and user if on the Friends tab).

However, if you do have a game skin for the selected game, that html is drawn in the infoview instead of the default bland information. In release 1.42, we've included game skins for Call of Duty Multiplayer, Battlefield 2, and Unreal Tournament 2004.

Note: game skins are separate from Xfire skins; they are displayed the same no matter which Xfire skin you have installed. They are also much easier to create as they are created in HTML.

Making your own Game Skin

For the purposes of the following discussion, assume that Xfire is installed into c:\\program files\\xfire. All game skins are stored below the c:\\program files\\xfire\\infoview directory, in a subdirectory based on the game. To find the proper filename for a game skin, look up the short name of the game in the c:\\program files\\xfire\\xfire_games.ini file by finding the game's entry, and then looking at the ShortName entry.

For example, Battlefield 2's short name is bf2, so its game skin is in c:\\program files\\xfire\\infoview\\bf2. The starting point in that directory is then game_bf2.tmpl. Despite the extension, that template file is merely html (including javascript) to be displayed. All game-specific files belong in the game specific directory. We've also created c:\\program files\\xfire\\infoview\\images for images that will be used by multiple game skins, such as the Punkbuster icon (punkbuster.gif).

Template files

Template files are regular html, with the only difference being that certain strings are replaced by the Xfire program before displaying them. All of these strings begin and end with a percent (%). You can look at our example game skins to get an idea of how to use them.

Here are some of the key string replacements to use. Please look at c:\\program files\\xfire\\infoview\\bf2\\game_bf2_js.tmpl for more (it is included by game_bf2.tmpl).

• %user_ingame% - whether this is a user entry (with a server) or a server entry.
• %display_user% - if %user_ingame% is true, then this is the user's display name (username or nickname, depending on a preference setting).
• %text_name%, %text_ping%, %text_score% - translations of name, ping, and score into the user's language
• %language% - the language that the Xfire client has been configured to display. You can use it to make a game skin that can work in multiple languages (though you need to find someone to do the translations, of course).
• %team_data_struct% - this is formatted to be a javascript array of team information for the server. This is only supported for certain games (in particular, bf2, ut2k4, and codmp).
• %raw_serverinfo% - this is formatted to be a javascript associative array of all key/value pairs returned from the server.
• ... and more. If you have suggestions for information we should make available as string replacements, please let us know on the Xfire Skins forum.

One of the most interesting string replacements is %raw_serverinfo%. It is replaced by javascript-compatible key/value pair combinations based on all keys and values that Xfire has for the current game server. This can be assigned to a javascript variable and then examined with javascript. For example, our Battlefield 2 game skin uses this to decide if the server is a ranked server, if the server is voice enabled, and if the server requires Punkbuster. Much more is possible.

Keep in mind that the same template file is used whether a server is selected on the Servers tab or a person is selected on the Friends tab. You should make your template work in both cases, by displaying user information if it's available, and then always displaying the server information.

Plans and Projects

Xfire currently supports more than 300 games. If we made game skins for every single game, the Xfire installer would become way too large. Instead, we plan to support some of the top games and distribute those game skins with Xfire. We fully support users creating their own game skins, and we would like to put together packages of some of the best ones to make available on our web site and through our download system so that everyone can benefit from them.

Make backups! If we end up bundling a new game skin with the next Xfire update and you were developing one of your own, it could be overwritten. Make sure to copy your work in development to somewhere outside of your Xfire installation directory.

Game skins offer a lot of power to express your creativity. Go wild! If you need a project, here are a few suggestions to get started with:

• Update one or more of our game skins to use XHTML instead of HTML 4.01 Transitional
• Use javascript to decode and color code player names in our Call of Duty game skin.
• Add more fields to the Battlefield 2 game skin player list (such as kills and deaths).

Over time, we expect to improve our game skins and also to export more variables (% strings) to give you more power to develop great game skins. Help us out by discussing your ideas in the Xfire Skins forum. Many Xfire admins read the forums, though only a few of us regularly post.