Blog

Creating a New UI Theme for the DigitalRune Game UI

Jul 12

Written by:
Tuesday, July 12, 2011  RssIcon

The DigitalRune Game UI is a very flexible XNA GUI library that can be used in games for Windows, Xbox 360 and Windows Phone 7. The library can be used to create a simple menu in a console game or a complex GUI in a game editor.

It contains several predefined UI themes. Yesterday, we have created a new theme that will be included in the next release. This blog post shows the necessary steps to create a new UI theme.

The New UI Theme: BlendBlue

Here is a pic of the new UI theme called “BlendBlue”:

ControlsSampe-with-BlendBlue-Theme

(Click picture to enlarge)

It has a grayish look similar to the Blender style and a blue accent color – hence the name “BlendBlue”. It is designed for use in our game editor (no release date announced yet).

Creating a New UI Theme

Unfortunately, we do not have a UI theme editor yet. New themes need to be created manually.

Step 1 – Get familiar

As a first step, it is a good idea to get familiar with the DigitalRune Game UI. Read the documentation that is included (also available online). Check out the sample applications and the included UI themes (Aero, NeoForce, WindowsPhone7). The library is very flexible and the best way to learn its structure is to analyze the pre-built themes.

A UI theme consists of

  • mouse cursor files (.cur or .ani),
  • sprite fonts (.spriteFont),
  • a bitmap (usually .png) containing a texture atlas with the images of the controls, and
  • an XML file defining the UI theme.

Check out the XML files of the predefined UI themes and see how the control images in the texture atlas are used in the theme.

When you are familiar with the theme structure, when you know which controls are supported and which you want to use in your theme, you can start to design the UI theme.

Step 2 – Design a new theme

Start up your favorite image editor and start designing your GUI controls.

We actually prefer using Expression Blend! We start by creating a WPF application with one window that contains all required controls. Then we change the styles of the controls and create our new theme. We can immediately test the GUI since we are creating an interactive WPF application. One reason why we use this approach is because we also want to be able to use the same theme in future WPF/Silverlight applications.

If you are not a WPF/Silverlight developer, then you are probably better off using a different tool, such as GIMP or Photoshop.

In the next steps we will create the DigitalRune Game UI based on the new design.

Step 3 – Copy an existing UI theme

We do not create the new theme from scratch. Instead, we copy an existing theme, for example the Aero theme (in the “UI Themes” folder in the DigitalRune Game UI samples). Our goal is to copy an existing theme and to modify the copy step-by-step (or control-by-control) until we have our new theme. In the whole process we will always have a working theme that transitions stepwise from 100% Aero to 100% BlendBlue.

To copy an existing theme:

  • Copy the “Aero” folder and rename it to “BlendBlue”
  • Rename the file “AeroTheme.ContentProj” to “BlendBlueTheme.contentproj”.
  • Open “BlendBlueTheme.contentproj” in a text editor.
  • Replace the ProjectGuid (e.g. “<ProjectGuid>{68CA309E-2F40-4DA1-82D8-95B6CA2FB996}</ProjectGuid>”) in BlendBlueTheme.contentproj with a new GUID. To create a new GUID use the menu Tools > Create GUID in Visual Studio.
    (We change the Project GUID because we want to be able to use AeroTheme.contentproj and BlendBlueTheme.contentproj in the same Visual Studio solution. If we do not use a unique ID for each project, VisualStudio might get confused.)
  • Change the ContentRootDirectory entry to “<ContentRootDirectory>BlendBlueTheme</ContentRootDirectory>”.

Step 4 – Add the new theme in the ControlsSample

The ControlsSample (included in the DigitalRune Game UI) is a good place to develop and test a new UI theme because it uses all UI controls. Open the ControlsSample solution and add the new BlendBlueTheme.contentproj.

In the ControlSample add a Content Reference to the new content project.

The MainScreenComponent.cs contains the code that loads the UI themes. Add the BlendBlueTheme as the first theme.

When we run the ControlsSample, we see our new BlendBlue theme – of course it still looks like the Aero theme. Now we can start to exchange things and add our new theme step by step. We replace the controls one after the other. We always run the ControlsSample to check our intermediate results.

Step 5 – Replace mouse cursors and sprite fonts

Go the “BlendBlue” folder in the Windows Explorer and replace the cursor files and sprite font files. You can edit the .spritefont files directly in a text editor. Then update the <Cursors> and <Fonts> sections in Theme.xml. Run the ControlsSample again to check if the changes are working.

Up to here, this was the easy part ;-)

Step 6 – Style the controls

To change the control styles, open the UITexture.png in an image editor – we prefer Photoshop.

Here is the original UITexture.png of the Aero theme:

UITexture-Aero

We increase the size of this image and add new control images at the bottom, starting at Y=100:

UITexture-Aero-and-BlendBlue

To create the control images we run our themed WPF application and make screenshots of the controls in all necessary states (MouseOver, Pressed, etc.). (By the way, here is a cool free screenshot tool: Greenshot.)

Then we crop the screenshots in Photoshop. We use a separate Photoshop layer for each control and visual state (e.g. “Button-Default”, “Button-Pressed”, etc.). Using separate layers we can move the control images independently to arrange them on the texture atlas.

If a control requires transparency (e.g. for shadow, glow effects, or anti-aliased borders), then we create them directly in Photoshop using shapes and layer effects.

In Theme.xml, we edit the <Styles> section to reference the new control images. This involves referencing the new control images, adapting margins, paddings, colors, etc.

The good thing is that we can make and test this step by step. We can always run the ControlsSample. The controls that we haven’t changed yet appear in the Aero theme.

Once we are finished, we crop the texture atlas. We remove the top 100 pixels and crop the image:

UITexture-BlendBlue

Now, the control image coordinates in Theme.xml are invalid – but we only have to go through Theme.xml and subtract 100 from each Y coordinate and it is working again.

Step 7 – Finetuning

The theme is basically finished, but it does not hurt to spend some time testing and fine-tuning (changing margins, paddings and other properties).

Summary

Sadly, we do not yet have a GUI editor tool that simplifies this process. Maybe the most important tips for creating a new UI theme are:

  • Have a look at the existing UI themes first, to get familiar.
  • Use a powerful tool, like Expression Blend or Photoshop, to design your UI theme.
  • Start from a copy of an existing theme and change this theme control by control.


Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel