City Builder, building overlay shader

Hey everyone! I am trying to figure out how to develop a shader to use in a city builder, in which I click on a button that says “Zoning Info” then, the buildings transition from their normal textures/colors, over to a new texture/color that represents their zoning info.

This seems pretty typical in games like City Skylines or Frostpunk. I am not the best with shaders, and I also am unsure what terminology I should use to begin looking something like this up.

If anyone has any ideas where to start looking, any terminology to use, or any advice, please let me know!

Thanks!

terms: fade textures via lerp
Sprite sheet slide uvs

Not exactly sure what you mean, but I did figure out how to do this the way I wanted. I ended up adding a few properties to my shader. One base color, one zoning color, and one dataFound color (I am getting data from buildings from a publicly accessible API, so I need to know which buildings I have information for) and I also added float values ranging 0-1 for the zoning and data found.

Then in a surface shader I am doing the following:

fixed4 c = (tex2D(_MainTex, IN.uv_MainTex) * ((1 - _Zoning) * (1 - _IsDataChecking) * _Color));
c += (tex2D(_ZoningTex, IN.uv_MainTex) * (clamp((_Zoning - _IsDataChecking), 0, 1) * _ZoningColor));
c += (tex2D(_ZoningTex, IN.uv_MainTex) * (_IsDataChecking * _DataFoundColor));

The first line is to do the base color, however, if I want to see zoning, or is I am checking data, I don’t want this color.
The second line, I am using when I want to check for the zoning, so in this case _Zoning would be above 1, but if I am checking for data, I am getting rid of this value and setting to zero.
The third line I am using to show the IsDataChecking color, this overrides any of the other colors.

Here is a gif where I am lerping between these values.

6586411--748189--ShaderTransitioning.gif

looks like you have it all sorted. You might already have this from your gif: You can put all the color mixing logics into a script. The shader can be a a simple color the script feeds a Color.Lerp Unity - Scripting API: Material.color (unity3d.com)

1 Like