[Tutorial] Simple Doomy Explosions

Handy guides on how to do things, written by users for users.

Moderator: GZDoom Developers

Forum rules
Please don't start threads here asking for help. This forum is not for requesting guides, only for posting them. If you need help, the Editing forum is for you.

[Tutorial] Simple Doomy Explosions

Postby Amuscaria » Fri Sep 07, 2012 12:42 pm

This tutorial will illustrate the current method I used to make explosions. This method utilizes MS paint, and a bit of any other more advanced program with a "smudge" tool; such as Photoshop or Gimp. Note this is one of MANY approaches to spriting. Everyone has their own method, and by no means should you treat this tutorial as the only viable method. This is only what I found to be the easiest for me, given the tools I have and know how to use effectively.

1) The Palette: Select a palette ranging from the brightest to the darkest color you plan to use for your explosion. You will only need 5-7 shades at most. Make sure there is enough contrast between the palette so your sprite doesn't look flat. Note you DO NOT need to evenly distribute the shades. I will not get into the proper use of contrast in coloring, as it's an artistic fundamental that I can't really teach. It's something best learned from experience.

Image

2) Draw out and place down the general color distributions for the sprite. Not that this example tries to mimic doom-style explosion with the quirky rounded puff. Real explosions will not look like this. For more realistic explosions, look at those made from photos (such as ones from Hexen and Duke 3D). Again, the placement of color is something you ill need to learn yourself. Generally, pick a point of origin where you explosion originates. This area will have the brightest (hottest) colors. Note that the sprite has been enlarged to make it easier to see.

Image

3) After deciding on how many frames you want for the animation (and the smoothness desired), draw out the rest like you did the first one. Notice that the amount of bright shades decrease as the explosion propagates. As the gasses cool, the explosion cloud should become less vibrant in color. If you intend the explosion to use a ADDITIVE transparency, then make the outer edges darkest. How smooth your want the explosion is up to you. Generally, an explosion gas cloud should have specks of debris and unevenness on the surface. This is, however, up to you. The only goal should be to make it consistent with the mod you are working on, and the type of explosions you want. What I have here is a more gaseous fire type.

Image

4) Finally, with all your basic frames drawn, open Photoshop or Gimp and use the smudge tool to smooth out the edges between each shade of color. Make it so it looks like a cloud with fluffy edges rather than a smooth line. Add any additional shades to enhance the contrast if your original brightness is not satisfactory. Pixel edit the finer details In where ever you see fit. In the end, you will have something like this:

Image

Explosions aside, this method works for just any other sprite. Any effect, such as lightning, fire, hot steam, etc. It will also work for monsters, can be done this way given enough experience. However the finer details for monsters will require more effort in pixel editing after the photoshop stage. I personally use this method for most smooth sprites, aside from the higher resolution monsters and weapon HUD graphics.
Last edited by Amuscaria on Tue Jun 03, 2014 1:39 pm, edited 1 time in total.
User avatar
Amuscaria
The Sentient Mushroom
 
Joined: 26 Jul 2004
Location: Growing from mycelium near you.

Re: [Tutorial] Simple Doomy Explosions

Postby wildweasel » Fri Sep 07, 2012 2:49 pm

Excellent, this is nice to have.
User avatar
wildweasel
change o' pace.
Moderator Team Lead
 
Joined: 15 Jul 2003

Re: [Tutorial] Simple Doomy Explosions

Postby Springy » Fri Sep 07, 2012 2:51 pm

Another amazing tutorial, thanks Eriance I'll put this into practice.
User avatar
Springy
Yes indeed ladies and gentlemen.
 
Joined: 08 Mar 2012
Location: Earth

Re: [Tutorial] Simple Doomy Explosions

Postby Blox » Fri Sep 07, 2012 4:01 pm

I ought to do this some more, instead of being a masochist and try to draw it that way.
Tanks for posting, methinks.
User avatar
Blox
I am Laziness Incarnate!
 
Joined: 22 Sep 2010
Location: Apathetic Limbo

Re: [Tutorial] Simple Doomy Explosions

Postby BloodyAcid » Fri Sep 07, 2012 7:45 pm

Very nice. I'll try it so I don't have to rip them from other games
User avatar
BloodyAcid
sucky sucky go lucky
 
Joined: 26 Jul 2012
Location: Canadia

Re: [Tutorial] Simple Doomy Explosions

Postby Jimmy » Sat Sep 08, 2012 8:13 am

Thanks a load for this, Eriance. Highly useful stuff. :D

I tried out these methods myself and went for a slightly cartoony-style explosion that would fit Adventures of Square - five individual shades is plenty for this. I think I did okay, but something about the third frame bothers me (it was the one I did last).

Image

Any thoughts?
Jimmy
I picked a fine day to be lactose intolerant
 
 
 
Joined: 10 Apr 2006
Location: Perth, WA
Twitch ID: JimmySquared

Re: [Tutorial] Simple Doomy Explosions

Postby Amuscaria » Sat Sep 08, 2012 10:28 am

Not sure how realistic you want the explosion to be, or what kind of material. From a more realistic point of view, those don't look like gases. Almost like splattering of really-REALLY thick oil at really low speeds in zero gravity. If the rest of the stuff in the mod looks like that, and I suppose its ok.
User avatar
Amuscaria
The Sentient Mushroom
 
Joined: 26 Jul 2004
Location: Growing from mycelium near you.

Re: [Tutorial] Simple Doomy Explosions

Postby Blox » Sat Sep 08, 2012 11:28 am

I say it's a pretty cool idea, and it's definitely not realistic. (Rather cartoonish in a worms-like sense. Because that's the first thing I can think of.)
Image Image
User avatar
Blox
I am Laziness Incarnate!
 
Joined: 22 Sep 2010
Location: Apathetic Limbo

Re: [Tutorial] Simple Doomy Explosions

Postby Amuscaria » Sat Sep 08, 2012 1:20 pm

Those don't really look like gas. Looks like like orange balls of yarn, mainly due to the stringy texture it has. A More fuzzy appearance, but inside and on the outside edges of the puffs would make it more convincing.
User avatar
Amuscaria
The Sentient Mushroom
 
Joined: 26 Jul 2004
Location: Growing from mycelium near you.

Re: [Tutorial] Simple Doomy Explosions

Postby Blox » Sat Sep 08, 2012 1:27 pm

That's what happens when you mess around for no particular reason;

Gas turns to string! :p
User avatar
Blox
I am Laziness Incarnate!
 
Joined: 22 Sep 2010
Location: Apathetic Limbo

Re: [Tutorial] Simple Doomy Explosions

Postby RV-007 » Sat Sep 08, 2012 1:48 pm

How about stringy gas or vapor? Like it's a string fog or something.
User avatar
RV-007
anti-13ashar_society, lol
Banned User
 
Joined: 02 Sep 2011
Location: Dying w/ civilization or living after it

Re: [Tutorial] Simple Doomy Explosions

Postby Amuscaria » Sat Sep 08, 2012 5:52 pm

I think it's the way you're smudging (I think). Looks like you're smudging along the lines of separation rather than against it. Refer to the below image for what I mean.

Image

Also, turning down the smudge sensitivity would help too.
User avatar
Amuscaria
The Sentient Mushroom
 
Joined: 26 Jul 2004
Location: Growing from mycelium near you.

Re: [Tutorial] Simple Doomy Explosions

Postby Jimmy » Sun Sep 09, 2012 1:10 am

Eriance wrote:Not sure how realistic you want the explosion to be, or what kind of material. From a more realistic point of view, those don't look like gases. Almost like splattering of really-REALLY thick oil at really low speeds in zero gravity. If the rest of the stuff in the mod looks like that, and I suppose its ok.

Realism isn't really that important for this mod. :P I intended for the graphic to be a generic explosion animation for things like rockets and barrels exploding. I went for the "globs of cloud" approach because I was afraid that something like the one you used for the tutorial (or indeed, anything resembling the original Doom explosion sprites) would be too realistic.

Blox wrote:I say it's a pretty cool idea, and it's definitely not realistic. (Rather cartoonish in a worms-like sense. Because that's the first thing I can think of.)

Yeah, Worms is sorta the style I was shooting for. ;)

That shading is awesome! Forgive me that I won't be using it, though. :P
Jimmy
I picked a fine day to be lactose intolerant
 
 
 
Joined: 10 Apr 2006
Location: Perth, WA
Twitch ID: JimmySquared


Return to Tutorials

Who is online

Users browsing this forum: No registered users and 0 guests