Creating 2D Digital Art Assets for XNA Game Studio

Mark Thompson, thompsom@rohan.sdsu.edu Department of Computer Science San Diego State University Spring 2010

Intended Audience
The content of this document is directed towards digital artists (referred to as artist for rest of document) who charged with creating digital art assets for games, or applications, programmed using the Microsoft XNA Game Studio. However, some XNA programmers may also find this document useful, especially if they are creating digital assets themselves, or implementing a menu or Heads Up Display (HUD) system.

What this document is NOT

This is not a tutorial, or how to, on using an image editor, e.g. Adobe Photoshop or GNU Image Manipulation Program (GIMP). The assumption is that the artist is competent in using such image editing applications. Also, this is not a programming guide that provides the technical details of using and displaying digital art in XNA. There is a variety of resources, both books and Web, which provide extensive tutorials on this aspect of XNA programming. Lastly, this is a not guide for techniques in userinterface design.

1. Introduction
No 2D, or 3D, XNA game can be created without an extensive collection digital art assets ranging from PNG images to 3D models. There are many books and articles about XNA game programming which are geared towards the technical aspects of programming. For these books, sample game code is often provided via the Web so that a programmer can download, compile, and then run the sample games. However, many of the digital art assets, specifically 2D assets, are simply just provided as is, with little background on why or how they were created. This article is to provide artists with little or no programming experience some background on creating usable 2D digital art for XNA.

2. The XNA Game Studio and Framework

The Microsoft XNA Game Studio (currently version 3.1) is a set of programming tools based on supported versions of Microsoft Visual Studio, with C# as its programming language. These tools allow student and hobbyist programmers to build games for Microsoft Windows, the Microsoft Xbox 360, and the Microsoft Zune[1]. The XNA Framework is built on Microsofts Direct X technology, with its graphics system using core Direct3D 9 graphics technology. So, what does this mean to an artist? XNA is a very powerful and complex programming toolset for creating highly-interactive, graphically intense, 2D and 3D games for the above mentioned platforms.

File Formats for 2D Digital Artwork

Figure 1 lists the file formats which are acceptable for use with XNA. This information was collected from [2, 3, 4, 5]: .bmp .dds
Windows bitmap for graphics files within the Microsoft Windows; typically uncompressed; a simple format with wide acceptance in Windows programs [2]. DirectDraw Surface file format by Microsoft; stores graphical textures and cubic environment maps as a data file. [ 5] ; uncommon outside of 3D programming; specifically designed for Direct X. Device Independent Bitmap file; Generic Windows or OS/2 bitmap graphic; similar to a .BMP file [3].

.dib

.hdr .jpg

High Dynamic Range Image File; Raster image or digital photo; uncommon.

JPEG (Joint Photographic Experts Group) is a lossy compression method; JPEG-compressed images are usually stored in the JFIF (JPEG File Interchange Format) file format; JPEG/JFIF; also will see it as .jpeg Printer Font Metrics File; Adobe Type 1 font for Windows; uncommon.

.pfm .png .ppm .tga

Portable Network Graphics file format; created as the free, open-source successor to the GIF.

Portable Pixmap Image File; 24-bit color image that is formatted in text format

Targa Graphic file format; Bitmap image format ; has become a ubiquitous format for storing textures and screenshots from video games due to its ease of implementation and lack of encumbering patents.

Figure 1. List of acceptable 2D image formats for the XNA Graphics Frameword.

Although XNA accepts a variety of formats, it is not necessary to have knowledge of them all. Much of the artwork for menus and HUDs is created using the PNG format. The next two sections will show examples which were taken from the game Rocket Commander, a free XNA sample game as described in the book Professional XNA Programming : Building Games for Xbox 360 and Windows with XNA Game Studio 2.0 , 2nd Edition, by Benjamin Nitschke.

3. Technical Overview of Using 2D Art Assets in XNA

Before continuing onto examples, there are some technical details that need mentioning. First, on how XNA handles 2D art work. All digital art assets artwork are loaded when the XNA application is started. This means that a given PNG will be available to the programmer throughout the lifetime of the application, that is, until the user quits. (NOTE: the programmer could release the PNG resource during runtime to save memory. However, for small games this may be less of an issue).

Second, The XNA Graphics Framework provides some common operations for manipulating 2D images, namely: screen position, color tint, rotation, origin, and scale. In addition, the order in which the 2D images are drawn, as implemented by the programmer, may also be used for effect. For instance, you can layer multiple PNGs to build menu screens since the PNG format contains transparency information. Third, drawing text can be accomplished in one of three ways: i) A PNG file can have text in it, e.g. a start button with START on it; ii) artist can provide an image file with a custom designed font; iii) use XNAs native string drawing facilities, which is restricted to fonts installed on a users system, as well as font licensing restrictions. However, XNA does have a set of freely distributable fonts to distribute with games. Lastly, determining whether or not a user can interact (e.g. a mouse rollover) with a given 2D element, is a coordinated effort for the artist, and programmer. A designer may determine what buttons and when can be interacted with, an artist may actually create the button in an image editor, and finally the programmer will write the C# code to place and draw the 2D image to screen. All this may sound rather complex in order to just draw a 2D image to screen. XNA is extremely powerful and capable of making commercial quality games. With great power, comes complexity. Remember that XNA is not a toy programming environment, but a full-fledged graphics and game programming environment.

4. Example: Start Screen with Rollover Buttons

Figure 2 is a screenshot of the initial screen when Rocket Commander is started. Although not visible in this static picture, the space scene with asteroids in the background is animated and gives the illusion of moving through space (this animation is a completely separate feature from the screen buttons). Figure 3 shows the two PNG files that make up this screen. Notice that the PNG images have transparent backgrounds, which is very common when using them in this context.

Figure 2: The main menu for Rocket Commander running on a monitor at 1280 x 800.

Figure 3. Main background and buttons, with the actual PNG measuring at 1024x1024 pixels. The PNG with Help and Options buttons measures 512x256 pixels, but the actual buttons are much smaller.

It should also be noted that the Main background image is stretched in Figure 2 to fit the 1280 x 800 screen resolution, but the menu buttons appear unchanged. The details are complex on why, but were hinted at in Section 3. XNA will always make a best effort attempt to draw images, but the programmer can also customize and manipulate how things are drawn via program code. If we once again look at Figure 2, well notice how the cursor (the little spaceship) is over the Highscores button. This rollover effect is achieved via providing two PNGs, one for non-rollover event, and one for rollover event. Finally, Figure 2 also demonstrates the use of layering PNGs that have transparency. Drawing the buttons in an arc requires the programmer not only to know the x,y coordinates of each button relative to the dimensions of the actual PNG, but must also tell XNA where to draw them on screen.

5. Example: Help Screen

Figure 4 example demonstrates two concepts: i) the use of a static and non-interactive PNG to display content (i.e. the game item descriptions); ii) the use of layering PNGs. Notice the same background is reused by using the PNG file shown from Figure 3.

Figure 4: Rocket Commander Help Screen at 1280x800 on users computer.

Figure 5. The Help Screen content PNG which is 1024x512 total.

6. Example: Bitmap Fonts

XNA provides a native font drawing mechanism, therefore it is not necessary to create a custom bitmap font for every game.

Figure 6: Options screen shown on users computer at 1280x800.

Figure 7: The bitmap file for a custom font.

7. Example: Gameplay and Heads Up Display (HUD)

Figure 8 below shows the actual gameplay screen. There are many elements at work here, but the focus should kept on the HUD and its parts are shown in Figure 9. The rest of the scene is a combination of 3D models (asteroids) and XNA special effects to achieve the blur and distant sun-like lighting. Displaying the HUD is the same process as described in Section 4.

Figure 8: Actual gameplay in Rocket Commander at 1280x800 resolution on users computer.

Figure 9: The PNGs that make up the HUD. These PNGs are both 256.x256 pixels in total size.

8. Final Remarks
This document by no means a complete overview of the different methods of creating menus and HUD s in games using XNA. However, many games use these same techniques to achieve similar effects. And as such, hopefully 2D the artist will have a better idea of what is required to make digital art assets for an XNA application.

9. References
[1] http://msdn.microsoft.com/en-us/library/bb200104.aspx [2] http://en.wikipedia.org/wiki/Image_file_formats [3] http://www.fileinfo.com/filetypes/image [4] http://msdn.microsoft.com/en-us/library/bb197848.aspx [5] http://en.wikipedia.org/wiki/DirectDraw_Surface