Quick Tutorial: Doomy-style Explosions
Posted: Wed Sep 13, 2017 9:09 pm
The old one I made died, and the images on my old Imgur account is probably wiped. phantombeta wanted a tutorial so here's a quickie. Fortunately, the old base images I used last time were saved. Note that this is just one method you can make explosions. It won't make the most realistic ones, unless you have a lot of patience. But it should be good enough for general application.
STEP 1: BLOCKING OUT YOUR SPRITE
This step is the most important, at least for quick explosions done this way. Two things you need to be keenly aware of is 1) proper contrast, and 2) knowing what colors your game palette has. If are using true 32-bit color, then you don't need to worry about #2.
Select a color range with 4-6 colors to block out the explosions with, starting with the brightest and darkest colors you plan to use, and then fill in between depending on your choice of contrast. The goal here is to make the image pop, so don't pick a color range that has very low contrast.
Knowing how the explosions form and propagate will help making your explosions look more convincing and animate smoother. I can't teach this to you in a tutorial, as it requires practice and study. Just look at videos or how the Doom artists made theirs and approximate. I'll add more to the tutorial in the future in some explosion fundamentals. But that's beyond the scope this time.
STEP2: BLENDING COLORS
This step is easy and can be done any number of ways, depending on what program you have. For this tutorial, I used Photoshop CC 2017. Most programs should have some sort of blur or smudge brush, or a filter that blurs. It doesn't really matter, but using the PS filter takes like 5 seconds.
Paste your sprite into the program, delete any background colors you don't need from around the sprite, and then duplicate the layer.
The bottom layer will serve as your base layer just in case you screw up, or need it as a clipping mask. In photoshop, you can give the top layer a clipping mask (uses the transparency of the first layer below that doesn't have a clipping mask). This keeps the blue from going our the edges or washing out the colors. This is not necessary, but a convenience I like to use always. Even the most basic drawing program should have something like this.
Blur you image however you like. Just blue the edges between your different color colors to smooth them out a little. I used the Gaussian Blur here. I find 0.3 pixels to be enough for smaller sprites. Increase it as you see fit.
STEP 4: ADD NOISE
I find adding a little bit of noise helps break up the smooth lines and adds a bit more secondary detail to give the illusion of an uneven surface. You can manually pain smaller details in, but I'm lazy and speed is what I like. I usually add .5-2% (used 1% in this instance) depending on the size of the sprite.
STEP 5: CHECKING AND FINAL DETAILING
Convert your sprite into the proper palette if you need to and check the details. Manually add and fix up anything you like and you're done. Below is 3 images comparing the based image, the photoshopped image, and the image converted to the Doom palette.
If everything looks good, you're done. Below are the full sprite sheet done in a single step. The top is the base, followed by the phoshop image, and final doom-pal image (not great for the yellow-orange-red transmission unfortunately). Hope this help. Happy spritin'. More tutorials to come.
STEP 1: BLOCKING OUT YOUR SPRITE
This step is the most important, at least for quick explosions done this way. Two things you need to be keenly aware of is 1) proper contrast, and 2) knowing what colors your game palette has. If are using true 32-bit color, then you don't need to worry about #2.
Select a color range with 4-6 colors to block out the explosions with, starting with the brightest and darkest colors you plan to use, and then fill in between depending on your choice of contrast. The goal here is to make the image pop, so don't pick a color range that has very low contrast.
Knowing how the explosions form and propagate will help making your explosions look more convincing and animate smoother. I can't teach this to you in a tutorial, as it requires practice and study. Just look at videos or how the Doom artists made theirs and approximate. I'll add more to the tutorial in the future in some explosion fundamentals. But that's beyond the scope this time.
STEP2: BLENDING COLORS
This step is easy and can be done any number of ways, depending on what program you have. For this tutorial, I used Photoshop CC 2017. Most programs should have some sort of blur or smudge brush, or a filter that blurs. It doesn't really matter, but using the PS filter takes like 5 seconds.
Paste your sprite into the program, delete any background colors you don't need from around the sprite, and then duplicate the layer.
The bottom layer will serve as your base layer just in case you screw up, or need it as a clipping mask. In photoshop, you can give the top layer a clipping mask (uses the transparency of the first layer below that doesn't have a clipping mask). This keeps the blue from going our the edges or washing out the colors. This is not necessary, but a convenience I like to use always. Even the most basic drawing program should have something like this.
Blur you image however you like. Just blue the edges between your different color colors to smooth them out a little. I used the Gaussian Blur here. I find 0.3 pixels to be enough for smaller sprites. Increase it as you see fit.
STEP 4: ADD NOISE
I find adding a little bit of noise helps break up the smooth lines and adds a bit more secondary detail to give the illusion of an uneven surface. You can manually pain smaller details in, but I'm lazy and speed is what I like. I usually add .5-2% (used 1% in this instance) depending on the size of the sprite.
STEP 5: CHECKING AND FINAL DETAILING
Convert your sprite into the proper palette if you need to and check the details. Manually add and fix up anything you like and you're done. Below is 3 images comparing the based image, the photoshopped image, and the image converted to the Doom palette.
If everything looks good, you're done. Below are the full sprite sheet done in a single step. The top is the base, followed by the phoshop image, and final doom-pal image (not great for the yellow-orange-red transmission unfortunately). Hope this help. Happy spritin'. More tutorials to come.