Pickable Objects Shader

by Federico Bellucci, 2019-04-01 | 3 minutes to read
You can communicate to your players which objects are interactive by using a simple shader inspired by The Last of Us. Made with Unity Shader Graph, HLSL or Amplify. Read More!

Here’s how to create a simple effect to communicate to the players which objects are pickable, interactive etc.

A lot of games implemented this effect in clever ways; today I’m showing a simple version that relies on the object’s vertices coordinates (like a gradient) and passing of time.


PS. Oh hey almost three years ago I released a plugin called “Text Animator for Unity”, a tool I made/needed for my own games - and Today it is also getting used in other games like “Dredge, Cult of The Lamb”, “Slime Rancher 2” and many more!! I’d love if you could check it out! you’d also support me while I work on exciting stuff behind the scenes, so… thank you very much! ✨

Baaack to the article.


HLSL

Here’s an example, written in HLSL. Even if this tutorial example is targeted for Unity the mechanics and logic apply to all other engines as well.

//@febucci, https://www.febucci.com/tutorials/
//Support my work here: https://www.patreon.com/febucci
 
Shader "Custom/PickableObjects" {
	Properties{
		_HighlightColor("Highlight Color", Color) = (1,1,1,1)
		_ObjectColor("Object Color", Color) = (1,1,1,1) // you can use a Texture instead of a Tint
	}
 
	SubShader{
		Tags { "RenderType" = "Opaque" }
 
		CGPROGRAM
		#pragma surface surf Standard vertex:vert
 
		#include "UnityShaderVariables.cginc" //to use _Time
 
		float4 _ObjectColor;
		float4 _HighlightColor;
 
		struct Input {
			float vertexPos;
		};
 
		void vert(inout appdata_full v, out Input o) {
			
			UNITY_INITIALIZE_OUTPUT(Input, o);
			o.vertexPos = v.vertex.x; // passes the vertex data to pixel shader, you can change it to a different axis or scale it (divide or multiply the value)
		}
 
		void surf(Input IN, inout SurfaceOutputStandard o) {
 
			float highlight_value = clamp( //clamps the value between 0 and 1 (since "cos" can go from -1 to 1)
							cos(
								_Time.y * 4 - //4 is the effect speed
								IN.vertexPos),
							0,
							1);
							
			o.Albedo = lerp(_ObjectColor, _HighlightColor, highlight_value);
			o.Emission = lerp((0,0,0), _HighlightColor.xyz, highlight_value);
		}
		ENDCG
	}
	
FallBack "Diffuse"
}

Shader Graph

Here’s the same effect created in Unity Shader Graph.
To use it you must enable one Scriptable Render Pipeline in the Package manager, for example the Lightweight RP or the High Definition one.
P.S. (now Unity has included both package under the name of “Universal Render Pipeline”)

2019 PickableObject ShaderGraph LWRP tutorial febucci.jpg

Amplify Shader Editor

Here’s the same effect created using the plugin Amplify Shader Editor.

2019 PickableObject Amplify tutorial febucci.jpg


Share this article ❤ on: X (Twitter) Facebook

Did you like this post?

Read our next game dev content as soon as it's ready, straight to your inbox. (you can unsubscribe at any time.)


Latest articles