ReX's Nexus: Making Sprites From Models

Making Sprites From Models for Use in (G)ZDooM

This tutorial provides step-by-step instructions for creating sprites for ZDooM or GZDooM from models. You can use essentially the same steps to create sprites for vanilla DooM/2 or or for other source ports, but you may need to use a different file format than the one primarily covered in this tutorial (i.e., png format), which could result in reduced resolutions and additional steps. This tutorial does not cover every possible way of undertaking such a task; rather it provides one possible way that I have found to be reasonably effecive. For this tutorial I will provide an example for Barney (the security guard) from Half-Life.

Section A. Extracting Models and Capturing Images

1. Browse the installed version of Half-Life on your hard drive. Typically, the path will be:
2. Select the file 'barney.mdl' and copy it to the folder of your choice (e.g., C:\DooM\HLDooM\Sprites)
3. Use a utility such as Half-Life Model Viewer (the newest version appears to be Jed's HLMV 1.3.5) to open barney.mdl. The rest of the instructions in this section are based on this utility.
4. From the Sequences tab use the drop down menu in Animation Sequence, and select the model's first position. In this case I have selected 'deep idle'. [The default is walk, and the model will be animated. Use the Stop button at the bottom to stop the animation.]
5. From the menu select 'take screenshot'. An image in .tga format will be saved to the same folder in which your barney.mdl file resides
6. Click on the model and move your cursor to the left. When you have positioned the model in your next position, take another screenshot. I moved the model to the position of a "quarter turn". In other words, if the start position represents the hour hand at 6 o' clock on an analog timepiece, the quarter turn to the left represents the hour hand at 7:30.
7. Repeat Step 6 until you have taken a total of eight screenshots. [Note that you can move the model an eighth of a turn, so that you wll have a total of 16 screenshots. This will give you a "smoother" rendered animation, but also requires a great deal more work (especially if you want animations for idle, walk, run, attack, and death sequences) and will take much more disk space.]
8. Select the model's second position. In this case I have selected "walk".
9. Repeat Steps 5 through 7 for the first set of walking animation screenshots.
10. Using the arrow (Speed) buttons in the Sequences tab, advance the frames to the next desired position of your model's walking animation and take a screenshot. In this case I advanced the position until the model's rear leg had moved to be level with the fore leg. In other words, this is the mid-position of the model's stride. Again, I selected this mid-position for economy of work and frames. You have the option of five additional positions between the start of the walk sequence and the mid-stride.
11. Use your cursor to move the model to your left until you have reached the desired position, and take a screenshot. If you are using 8 frames for the 360 degree rotation of your idle sprite, I suggest you continue to use 8 frames for each of the remaining positions of your sprites' various animations.
12. Repeat Step 11 until you have taken a total of eight screenshots.
13. Repeat Step 10 until the rear leg (now the fore leg) has reached its forward-most position, and take a screenshot.
14. Repeat Steps 11 through 12 for the second set of walking animation screenshots.
15. Advance the model's walking frames to the next mid-stride and repeat Steps 11 through 13 for the third set of walking animation screenshots. At this point you are done with capturing frames for the walking animation.
16. Select the model's next position (e.g., run, shoot, death, etc.) and repeat Steps 5 through 15 as necessary to capture a complete set of animation frames for that position.
17. Repeat Steps 5 through 16 for as many positions as you desire. When you have a complete set of sprites for your character move to the steps in Section B, below.

Section B. Converting Captured Images

1. Use a utility that will allow you to convert your images from .tga (TARGA or Truevision Advanced Raster Graphics Adapter) format to .bmp (bitmap) or .png (portable network graphics) format. I have identified these two formats as they are both supported in ZDooM and GZDooM. My preference is to use .png format, because the final file size is considerably smaller than that of a comparable .bmp file. Moreover, .png format images retain their color pallettes, so even though each image may only have a finite set of colors, several images will collectively have a far greater range of colors. To convert and modify images from .tga to .png format I use a simple but effective utility known as XnView. It is available for free, and I believe the latest version is v1.90.2. The rest of the instructions in this section are based on this utility.
2. Use the browser in XnView to find the .tga images that you created in Section A, above.
3. Select the first image and double-click on the image to open it up in a new tab within XnView. In my case the first image was barney01.tga.
4. From the menu bar select File\Export. This will open an Export window from which you can make your format selection.
5. Select the PNG tab, in the color mode select 256 Colours (Adaptive), and select Set Transparency Colour ... [Notes: I have recommended 256 colors for file size considerations. If you choose the default of 16 million colors you will get a large file, and I'm not even sure that ZDooM or GZDooM will actually render the image in all its colors. You must select Set Transparency Colour ... in order to assign a transparency property to the background of your image. If you do not, the character sprite will be displayed in-game with a colored, rectangular "box" around it. The defaults for the other options are: no interlacing, compression level 7, and no filtering. I have chosen to stay with these defaults.]
6. An "Edit Colormap" window pops up. Find the cell with the color that matches your background color. In my case the color is RGB 68,130,132, and if you started with barney.mdl you will likely have this color too. Select this color, and the Index number along with the RGB values are displayed in grey text on the right of the window. Note that the Index value for this "transparency" color may change from image to image. In other words, the cell with that color may not be in the same position from one image to the next.
7. Select the "Enable Transparency" box. This step is essential, so do not forget to check the box. Click OK, and you will be returned to the Export window. If you compare the file sizes, you will see that there is a HUGE reduction in file size (without a corresponding reduction in image quality). For example, my .tga file is 666.04 kB while my .png image is only 12.89 kB.
8. Press the 'Save' button and you will be prompted for a file name. The default is the original file name with a .png extension. Change your file name if you wish, then press 'Save' again. You have successfuly converted your original .tga format image to a much smaller .png image. [Note: I recommend that you limit your file name to 8 characters, as wad editors such as XWE (and DooM in general, I believe) only recognize the first 8 characters of a lump's name. So, if you have two files named BarneyIdle01.png and BarneyIdle02.png, the second image will be ignored because there already is a lump with the name BarneyId.png.]
9. Repeat Steps 3 through 8 for your remaining images.

Section C. Modifying Captured Images

1. You will notice that the "transparent" area of the image is much wider and taller than you need for a sprite. You will need to crop the image to a more reasonable size. Again, I have used XnView to do the job, but I imagine that other image editors will work just as well. [Note: I have tried to crop the image using MS Paint, and for some reason the transparency property seems to disappear upon saving the modified image. For this reason I recommend not using MS Paint for this task.]
2. In XnView, use the browser tab to find your first .png image. I have found that XnView often does not refresh the browser, so that files you have converted from .tga to .png format in Section B, above, may not be displayed. To rectify this, simply select View\Refresh from the tool bar, and the converted images will appear. Double-click on your first .png image, which will open in a new tab.
3. Use the ZooM tool in the tool bar to make your image larger. I typically click the button twice to bring the image to a reasonable size.
4. Click your cursor on some part of the "transparent" section, not too far wide or high from the character image. Drag your cursor so that you have a box around your character. Don't worry if you fall short or go too far; the program allows you to modify your box. Drag and drop the edges of the box until you have a one-pixel margin around the top, bottom, left, and right edges of your character.
5. From the tool bar select Edit\Crop. Your image will be cropped to the dimensions you indicated by your box.
6. From the tool bar either select File\Save or File\Save As, or click on the Save As icon. Depending on your selection you will either be told that a file with the same name exists and aked if you want to overwrite it, or will be prompted for a file name. Make the appropriate responses, and you will have successfully modified your image to be more suitable for use in DooM.
7. Repeat Steps 2 through 6 for your other images.
8. At this stage you can opt to resize your images. Resizing is different from cropping in that the latter simply removes unwanted areas of your image, whereas resizing enlarges or shrinks the entire image. To resize, use the browser in XnView to find and select your image, double click on it, and select Image\Resize from the tool bar. A Resize window pops up, from which you can make your desired enlargement or reduction. You can either manually enter the Screen Size width and height, or use the Standard Size drop-down menu to select the desired size or percentage. Select OK, which will result in your image being resized, and save the file. [Important Note: Because of the daunting dimensions of the images you get at the end of Step 7, you may be tempted to shrink your images for use in DooM. Doing so will result in a loss of resolution, without significant benefits if you are going to use ZDooM or GZDooM. First off, there is no change in the file size (as a matter of fact, my file size increased factionally with a 50% reduction in size. Second, with the Scale feature in (G)ZDooM you can scale the sprite down in-game without any loss of resolution. Accordingly, I recommend that you do not shrink your images in a graphics editor.]

Section D. Inserting Sprites Into a Wad

Now while most DooM editing folks are quite familiar with how to insert sprites into a wad, the insertion of png images as sprites may not be quite as intuitive. As such, I have outlined a few steps that will allow you to insert your png sprites into a wad with the least amount of effort. I will illustrate this section through the use of XWE, a free DooM editing utility, although DeepSea and other utilities will be more than adequate for this task. Make sure you are using the latest version of XWE (currently a Beta version, available at XWE Beta Downloads), as v1.16 does not support png transparency, automatic sprite offsets for png images, etc.

1. To allow XWE to automatically offset your sprites you should rename them using the common DooM nomenclature before importing them into your wad. For example, I named the idle Barney sprites BARNA1-BARNA8, the first set of walking sprites BARNB1-BARNB8, the second set BARNC1-BARNC8, and so on until the final set of walking sprites as BARNE1-BARNE8.
2. Open XWE and select the wad into which you wish to insert your sprites. If you wish to create a new wad, simply select File\New from the menu bar.
3. Select View\Options from the menu bar, and an Options window will pop up. Go to the Special tab, and make sure the Always Load PNG Files as Raw Data box is checked off (I believe this is the default, but make sure). Select OK to exit the Options window.
4. At the bottom of the screen is a Filter Tool Bar, in which one of the selections is Sprites. Double-click on this selection, and a browser window pops up. Navigate to the appropriate folder, and select the sprites you want imported. Make multiple selections if you wish, as this will save time to load the images into the wad. Press the Open button, and XWE will properly import your png images, put them between the appropriate SS_START and SS_END markers, offset the sprites, and assign transparency. You have successfuly imported your sprites into your wad.

Section E. Animating Your Sprites

Animating your sprites will require the use of DECORATE in ZDooM or GZDooM. As this discussion is not meant to be a tutorial on the use of DECORATE, I will not go into the different variables, but will focus on a few key aspects. If you wish to create your character definition from scratch, feel free to do so. I have chosen to start with an existing definition for a DooM 'actor' that most closely resembles the Barney character - the ZombieMan (basic Trooper). You can start with pretty much any DooM enemy, but as both Barney and the ZombieMan are human (at least in origin), it makes sense to model the former after the latter. Stock definitions for all DooM enemies may be found in the ZDooM wiki or at

1. Open up a text file in MS Notepad, and name it DECORATE.txt. Copy the relevant actor definition from one of the sources listed above into this text file.
2. The first (non-comment) line will be: actor ZombieMan 3004. The name 'ZombieMan' is a unique identifier of the actor, and already exists. Therefore, you must change this name to something that has not already been defined (i.e., for this and other 'actors'). I chose Barney, but you can use a different name. The value '3004' represents a unique thing ID number, and this too already exists. Change this to a number that has not already been defined. I chose 20119.
3. The next variable you see will be: spawnid 4. This represents the value for the actor that you will use to spawn it in-game, typically via a script. You will need to assign a different number (unless you want a ZombieMan to be spawned whenever you call up Barney); I have chosen 209.
4. Feel free to experiment with the other properties, but at this point they are not as important (in my opinion) as one that is not yet in the definition, namely 'scale'. Converting from a model to sprites typically results in very large images. Unless you wish to actually use large sprites, you will need to scale them down. Insert a line that reads: scale 0.17 somewhere in the definition before the line that reads: states. I find that the Barney sprites are scaled down to the right size with the value 0.17 (17% smaller than the original), but you may wish to try slightly different values.
5. The first line in the Spawn state of the stock definition reads: POSS AB 10 A_Look. Rename it from POSS to the first four letters of your sprite's name. In my case it is BARN. The next two variables in the definition are AB, which represent the two sets of 'standing-walking' animations for the ZombieMan. In my case there is only one set of standing frames (namely BARNA1-BARNA8), and I do not want Barney to appear as if he is walking in place, so I replace AB simply with A. My new definition, therefore, becomes: BARN A 10 A_Look.
6. The first line in the See state reads: POSS AABBCCDD 4 A_Chase, which represents the walking animations. Rename POSS to BARN, and insert the appropriate frame letters that represent the complete walking sequence. In my case, they are BBCCDDEE. My new definition, therefore, becomes: BARN BBCCDDEE 4 A_Chase.
7. Following the guidelines in Steps 5-6, above, go down the list of States, and replace the stock definitions with those specific to your sprites.
8. Use XWE to insert the DECORATE file into your wad. You have succesfully completed animating your sprites.

End of lesson.

Copyright Rex Claussen
March 02, 2007