Tutorial: Getting transparent PNGs into GZDoom
Posted: Wed Sep 13, 2006 4:06
WARNING: This thread contains a lot of images!
In this tutorial, I will walk you through the steps required to import PNGs with transparency into GZDoom.
I will be using Adobe Photoshop CS for the graphics editing process and Slayer's SLumpEd 0.5b1 lump editor for the WAD editing process.
Although Photoshop is used in this tutorial, the steps used in this tutorial should be easy to adapt to in any other graphics editing software.
Okay, first up, here's the reference sprite which we will be using in this tutorial.
It's just a zombified human. Please don't ask about the neck tie.
The sprite is in true-colour PNG format. The reason for this is because Photoshop can't save PNG transparency with anything other than true-colour PNGs.
I've purposely used the colour cyan to mark the areas that are going to be transparent. It doesn't matter what colour this is - it can be yellow, pink, blue, whatever; GZDoom doesn't care about the colour. I've chosen cyan because it's the most commonly accepted transparency colour for Doom sprites. Now load up Photoshop.
The sprite is on the background layer by default, and background layers can't have any transparent pixels on them. We'll have to duplicate this layer.
Delete the background layer. The background layer will always have its name in italics on the layer palette. Now we're left with a layer that can have transparency.
We'll now use the magic wand tool to easily select the areas that we want to be transparent. With the magic wand tool, click on any part of the sprite that's cyan, then right-click on the selection, and choose "Similar". What this does is that it'll automatically select pixels that are similar in colour.
Now press Delete. Easy!
This is how the sprite should look like. Photoshop displays transparency using the funky checkered pattern.
Time to save the image. File -> Save As and select PNG (or if you have the SuperPNG plugin for Photoshop, you can use that too). I've chosen the sprite name "ZOMB" (remember, Doom's sprites can only have 4 letters) so I will be saving this file as ZOMBA0.png. For more information on the sprite naming convention in Doom, Enjay has it all covered on this page.
We're done with the graphics editing process. Now load up SLumpEd and create a new WAD by going to File -> New. Then press the "New Lump from File" button (or you can go to Lump -> New from File) and select the PNG we saved earlier.
One neat feature in SLumpEd is the ability to quickly modify offsets with several pre-defined offsets. Right-click on the ZOMBA0 lump, then choose "Modify Offsets". Select the "Automatic Offsets" option, and choose "Monster" in the combo box to the right. Piece of cake!
This is how things should look like by now. Oh, don't forget to add the SS_ markers, otherwise GZDoom won't load your sprites. You can go to Lump -> New or simply click the "New Lump" button on the toolbar.
Now to create the DECORATE code for our zombie. Create a new lump, name it DECORATE and enter the following code into it:
For more information on DECORATE, visit the ZDoom wiki.
Now click the "Save Changes" button just above the text editor in SLumpEd. Save and close the WAD. We're done! Run your WAD with GZDoom.
Voila! Go to the GZDoom console and type "summon testzombie" to see the transparent PNG sprite!
Hope you find this tutorial helpful. It should be easy to figure out how to do variable, smooth transparency from here. At any rate, I will post another tutorial on how to achieve that soon. In the mean time, have fun!
You may download the WAD file used in this tutorial at http://nash.wanzafran.com/doomstuff/png ... torial.zip
In this tutorial, I will walk you through the steps required to import PNGs with transparency into GZDoom.
I will be using Adobe Photoshop CS for the graphics editing process and Slayer's SLumpEd 0.5b1 lump editor for the WAD editing process.
Although Photoshop is used in this tutorial, the steps used in this tutorial should be easy to adapt to in any other graphics editing software.
Okay, first up, here's the reference sprite which we will be using in this tutorial.
It's just a zombified human. Please don't ask about the neck tie.
The sprite is in true-colour PNG format. The reason for this is because Photoshop can't save PNG transparency with anything other than true-colour PNGs.
I've purposely used the colour cyan to mark the areas that are going to be transparent. It doesn't matter what colour this is - it can be yellow, pink, blue, whatever; GZDoom doesn't care about the colour. I've chosen cyan because it's the most commonly accepted transparency colour for Doom sprites. Now load up Photoshop.
The sprite is on the background layer by default, and background layers can't have any transparent pixels on them. We'll have to duplicate this layer.
Delete the background layer. The background layer will always have its name in italics on the layer palette. Now we're left with a layer that can have transparency.
We'll now use the magic wand tool to easily select the areas that we want to be transparent. With the magic wand tool, click on any part of the sprite that's cyan, then right-click on the selection, and choose "Similar". What this does is that it'll automatically select pixels that are similar in colour.
Now press Delete. Easy!
This is how the sprite should look like. Photoshop displays transparency using the funky checkered pattern.
Time to save the image. File -> Save As and select PNG (or if you have the SuperPNG plugin for Photoshop, you can use that too). I've chosen the sprite name "ZOMB" (remember, Doom's sprites can only have 4 letters) so I will be saving this file as ZOMBA0.png. For more information on the sprite naming convention in Doom, Enjay has it all covered on this page.
We're done with the graphics editing process. Now load up SLumpEd and create a new WAD by going to File -> New. Then press the "New Lump from File" button (or you can go to Lump -> New from File) and select the PNG we saved earlier.
One neat feature in SLumpEd is the ability to quickly modify offsets with several pre-defined offsets. Right-click on the ZOMBA0 lump, then choose "Modify Offsets". Select the "Automatic Offsets" option, and choose "Monster" in the combo box to the right. Piece of cake!
This is how things should look like by now. Oh, don't forget to add the SS_ markers, otherwise GZDoom won't load your sprites. You can go to Lump -> New or simply click the "New Lump" button on the toolbar.
Now to create the DECORATE code for our zombie. Create a new lump, name it DECORATE and enter the following code into it:
Code: Select all
actor TestZombie
{
states
{
Spawn:
ZOMB A -1
loop
}
}
Now click the "Save Changes" button just above the text editor in SLumpEd. Save and close the WAD. We're done! Run your WAD with GZDoom.
Voila! Go to the GZDoom console and type "summon testzombie" to see the transparent PNG sprite!
Hope you find this tutorial helpful. It should be easy to figure out how to do variable, smooth transparency from here. At any rate, I will post another tutorial on how to achieve that soon. In the mean time, have fun!
You may download the WAD file used in this tutorial at http://nash.wanzafran.com/doomstuff/png ... torial.zip
Of course that's if you don't need an alpha channel, which is generally the case with doom sprites.