Posts Tagged Unity

Blur filter for UITexture in NGUI

SHADDERRRRS! Well that is it, I’m caught in shader land. The thing is, I don’t know jack **** about them. What I am missing mostly from Flash in Unity are filters like blur, drop shadow and glow. How you would go about doing that in Unity would be with shaders (I guess), so I stuck my nose in them. Here is my first version of a Blur filter/shader.

 

Shader "Unlit/Transparent Colored Blurred"
{
  Properties
  {
    _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
    _Distance ("Distance", Float) = 0.015
  }
 
  SubShader
  {
    LOD 100
 
    Tags
    {
      "Queue" = "Transparent"
      "IgnoreProjector" = "True"
      "RenderType" = "Transparent"
    }
 
    Cull Off
    Lighting Off
    ZWrite Off
    Fog { Mode Off }
    Offset -1, -1
    Blend SrcAlpha OneMinusSrcAlpha
 
    Pass
    {
      CGPROGRAM
      #pragma vertex vertexProgram
      #pragma fragment fragmentProgram
 
      #include "UnityCG.cginc"
 
      struct appdata_t
      {
        float4 vertex : POSITION;
        float2 textureCoordinate : TEXCOORD0;
        fixed4 color : COLOR;
      };
 
      struct vertexToFragment
      {
        float4 vertex : SV_POSITION;
        half2 textureCoordinate : TEXCOORD0;
        fixed4 color : COLOR;
      };
 
      sampler2D _MainTex;
      float4 _MainTex_ST;
      float _Distance;
 
      vertexToFragment vertexProgram (appdata_t vertexData)
      {
        vertexToFragment output;
        output.vertex = mul(UNITY_MATRIX_MVP, vertexData.vertex);
        output.textureCoordinate = TRANSFORM_TEX(vertexData.textureCoordinate, _MainTex);
        output.color = vertexData.color;
        return output;
      }
 
      fixed4 fragmentProgram (vertexToFragment input) : COLOR
      {
        float distance = _Distance;
        fixed4 computedColor = tex2D(_MainTex, input.textureCoordinate) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance , input.textureCoordinate.y + distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance , input.textureCoordinate.y)) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x , input.textureCoordinate.y + distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance , input.textureCoordinate.y - distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance , input.textureCoordinate.y - distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance , input.textureCoordinate.y + distance )) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance , input.textureCoordinate.y)) * input.color;
        computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x , input.textureCoordinate.y - distance )) * input.color;
        computedColor = computedColor / 9;
 
        return computedColor;
      }
      ENDCG
    }
  }
}

It works ok, with a lot of restrictions. First, you can only use it for NGUI UITextures. I would love it to work with UISPrites, but they all share the same atlas, so if you blur one sprite you blur them all! Also, for now, you should leave a padding of 10 transparent pixels around your texture for a better effect.
 

ShaderBlurred

The Distance parameter is relative to the size of your texture so correct values will change from one texture to the other. Anyway you have it, I will keep working on it, but if you see anything that can be improved, don’t be afraid to tell me, I would really like to make it better.

, , , , , ,

No Comments


Unity quick tips: Settings for Textures

Hey, I am working on a bigger post, but in the mean time, allow me to write this quick tip. In NGUI, when you don’t use an atlas for your sprites, you use the UITexture class. At first I was having so much trouble with it because the make pixel perfect button just didn’t seem to make my texture look pixel perfect. That was until I figured it out.

Making it work

When you select your texture file in Unity (the actual png file), the inspector will show you settings for it. By default, the type is set to ‘Texture’, which seems fine, but what you really want to be setting it at is ‘Advanced’. Than you will be able to change the next combobox. In 3D you want to have images (textures) that their width and height are powers of 2, example: 2, 4, 8, 16, 32, 64, 128, 512, 1024. When you do 2D (UI) that really never happens; never. That is why you will likely set the Non Power of 2 to ‘None’. That is the most important setting. Now when you will press Make Pixel Perfect button in NGUI, it will resize the texture to the correct size.

Figuring out compression

To be frank, I don’t totally understand the rest of the settings as they refer to 3D stuff, but by setting the Wrap Mode to ‘Clamp’, Filter Mode to ‘Trilinear’ and Aniso Level to ’4′ , your texture will look better at run time. Also, as you probably don’t need it, you should remove the check mark after Generate Mip Maps.

Well that is it for this quick tip, I hope it saved you some time when dealing with textures.

 

 

, , , , , , , , , ,

No Comments