Page 1 of 1

Tutorial: Getting transparent PNGs into GZDoom

Posted: Wed Sep 13, 2006 4:06
by Nash
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.

Image

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.

Image

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.

Image

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.

Image

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!

Image

This is how the sprite should look like. Photoshop displays transparency using the funky checkered pattern.

Image

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.

Image

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.

Image Image

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!

Image

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
	}
}
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.

Image

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

Posted: Wed Sep 13, 2006 14:45
by Cutmanmike
This tutorial works with many other things which require transparency too. However, there's also a program that can do this ALOT faster. It's called Irfanview.

Btw are there any benefits of having png sprites?

edit: And don't png's work in Zdoom as well? You could put the tutorial in the wiki.

Posted: Wed Sep 13, 2006 16:51
by SlayeR
Or you can simply convert the PNG to 256 colours and use 'set palette transparency' in PSP ;) Of course that's if you don't need an alpha channel, which is generally the case with doom sprites.

Posted: Wed Sep 13, 2006 23:04
by Enjay
Cutmanmike wrote:Btw are there any benefits of having png sprites?
Aside from freedom from the Doom palette, I'm not aware of any significant advantages and I am aware of one significant-ish disadvantage.

Freedom from the Doom palette is a huge advantage (IMO) and makes it worth considering pngs for any original sprite work intended for GZdoom.

The disadvantage? Colour translations won't work.

Ummm, and yeah the tut is good and all but the method SlayeR mentioned is quicker most of the time if, of course, you are a PSP user.

Posted: Wed Sep 13, 2006 23:21
by wildweasel
Well, considering more people have Photoshop than PSP, Nash's tutorial should still be here - it's a useful resource.

Posted: Thu Sep 14, 2006 0:07
by Syfo-Dyas
What are the advantages of this?

Why not just use the old BMP system?

Sorry, I'm fairly new to all this ZDOOM stuff. :)

Posted: Thu Sep 14, 2006 1:23
by Nash
BMP does not support transparency.

Not to mention BMPs aren't supported by GZDoom - attempting to laod BMPs into the engine will simply crash GZDoom.

Posted: Thu Sep 14, 2006 1:27
by Syfo-Dyas
I ment the default BMP's in the iwad, this looks the same. That's why I was confused.

EDIT: doe!!!


I see the point of this now, sorry. :)

Posted: Thu Sep 14, 2006 9:06
by TheDarkArchon
The graphics in the IWAD are in a specialist format for Doom. Most WAD editors convert BMP's to this format when loading them.

Posted: Thu Sep 14, 2006 9:19
by Enjay
wildweasel wrote:Well, considering more people have Photoshop than PSP, Nash's tutorial should still be here - it's a useful resource.
Absolutely. No criticism of the tutorial itself was implied.

Posted: Thu Sep 14, 2006 9:39
by Cutmanmike
Nash wrote:BMP does not support transparency.

Not to mention BMPs aren't supported by GZDoom - attempting to laod BMPs into the engine will simply crash GZDoom.
There should be an error message for that...

Posted: Fri Sep 22, 2006 8:27
by Graf Zahl
Except for flats there should be. Any unrecognized texture prints an error message to the console.

Re: Tutorial: Getting transparent PNGs into GZDoom

Posted: Thu Nov 16, 2006 19:11
by Risen
Sorry for the bump, but I was browsing through here and felt the need to make some corrections.
Nash wrote: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.
Incorrect. Photoshop is perfectly capable of creating an 8-bit transparent PNG. But you do need to set up the sprite in RGB mode first.
Nash wrote:We'll have to duplicate this layer. / Delete the background layer.
Not really. It's quicker to double click the layer and then press OK. This converts it to a normal layer without duplicate/delete.
Nash wrote:We'll now use the magic wand tool to easily select the areas that we want to be transparent.
When using the wand for this work, be sure to set the tolerance to 0 and turn anti-alias off, unless you know what these are and want the effect these options will give.

Also, here are some quicker methods:
- Use "Select > Color Range" and set the "fuzziness" to 0.
- Use the magic wand, but turn off the "contiguous" option.
Nash wrote:Time to save the image. File -> Save As and select PNG
If you want an 8-bit PNG, you need an additional step before you save. Convert the image mode to Indexed color, and use the 'transparency' option.

But I must agree with Cutty... Irfanview does this particular task much faster!