creating 2d digital art assets for xna

7/30/2019 Creating 2D Digital Art Assets for XNA

1/8

Creating 2D Digital Art Assets for XNA Game Studio

Mark Thompson, [email protected]

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 user-

interface 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.


2/8

File Formats for 2D Digital ArtworkFigure 1 lists the file formats which are acceptable for use with XNA. This information was collected from

[2, 3, 4, 5]:

.bmp Windows bitmap for graphics files within the Microsoft Windows; typically uncompressed; asimple format with wide acceptance in Windows programs [2].

.dds DirectDraw Surface file format by Microsoft; stores graphical textures and cubic environmentmaps as a data file. [ 5] ; uncommon outside of 3D programming; specifically designed forDirect X.

.dib Device Independent Bitmap file; Generic Windows or OS/2 bitmap graphic; similar to a .BMPfile [3].

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

.jpg 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

.pfm Printer Font Metrics File; Adobe Type 1 font for Windows; uncommon.

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

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

.tga Targa Graphic file format; Bitmap image format ; has become a ubiquitous format for storingtextures and screenshots from video games due to its ease of implementation and lack ofencumbering 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).


3/8

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.


4/8

Figure 3. Main background and buttons, with the actual PNG measuring at 1024x1024 pixels. The PNG with Helpand 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.


5/8

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

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


6/8

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/8

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 it s 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/8

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
http://msdn.microsoft.com/en-us/library/bb200104.aspxhttp://msdn.microsoft.com/en-us/library/bb200104.aspxhttp://en.wikipedia.org/wiki/Image_file_formatshttp://en.wikipedia.org/wiki/Image_file_formatshttp://en.wikipedia.org/wiki/Image_file_formatshttp://www.fileinfo.com/filetypes/imagehttp://www.fileinfo.com/filetypes/imagehttp://www.fileinfo.com/filetypes/imagehttp://msdn.microsoft.com/en-us/library/bb197848.aspxhttp://msdn.microsoft.com/en-us/library/bb197848.aspxhttp://msdn.microsoft.com/en-us/library/bb197848.aspxhttp://en.wikipedia.org/wiki/DirectDraw_Surfacehttp://en.wikipedia.org/wiki/DirectDraw_Surfacehttp://en.wikipedia.org/wiki/DirectDraw_Surfacehttp://en.wikipedia.org/wiki/DirectDraw_Surfacehttp://msdn.microsoft.com/en-us/library/bb197848.aspxhttp://www.fileinfo.com/filetypes/imagehttp://en.wikipedia.org/wiki/Image_file_formatshttp://msdn.microsoft.com/en-us/library/bb200104.aspx

creating 2d digital art assets for xna

Documents