Tag: animation

Color Spread Post-Processing Effect Tutorial in Unity

(important disclaimer: this work represents me only & not the company I work for.)

I was inspired by an episode of the Powerpuff Girls for this effect. I wanted to create this effect of color spreading in a black and white world, but to do the effect in world space coordinates so that you can see the color crawling over objects instead of flatly spreading across the screen like in the show.

powerpoof.gif

I created this effect in Unity’s new Lightweight Rendering Pipeline, a built-in example of a Scriptable Rendering Pipeline. All of the concepts still apply to other pipelines, but some of the built-in functions or matrices might have different names. I also used the new post-processing stack, but I omitted explaining how the basics of how to set it up, as I think other guides already cover this pretty well, such as this video.

For tutorial updates, follow me on Twitter. I also do Q&A coding streams on Twitch, and you can always DM me on Twitter or ask me questions in the Twitch chat about shader stuff 😀

Continue reading Color Spread Post-Processing Effect Tutorial in Unity

2D Reflective Water Shader in Unity

Hey, y’all! My friends Kytana Le, Lucien Ye, and I created a chill, atmospheric, color-based puzzle game called The Endless River during the 2018 Global Game Jam. I wrote all of the shaders used for this game (except for the bloom), and my favorite one is definitely the reflective water shader.

So, while it’s still fresh in my mind, I figured I’d write a tutorial about it! The waving effect is quite similar to the 3D water shader tutorial, but the reflectivity is a special Unity trick that I felt made it worth writing a whole tutorial about.

If y’all want to see another tutorial covering how I made the entire aesthetic for the game, including bloom, other post-processing effects (like the vignette), fog, animations, and other effects, please let me know!

If you have any other feedback or questions about these tutorials, don’t be afraid to PM me on Reddit, contact me on Twitter, or comment on this post ❤

For your reference during the tutorial, here’s the final code for this shader, under an open-source licence. The code isn’t my usual shader tutorial repository, but instead the repository for the whole game. 😉

-> Link to final code for Unity 2D Reflective Water Shader

On with the tutorial!

Continue reading 2D Reflective Water Shader in Unity

Animated Dotted Outline Shader in Unity

Earlier, I wrote a tutorial on how to create a cel shader with an outline effect. For the sake of not repeating that explanation, refer to that tutorial to learn how to draw the basic outline.

You can apply this outline effect to any kind of lighting or other shader properties, since it’s in its own pass.

Here’s the final code for you to reference:

–> Link to final code for Unity Dotted Outline Shader

Continue reading Animated Dotted Outline Shader in Unity

Dissolve Shader in Unity

After I posted my cel shader tutorial, I asked for more tutorial ideas on Twitter. A mutual of mine requested help:

Welp, here’s that tutorial, Brannan! XD It doesn’t have ALL of the qualities that you requested, but I think it does the trick for a magical-fade effect.

With this shader, you’ll be able to tune the color, speed, fade speed, size, and texture of the dissolve. For example, in the gif below, the green lingers longer, and the dissolve happens faster.

dissolve4

For reference, here’s the final code for the shader. Note that it includes code for a cel shader, so if you want to use the effect in your own lighting scheme, you’ll need to adapt this code for your needs.

–> Link to final code for Unity Dissolve Shader

Continue reading Dissolve Shader in Unity

Simple Water Shader in Unity

Heya, I’m Lin Reid, programmer on Limit Theory, and I’m going to show y’all how to make a water shader in Unity! This is totally non-Limit-Theory related… just writing some shaders for fun 😂

This tutorial is really a general graphics programming tutorial in disguise. The techniques we’re going to learn in this post- vertex animation and using depth textures- are basically applicable to any platform. However, I do go over a few of the quirks with getting camera depth textures to work in Unity so that you can make it work too.

These are the two possible end results, applied to an adorable Boston Terrier model made by artist Kytana Le (please ignore crappy gif quality):

Notice how both have a foam line where the dog touches the water (but with different styles for each) and animated waves. We’re going to learn how to do both. Let’s start with the foam line!

Also, for reference, here’s the complete code for the shader:

–> Link to final code for Unity Water Shader

UPDATE: I now also have a tutorial for an ice shader that covers a distortion effect that looks GREAT with this water shader, like in the gif below. Finish this tutorial first, then follow the ice shader to add the distortion pass! ;0

watergif

Continue reading Simple Water Shader in Unity