TUTORIAL: New Sprites and How They Work For Guns

PLATFORM: ZDoom 2.5.0 or later
PROGRAMS NEEDED: Slade 3.0 or later, GraphicsGale and Irfanview or equivalent graphics program

The previous tutorial explained the absolute basics of working with the SLADE 3.0 editor and the essentials of using Decorate to make weapons. In this tutorial, we're going to add some concepts to the mix that you will probably want if you're going to make anything more elaborate than a quick shotgun, such as creating new sprites in GraphicsGale or your favorite paint program, making new sounds in Audacity or any audio editor, and how to define all these new things for use in your Decorate code.

First, we'll want graphics, so go ahead and install and run GraphicsGale (the shareware edition should be fine for our purposes; the full registered version adds the ability to save in GIF and Windows Icon formats, which probably won't be necessary for us). Let's make a simple assault rifle.

Create a new image. For its size, remember that native Doom graphics are designed for a screen resolution of 320x200 pixels, so unless you want to mess with high res graphics (which are beyond the scope of this tutorial), you'll want something smaller than that. For this example, I created a 160x160 image. Leave it at 24bpp for color settings.

The actual drawing of weapon graphics is also beyond the scope of this tutorial - there are countless great tutorials by the likes of Eriance, Nmn and Scuba Steve about this sort of thing. Since we're not learning how to draw here, though, let's just throw something together.


Now that we've got a picture, we need to save it properly for Doom. GraphicsGale's saving of transparency isn't terribly intuitive so you'll want another free program, Irfanview, to help out here. In GraphicsGale, paint the background of your graphic in a color that will not be used anywhere else on your gun. We'll use hot pink.

Aww yeah.

Once you've saved your image (preferably as a PNG!), open it in Irfanview. We need to optimize this to be used in Doom. Ports like GZDoom do support true-color PNGs as weapon graphics, but such guns will probably look dumb in software-mode ports like ZDoom or Skulltag, so go Image -> Decrease Color Depth... and select 256 colors (8-bit). You'll probably want to enable dithering to make it look less dumb, but that's really a matter of taste. Hit OK when you're satisfied, then go File -> Save (original folder), name it something you'll remember, and make sure Irfanview is saving the graphic as a PNG. If it's not already on, check the "Show options dialog" check box at the bottom of the window, and look at the PNG settings to the right. Turn on the "Save Transparent Color" checkbox, then click Save.

The next window that appears is important - it shows an enlarged version of your picture. What it wants you to do here is click on any color to set it as the transparent color. In this case, click on any of the stuff that we colored hot pink earlier. When you reopen the image in any image editor, the hot pink will still show up, but most viewers (and most importantly, Doom) will treat it as if it's invisible.

Rant Alert: Contrary to what many preexisting tutorials and older editing programs may try to tell you, Color 247 is not transparent! Cyan is not transparent! Old editors such as XWE or WinTex will automatically treat the color at palette index #247 as transparency, stripping any pixels of that color from the image. The thing is, in Doom, index 247 is actually a black color and is usable by graphics. XWE and WinTex assume it's transparent, however, which causes problems with some graphics. SLADE does no such thing - it takes the image itself purely at face value, nothing more, nothing less. If anybody has told you to use color 247 or cyan to make things transparent, ignore them. We're here to teach you the right way to do things. Rant alert over. You may now resume learning.

If you followed the earlier instructions correctly, your new gun should be correctly saved, properly transparent, and probably will look a bit like this:

Now that we've got a graphic, let's get it into our mod.

Fire up SLADE, create a new Zip archive. From the toolbar, click on New Directory (the closed-folder button on the second section of the toolbar). This folder will be called sprites. Double-click on the new folder in the entries list to open it. Now we need to import the sprite. From the menu bar, click Archive -> Import Files and find your saved image. There are a couple things we need to do here before it'll be ready for the game, though. First, we need to name it according to Doom's sprite naming system. We kind of went over this in the previous tutorial ("How To Make Your First Basic Gun"), but let's go over it again now that it's more important.

Doom's sprite graphics have a specific 8-character naming scheme. Your average sprite is probably named something like SHOTA0. The first four characters, SHOT, can be pretty much anything (as long as it's not being used already). The fifth character (A in this case) is the index, which can be a letter from A to Z. The sixth character is the angle, which in this case is a zero, as this graphic should be displayed for all facing directions. For sprites that need to be shown facing specific directions, the numbers 1 through 8 can be used, where 1 faces toward the camera, 3 faces directly left, 5 faces away, and 7 faces to the right, with 2, 4, 6, and 8 being in-between angles for diagonal directions. ZDoom and its derivatives actually support 9 through F to make 16-angled sprites, but we won't bother getting into that now.

I didn't mention what the seventh and eighth characters were for in the last tutorial - these are for sprites that are placed in maps, such as monsters and decorations. Most artists don't bother making sprites for all eight angles of a monster, as this would in most cases be a colossal waste of time and also increase the size of the mod a bit. That's why Doom has built-in functionality to mirror sprites to "fill in the blanks." An artist can make only the sprites for the left-facing angles (2, 3, and 4) and leave it to Doom to mirror them for angles 5, 6, and 7. This is done by adding two extra characters to the sprite name. For example, POSSA2D8 is the sprite POSS, angle 2 of index A, and the extra two characters indicate that this can also be used for angle 8 of index D. This was quite a bit off-topic, though, as we're not quite dealing with monsters yet.

Go ahead and name your sprite TSTGA0.png (test gun, index A, angle 0 - the .png extension is retained because this is a Zip archive). When you're done, click on the "Go Up" button (the folder with an up arrow, just above the Entries list) to get back to the root of your project.

Create a new entry and call it Decorate.txt. Write up a new weapon like your old SuperAutoShotgun (feel free to copy-paste the code from the old gun and modify it to suit), except replace all references to SHTG with TSTG, and all of the indexes to A, since we only have the one frame. Save your archive somewhere (remember, give it a .PK3 extension to make it more clear that this is to be run with ZDoom, not extracted) and test it. Your awesome new graphic is showing up in game, but it's stuck on the top left of the screen. Not pretty. When you're satisfied with it, quit the game and come back to SLADE. We've got some fixing to do.

Go back into the Sprites folder and click once on TSTGA0.png. It should appear in the main viewer window. Zoom in if you need to, using the slider on top. Under the Type drop box, select HUD to show the screen guides. Here's one of the important parts of adding new sprites to Doom: alignment.

When you add a new graphic to your project, Doom doesn't automatically know where to place it on screen. Some weapon graphics aren't perfectly symmetrical (like the Shotgun, which has part of a hand sticking off of it). It's for this reason that we can align sprites - in other words, determine where exactly they appear in relation to the screen (or for monsters, in relation to the floor). SLADE makes things pretty easy for you: just click and drag your image around on the wireframe guides. The outer border represents the edge of the screen, the middle horizontal line represents the top of the Doom status bar, and the middle vertical line represents the center of the screen. You'll want to align the "tip" of your weapon with the vertical line, and make sure that the bottom edge of your graphic is no higher than the status bar, so it doesn't appear "disembodied" from the bottom of the screen in game. It should look a bit like this:

Save the image (the "Save Changes" button on the bottom right of the window), save the archive, and then test it in ZDoom. It should now align perfectly to the crosshair.