X-Ray Shader Tutorial in Unity

Mercy and certain other characters and powers in Overwatch have a cool effect that draws players in front of walls. Mercy’s looks like this:

mercySeeThruShit

Notice how, in this image, the D.Va is drawn as a solid translucent color. The translucency applies to the model itself such that it looks like you can see the inside of the model and its backfaces.

In this tutorial, we’re going to learn how to replicate this effect!

For your reference, the full code for the x-ray shader is here, under a non-commercial open-source license. 🙂

Continue reading X-Ray Shader Tutorial in Unity

Heat Distortion Shader Tutorial

Hey y’all! We’re going to learn about several different shader techniques in this tutorial. The distortion effect in particular was covered in the ice tutorial, but we’re going to re-learn it here in a new light.

Basically, this heat distortion shader was achieved by creating a flat plane mesh and applying a material with a shader that does the following:

  • Billboard the plane to the camera view & draw it on top of everything
  • Grab the camera’s rendered texture
  • Distort the texture sample position
  • Use the distorted position to sample & draw the camera texture

For your reference, here’s the final code for the distortion fire shader.

Let’s jump right in!

Continue reading Heat Distortion Shader Tutorial

Rim Highlight in Unity

Hey y’all! Today, I have a quick tutorial on how to create the highlight effect featured in the gif above. I was inspired by artworks like this one by Loish which have strong rim highlights.highlightArt

If you’re familiar with this tutorial on how to create a basic outline, then this technique will be super easy! However, that’s certainly not required reading 🙂

For your reference, here’s the link to the final code for the highlight shader. It also includes some custom diffuse lighting from this tutorial, but you really only need to look at the pass labeled “outline pass”!

On with the tutorial!

Continue reading Rim Highlight in Unity

Texture Mask Shader in Unity Tutorial

Hey y’all! I was incredibly inspired by this piece of art that Caludia Rinofer created, and I wanted to try and make it as a shader.

The result was the bird you see from the header image! And, of course, I just had to make a tutorial out of it too, to show y’all how I used texture masks and other fun shader tricks to create the effect.

If you enjoy this post, please consider following and supporting Claudia, who inspired it, and checking out the free Unity assets I used for the bird and background:

Living Birds (raven 3D model)

Farland Skies (skybox)

You can find the final code for this tutorial here.

Now, on with the tutorial!

Continue reading Texture Mask Shader in Unity Tutorial

Intro to Procedural Geometry, Part 3

This is an immediate follow-up to Intro to Procedural Geometry, Part 2. If you don’t yet know how to generate a cube, make sure to read Part 1 and 2!

This tutorial assumes you know:

  • Basics of using Unity (creating objects, attaching scripts, using the inspector)
  • How to code in C# (or at least a similar language)
  • The high-level of how 3D geometry is represented in code (vertices and triangles)
  • How to use Unity’s Mesh API to create geometry
  • How to create a plane mesh in code
  • How to create a cube’s vertices and triangles

This tutorial will teach you:

  • How normals & UVs work
  • How to texture procedural meshes (part 4)

For your reference, here’s the final code for a procedural cube. Make sure to read the linked file and the file titled Shape in the same repository folder!

Let’s get to it!

Continue reading Intro to Procedural Geometry, Part 3

Intro to Procedural Geometry, Part 2

If you follow me on Twitter, you’ll know that I post polls to determine the content of these tutorials! Y’all are keeping up the trend of voting for this procedural geometry series, so as requested, here’s part 2 😀

If you missed Intro to Procedural Geometry, Part 1, and you’re unfamiliar with how vertices and triangles work, I highly recommend checking out that tutorial first.

This tutorial assumes you know:

  • Basics of using Unity (creating objects, attaching scripts, using the inspector)
  • How to code in C# (or at least a similar language)
  • The high-level of how 3D geometry is represented in code (vertices and triangles)
  • How to use Unity’s Mesh API to create geometry
  • How to create a plane mesh in code

This tutorial will teach you:

  • How to create a cube’s vertices and triangles
  • How normals & UVs work (part 3)
  • How to texture procedural meshes (part 4)

Let’s get started!

Continue reading Intro to Procedural Geometry, Part 2

How to Start a Career in Games

SO many articles I’ve encountered about how to get a job making video games are misleading. They spend too much time over-emphasizing, and sometimes exaggerating, how competitive the game industry is, and yet simultaneously propose a perfect formula for “breaking in”.

Even the phrase “breaking in” is a misnomer- although it can be difficult to get a paid job making games, if you’re making games at all, then you’re contributing to the game industry, and you are a game developer already. You’ve already taken the most important step to making games as a career: making a game. Let’s not gatekeep the terminology.

I can’t tell you exactly how to run your game development journey. Maybe you want to secure a AAA job, maybe you want to do your own indie thing, or maybe you need help taking the first step to make a game. I’m not going to be condescending and tell you what you want out of your game journey or career, or try to look cool by exaggerating how competitive this field is to get a job in.

Instead, I’m going to do my best to present a list of adaptable ideas for improving and finding paid work as a game developer. Because hey- once you’ve made your first game, you already are one. ❤️

Continue reading How to Start a Career in Games

Custom Diffuse Shader in Unity

If you want your game to have a unique aesthetic, a great way to accomplish that is to have all of your objects using a shader that you personally wrote for the game. The only lighting scheme I’ve written about so far is cel shading, but that’s not the only way to go about stylized looks!

So, I decided this tutorial series needed a post on diffuse shading. Lots of tutorials have already covered diffuse shading in lots of languages, so this post also has a few ideas for ways to improve and expand upon a basic diffuse shader.

In the header image, the watermelon slice is using Unity’s default diffuse shader; on the right, it’s using the shader we write during this tutorial!

We’re going after a stylized look, so the ideas presented here introduce some basic ideas and skip over others. This is certainly not the ‘best’ way to write a diffuse shader, and there arguably isn’t one single ‘best’ way- there’s just what’s best for your game!

For your reference, here’s the final code for the simple diffuse shader in Unity.

Now, on with the tutorial!

Continue reading Custom Diffuse Shader in Unity

Full Game Aesthetic Walk-Through

Hey, y’all! My friends Kytana LeLucien Ye, and I created a chill, atmospheric, color-based puzzle game called The Endless River during the 2018 Global Game Jam. In the spirit of the Global Game Jam’s encouragement of knowledge-sharing, here’s a tutorial on how we made all of the visual effects in the game!

Firstly, here’s the entire Github repository for the whole Unity project. Feel free to download it and use the resources, as long as you include the same open-source license with your project.

I’m going to talk about how we chose the effects that we used and give a short overview of how to implement every effect. One of these effects uses a shader that’s controlled by gameplay code, so this tutorial should be a great example of how to integrate shaders into the overall aesthetic and the game mechanics for your games.

In addition, there are a couple of tutorials that cover the details how the shaders were written for some of the effects, as there’s more material than would fit in this tutorial:

Now, on with the tutorial!

Continue reading Full Game Aesthetic Walk-Through

Camera Effect Shaders in Unity

Hey, y’all! My friends Kytana LeLucien Ye, and I created a chill, atmospheric, color-based puzzle game called The Endless River during the 2018 Global Game Jam. In the spirit of the GGJ, I want to share with you how we created the post-processing effect for the game that create the vignette.

We’re going to walk through:

  1. How to add post-processing effects to a camera in Unity, and
  2. How to write a shader with a vignette and color effect

Here’s the final code for the post-processing shader used in this tutorial, for your reference. It’s under an open-source license 🙂

Good luck!

Continue reading Camera Effect Shaders in Unity