ReX's Nexus: Resizing Sprites

Shrinking Sprites With Minimal Image Degradation

Those of you that have tried shrinking sprites to reduce file size may have noticed that the image gets horribly pixellated, and gets rendered like crap in DooM (or its source port variants). So how do you reduce an image without the accompanying degradation? One way, of course, is to have your source port (e.g., (G)ZdooM) scale the image down. This will work, of course, but your sprite images may have very large file sizes to begin with, and you may wish to shrink your images so that your game wad is not a behemoth. [For example, the Lost Soul has 31 frames, and if each replacement image is about 50kb, you have a total of 1.5 Mb just for one enemy. Imagine the file size for all the DooM enemy replacements.] This tutorial outlines one method to reduce file size without causing noticeable pixellation. The following discussion launches off the tutorial I previously wrote on converting models to sprites. Therefore, I am assuming you are starting with an image in portable network graphics (.png) format.

You will need Wally and XnView, both of which are free graphics editing utilities. You can use other tools to achieve the same objectives, but the following tutorial assumes you'll be using Wally and XnView.

Section A. Resizing Images in Wally

1. Pull up your .png image in Wally.
2. From the Tool Bar click on 'Image', then 'Resize'.
3. An 'Adjust Resize Setting' dialog box pops up.
4. Select the new size you want, then click OK. [Note that you can use Wally to increase image size too.] Go to Step 9.
NOTE: If the size you want is not available, click 'Cancel' to exit the dialog box. Particularly if you want to reduce your image, Wally will not let you do it unless the canvas size has a height and width in multiples of 16.
5. From the Tool Bar click on 'Image', then 'Adjust Canvas Size'.
6. An 'Adjust Canvas Size' dialog box pops up.
7. Click on the 'Auto 16' button, and Wally will automatically increase the canvas size to the nearest multiple of 16. Press OK.
NOTE: Occasionally, Wally messes up the image. Don't worry about it for now, as it's only in Wally that the image looks messed up.
8. Go to Step 3, and repeat steps 3 and 4.
9. Save the new image and close the image file.
10. Repeat Steps 1 through 9 for your remaining images.

Section B. Cleaning Up the Image in XnView

1. Pull up the resized image file in XnView.
2. Use the browser in XnView to find the .png 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.
4. If you were required to take Steps 5-7 in Section A, above, to adjust canvas size, you will notice a dark border on the right and/or bottom edges of the image canvas. You will need to crop those edges off. Use Steps 5 through 7, below, to crop the image. If you did not need to adjust canvas size, jump to Step 8, below.
5. 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.
6. 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.
7. From the Tool Bar select Edit\Crop. Your image will be cropped to the dimensions you indicated by your box.
8. From the Tool Bar select 'Image', then 'Edit Colormap'.
9. An 'Edit Colormap' window pops up. Find the cell with the color that matches your background color. [In the case of sprites converted from Half-Life models the color is RGB 68,130,132.] 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.
10. 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 image.
11. Press the 'Save' button and you will be prompted for a file name. The default is the original file name. Change your file name if you wish, then press 'Save' again. [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.]
12. Repeat Steps 1 through 11 for your remaining images.

You have successfully resized your image. In my case, I reduced each Head Crab image (to replace the Lost Soul) from about 50 kb to about 8 kB, with an acceptable loss in image quality. Each image still has very large dimensions (about 200*140 pixels in the case of my largest Head Crab image), but (G)ZDooM can be used to scale the images down to the proper size. This yields quite a high-resolution sprite.