2D comic effects in 3D!

Hello, my name is Jacob. I am an environment artist on the Superklutz project and in this dev log, I am going to go over how I put together the 2D style 3D effects in our game.

BOOM!

My first challenge was to make an expanding radial exclamation effect without using the particle system. Although the particle system is very useful it is very performance-intensive because it generates an asset for each particle. So I decided to experiment with making a shader that I can manipulate in the animator utilizing just one plane and one material.

As you can see above my method is to have a “container mask” and a “secondary mask” intersect with each other, only to show the chosen color where they meet. The container mask is set to rotate with the sine time variable, while the secondary mask is controllable in the animator allowing for a unique effect every time with no extra work.

ZAP!

This ZAP shader uses a similar approach to the BOOM. The mask I made for this took a bit more fiddling around, as you can see on the BOOM shader graph the secondary mask is just a ring; but doing that for the ZAP doesn’t work quite so well, because it is expanding inward, using a ring would give the look of the electricity filling up with color vs traveling inward. Eventually, I landed on a thick ring that has spikes facing toward the center, so that even when the masks are not intersecting at the tip it looks like there is a sharp end to it.

For the vibration effect, it uses a noise sine wave and time variable hooked up to the rotation of the container mask (ignore the triangle wave it does nothing).

Screen Space Dots!

You may notice on the ZAP comic bubble thing, that the dots are screen space, meaning they don’t change position with the scaling of normals.

This is a fun effect I learned how to do for a half-tone shader that translated to 2D quite easily.

SPEEEEEEED!

 These speed lines were finicky to get to look right, but they are quite simple.

It is just a noise sine wave over time set to control the “x” and (with some offset) the “y” position) of a mask with a bunch of lines on it. You can see it in the background of the main menu.

Spray Paint Lines!

The spray paint lines are probably the simplest of the bunch, it has that same mask for the speed lines and is set to scroll to the side with time.