Tuesday, July 12, 2011
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.
Here is a pic of the new UI theme called “BlendBlue”:
(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).
Unfortunately, we do not have a UI theme editor yet. New themes need to be created manually.
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
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.
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.
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:
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.
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 ;-)
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:
We increase the size of this image and add new control images at the bottom, starting at Y=100:
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:
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.
The theme is basically finished, but it does not hurt to spend some time testing and fine-tuning (changing margins, paddings and other properties).
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:
0 comment(s) so far...
Important blog articles are collected in the DigitalRune Knowledge Base.
Weingartenstrasse 35, 4452 Ternberg