Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 14 Next capture
2021 2022 2023
2 captures
12 Jun 22 - 14 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by brendanmk · Nov 05, 2016 at 09:20 PM · shadermasktiletilesgradient

Gradient over multiple tiled objects

Hello friends!

I've bit off more than I can chew. I am creating a tile-based 2D platformer, and am trying to create an effect where the ground tiles are smoothly gradiented as though the entire ground was one texture, rather than being constructed out of many textures/quads/objects.

Here is a simplified (and very ugly) example of what I mean.

alt text

I am bad at things and don't know what to do. Some words that are popping to mind are… uh… shaders… masks… uhhhhhh… other things? If this is impossible, I could probably achieve a hideous version of this using carefully placed lights and tiles with appropriate albedos, but that seems like a messy option.

Thanks for the help! :D

exampletiles.png (17.4 kB)
Comment
Add comment · Show 1
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Cherno · Nov 05, 2016 at 09:48 PM 1
Share

If you don't want to mess with shaders, this can also be done by using Vertex Colors. You need to use a shader that supports those, of course. Then you just have to find out which color each vertex of the mesh will have. For example, if you start at color 1,1,1 and move up to 0,0,0 (black, and you have 4 tiles with four vertices each, the first two on the y axis are 1,1,1, the next two are 0.25,0,25,0.25, and so on.

1 Reply

· Add your reply
  • Sort: 
avatar image
1

Answer by Wabrion · Aug 17, 2021 at 09:29 AM

I doubt the answer will be of any use to you, it's been a long time, but it will still be of use to someone in the future. @brendanmk That effect is only achieved with a shader, similar to this one:

 Shader "MyShaders/Gradient"
 {
     Properties
     {
         _MainTex ("Tint Color (RGB)", 2D) = "white" {}
         _Color0("First Color", Color) = (1,1,1,1)
         _Color1("Second Color", Color) = (1,1,1,1)
     }
     Category
     {
         Tags
         { 
             "Queue" = "Geometry"
             "RenderType"="Opaque"
         }
 
         SubShader
         {
             // No culling or depth
             Cull Off ZWrite Off ZTest Always
 
             Pass
             {
                 CGPROGRAM
                 #pragma vertex vert
                 #pragma fragment frag
                 #pragma fragmentoption ARB_precision_hint_fastest
                 #include "UnityCG.cginc"
 
                 struct appdata_t {
                     float4 vertex : POSITION;
                     float2 texcoord: TEXCOORD0;
                 };
 
                 struct v2f {
                     float4 vertex : POSITION;
                     float4 uvgrab : TEXCOORD0;
                     float2 uvbump : TEXCOORD1;
                     float2 uvmain : TEXCOORD2;
                 };
 
                 #define SRGB_TO_LINEAR(c) pow((c), fixed3(2.2, 2.2, 2.2))
                 #define LINEAR_TO_SRGB(c) pow((c), fixed3(1.0 / 2.2, 1.0/2.2, 1.0/2.2))
                 #define SRGB(r, g, b) SRGB_TO_LINEAR(fixed3(float(r), float(g), float(b)) / 255.0)
 
                 float4 _MainTex_ST;
 
                 sampler2D _MainTex;
                 fixed4 _Color0;
                 fixed4 _Color1;
 
                 v2f vert (appdata_t v) {
                     v2f o;
                     o.vertex = UnityObjectToClipPos(v.vertex);
                     #if UNITY_UV_STARTS_AT_TOP
                     float scale = -1.0;
                     #else
                     float scale = 1.0;
                     #endif
                     o.uvgrab.xy = (float2(o.vertex.x, o.vertex.y*scale) + o.vertex.w) * 0.5;
                     o.uvgrab.zw = o.vertex.zw;
                     o.uvmain = TRANSFORM_TEX( v.texcoord, _MainTex );
                     return o;
                 }
 
                 float gradientNoise(in fixed2 uv)
                 {
                     const fixed3 magic = fixed3(0.06711056, 0.00583715, 52.9829189);
                     return frac(magic.z * frac(dot(uv, magic.xy)));
                 }
 
                 half4 frag( v2f i ) : COLOR
                 {
                     fixed2 a = 0.1 * _ScreenParams.xy; // First gradient point.
                     fixed2 b = _ScreenParams.xy; // Second gradient point.
 
                     fixed2 ba = b - a;
                     float t = dot(i.vertex - a, ba) / dot(ba, ba);
                     
                     t = smoothstep(0.0, 1.0, clamp(t, 0.0, 1.0));
                    
                     fixed3 color = lerp(_Color0, _Color1, t);
 
                     color = LINEAR_TO_SRGB(color);
 
                     color += (1.0/255.0) * gradientNoise(i.vertex) - (0.5/255.0);
 
                     half4 fragColor = half4(color, 1.0);
 
                     return fragColor;
                 }
                 ENDCG
             }
         }
     }
 }

Once the shader is created, just create a material with it, right click and then select Create > Material. Applies the material on the tilemap renderer component.

alt text

The shader is not mine, this is the original source: Original Shader


captura-de-pantalla-24.png (168.2 kB)
Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

6 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Work with Gradient Alpha Mask UI 0 Answers

How to create tile prefabs? 1 Answer

How to make different Rule Tiles interact with each other? 0 Answers

How can I create a grid/tile based shader supporting multiple textures? 1 Answer

Is there a way to merge 2D tiles into one mesh? 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges