Creating 2D Digital Art Assets for XNA Game Studio
Total Page：16
File Type：pdf, Size：1020Kb
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 Microsoft’s 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 Windows bitmap for graphics files within the Microsoft Windows; typically uncompressed; a simple format with wide acceptance in Windows programs [2]. .dds 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. .dib Device Independent Bitmap file; Generic Windows or OS/2 bitmap graphic; similar to a .BMP file [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 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 HUD’s 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 PNG’s 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 XNA’s native string drawing facilities, which is restricted to fonts installed on a user’s 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. .