Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 13 Next capture
2021 2022 2023
1 capture
13 Jun 22 - 13 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 /
This post has been wikified, any user with enough reputation can edit it.
avatar image
4
Question by Curyous · Apr 08, 2015 at 03:14 AM · uiimagemask

Aliasing When Using UI Mask

I've just used the Mask from the new UI for the first time, using a rounded rect as the mask image. The image being masked has really bad aliasing on its corners, where the mask image is rounded with smooth antialiasing.

Is this supposed to happen? Is there a way to get smooth curves with a UI mask?

Comment
Add comment · Show 3
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 nhimmisha · May 14, 2015 at 10:44 AM 0
Share

I'm having the same problem. Did you find any solution?

avatar image Curyous · May 14, 2015 at 07:46 PM 0
Share

I haven't found a solution yet.

avatar image fafase · May 14, 2015 at 08:02 PM 0
Share

Problem is that the mask is a bitmap so either 1 or 0 and your rounded corner image probably uses some various level of transparency.

Also, if the image is not used with the exact dimensions it gets reshaped and some extra little pixels seem to get added wrong.

I had a similar issue with circle and could only $$anonymous$$imized the problem using bigger resolution images.

3 Replies

· Add your reply
  • Sort: 
avatar image
10

Answer by alexandre-fiset · May 22, 2015 at 07:06 PM

I made a little shader that allows you to use a mask to hide part of a sprite smoothly.

  1. Create a new shader and past the code below.

  2. Create a new material and choose Ui > Mask as the shader.

  3. Assign the new material to your sprite.

  4. Assign your mask to the Mask Texture slot in your material.

  5. Voilà!

It is a bit harder on the system than the built-in solution, but it works.

 Shader "UI/Mask"
 {
     Properties
     {
         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
         _MaskTex ("Mask Texture", 2D) = "white" {}
         _Color ("Tint", Color) = (1,1,1,1)
         
         _StencilComp ("Stencil Comparison", Float) = 8
         _Stencil ("Stencil ID", Float) = 0
         _StencilOp ("Stencil Operation", Float) = 0
         _StencilWriteMask ("Stencil Write Mask", Float) = 255
         _StencilReadMask ("Stencil Read Mask", Float) = 255
 
         _ColorMask ("Color Mask", Float) = 15
     }
 
     SubShader
     {
         Tags
         { 
             "Queue"="Transparent" 
             "IgnoreProjector"="True" 
             "RenderType"="Transparent" 
             "PreviewType"="Plane"
             "CanUseSpriteAtlas"="True"
         }
         
         Stencil
         {
             Ref [_Stencil]
             Comp [_StencilComp]
             Pass [_StencilOp] 
             ReadMask [_StencilReadMask]
             WriteMask [_StencilWriteMask]
         }
 
         Cull Off
         Lighting Off
         ZWrite Off
         ZTest [unity_GUIZTestMode]
         Blend SrcAlpha OneMinusSrcAlpha
         ColorMask [_ColorMask]
 
         Pass
         {
         CGPROGRAM
             #pragma vertex vert
             #pragma fragment frag
             #include "UnityCG.cginc"
             
             struct appdata_t
             {
                 float4 vertex   : POSITION;
                 float4 color    : COLOR;
                 float2 texcoord : TEXCOORD0;
             };
 
             struct v2f
             {
                 float4 vertex   : SV_POSITION;
                 fixed4 color    : COLOR;
                 half2 texcoord  : TEXCOORD0;
             };
             
             fixed4 _Color;
             
             
             v2f vert(appdata_t IN)
             {
                 v2f OUT;
                 OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
                 OUT.texcoord = IN.texcoord;
                 #ifdef UNITY_HALF_TEXEL_OFFSET
                 OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
                 #endif
                 OUT.color = IN.color * _Color;
                 return OUT;
             }
 
             sampler2D _MainTex;
             sampler2D _MaskTex;
             
             fixed4 frag(v2f IN) : SV_Target
             {
                 half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
                 half4 mask = tex2D(_MaskTex, IN.texcoord);
                 
                 color.a *= mask.r;
                 clip (color.a - 0.01);
                 return color;
             }
         ENDCG
         }
     }
 }










Comment
Add comment · Show 5 · 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
avatar image Ben-BearFish · Aug 15, 2016 at 05:34 PM 0
Share

I tried to implement this shader, but it did not seem to work in Unity 5.3. Do you know if this still works? @alexandre-fiset

avatar image madfatcat Ben-BearFish · Dec 10, 2016 at 01:39 AM 0
Share

Yeah, it works in Unity 5.4.2. Note that you should set your mask texture type to "Texture" in inspector or else it won't work.

avatar image madfatcat · Dec 10, 2016 at 01:35 AM 0
Share

Nice! Thank you!

avatar image stargamingentertainment · Jan 01, 2020 at 03:41 PM 0
Share

doesnt work unless im setting it up wrong

avatar image hazem17 · Jul 15, 2020 at 11:31 AM 0
Share

It works nice, you can increase the smoothness/clip more from the edge by changing the value you subtract in line 90 "clip (color.a - 0.01);".

avatar image
4

Answer by Fbear5 · Apr 04, 2016 at 01:52 PM

If you uncheck "Generate Mip Maps" on the sprite of mask it also helps a little :)

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
avatar image
0

Answer by kurtdog · Jan 21, 2018 at 02:15 AM

Hey @alexandre-fiset

Thanks for the awesome shader!! It doesn't seem to support alpha transparency though. See the attached picture as viewed with the UI/Mask shader compared to how it should look. Would you be willing to adjust the shader to support transparency?

Appreciate it, Kurt

alt text on


uimask.png (31.6 kB)
agdg-logo.png (378.5 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

26 People are following this question.

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

Related Questions

Unity UI image + mask has jaggies 2 Answers

How do I save masked user entered image? 0 Answers

Ring with changeable diameters 1 Answer

Canvas with mask and transparent image 1 Answer

UI Masking (Type visiblity of the content outside and inside of mask ) 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