Filters 2D [Released]

You’re trying to create fancy effects for your Unity Sprite 2D game but don’t know where to start? You heard about shaders but that’s some dark magic to you? Why is it so hard to make a blur effect or have simple color effects at runtime? The Unity 2D Filters package is here to solve these problems for you!





Filters supported:
- blur
- brightness
- color
- contrast
- hue
- invert
- pixelate
- saturation
- tint
- user defined colormatrix

Premade filters:
- black and white
- neon
- plasma
- sepia
- solid color

You can combine several effects at runtime. They are all parametrable!

The shaders have been tested on iOS, Android, Unity Web Player, WebGL and standalone versions! No Unity Pro required.

All shaders are not compiled, and you get access to all the source code.

You can animate filters transition thanks to Tween libraries (DOTween, iTween...) and also via Unity's animation panel!

 

We just added a Pixelate filter!

 

Great plugin, but how do I set the color matrix settings based on a saved preset, using c#?

I can see the SetPreset function that has to be passed a ColorMatrixPreset, but I can't work out how to create a ColorMatrixPreset from a saved preset.

Thanks

 

got it working by making a public array of presets and populating that.

public ColorMatrixPreset[] tintPresets;

 

Hi!

Glad you found a solution

So just a note about that, All presets are saved in a Resources/ColorMatrixPresets/ folder. As such they are included in any build and can be loaded, by name, using Resources.Load

here's how, for the Neon preset :

ColorMatrixPreset neonPreset = Resources.Load<ColorMatrixPreset>("ColorMatrixPresets/Neon");

 

Nice one. Thanks for that.

 

Hi,

I'm still having issues with SetPreset().

If I load the preset manually in the editor it looks like this.

https://www.dropbox.com/s/vwqg7aqx2af4m7v/Screenshot 2016-06-15 16.10.54.png?dl=0

And the adjustments look like this.

https://www.dropbox.com/s/8zg7x6jjnc6608f/Screenshot 2016-06-15 16.08.05.png?dl=0

But when I load the preset from the resources folder and use the SetPreset function it comes out like this.

https://www.dropbox.com/s/byfkzqco1dqkkkf/Screenshot 2016-06-15 16.10.33.png?dl=0

And the adjustments look like this.

https://www.dropbox.com/s/gmwm0oofxxffls7/Screenshot 2016-06-15 16.08.35.png?dl=0

Notice how all the values are zero when SetPreset is used?

Any tips?

Thanks again.

 

ok I fixed it. floatValue was missing from the clone function.

public ColorMatrixAdjustment Clone()
{
ColorMatrixAdjustment adj = new ColorMatrixAdjustment();

adj.type = type;
adj.boolValue = boolValue;
adj.floatValue = floatValue;
adj.colorValue = colorValue;
adj.colorMatrix = colorMatrix;

return adj;
}

 

Sorry about that :/

public ColorMatrixAdjustment Clone()
{
ColorMatrixAdjustment adj = new ColorMatrixAdjustment();

adj.type = type;
adj.boolValue = boolValue;
adj.floatValue = floatValue;
adj.colorValue = colorValue;
adj.colorMatrix = ColorMatrix4x5.Identity();
ColorMatrix4x5.Copy(colorMatrix,adj.colorMatrix);

return adj;
}

This even clones the colorMatrix , as it should've in the first place for correct deep cloning (in case of user defined color matrices).

 

no worries. Thanks

 

Hi,

Before buy your plugin, I would like to know if the blur effect has performance impact on mobile devices.

 

Hi @pep_dj ,

blur will always be, the most basic blur is sampling the texture more than once per pixel, this in itself has an impact - the impact is proportional to the on screen size of what you're blurring.

However, maybe you'll be interested to know that this is not a multipass blur. It's a simple blur but with a little trick to get a cleaner result. so not as perfect as multipass gaussian blurs obviously but running on mobile was taken into consideration.

 

Hi there!
I just bought your plugin for the blur filter but it's getting strange behaviors, look at this simple example :



any idea how to fix this ?

thank you!

 

it seems to be a problem with this line :
half2 initialTexCoord = i.texcoord *2 - (2 - 1) * half2(_Rect.x + _Pivot.x, _Rect.y + _Pivot.y);
because keeping only this don't break the picture :
half2 initialTexCoord = i.texcoord;

 

Can this tool Blurr transparant images or images with alpha channels, of course while showing what's in the background blurred, if so I may purchase this asset!

 

Hey, we just provided a big update, changelogs:
Bug fixes. Shader quality improvements. Blur, Pixelate and ColorMatrix on UI components. UI mask support. Improved documentation.

 

Quick question - Do your shaders happen to support features in the standard shader like normal map, albedo, occlusion and metalic?

 

Hi Daniel, unfortunately no, they are not supported.

 

Hey fellas, I grabbed your pack for the blur filter specifically; but I noticed that it does completely disregard any color setting in the Sprite Renderer which is kind of a big bummer. Is this a bug? Can we have color functionality in a blurred sprite?

 

Hi @Kirbychwan indeed we missed it on the blur and pixelate. We fix it in the next days (then waiting Unity approval)!

 

It's now fixed and submitted for Unity approval (not sure how long it will take with holidays).

 

@-Aymeric- Thanks! I appreciate the quick fix

 

Hey guys, I have a question/request for the Color Matrix. Solid Color is exactly what I need, but is it possible for the Alpha for the color to provide a blend between the Solid Color and the Sprite? Right now, changing the alpha in the Solid Color actually changes the transparency of the Sprite itself, rather than the Solid Color overlay.

 

Hi @Kirbychwan ,

I can't seem to find a good solution to do that given how Color matrices work , the color effect is also kind of a cheat here, I mean that adjustement was added in basically for free but the tradeoff was that I wouldn't know how to make it blend or whatever... There's one solution I can think of that would introduce a "dry/wet" parameter or "blend" to an entire ColorMatrixFilter set of adjustments but even that is not really nice (not practical, and more code to add in the shader that is and should stay simple.)

Here's a shader that should do the job, simple linear interpolation based on alpha and maybe that'll be enough for what you need I hope.

( set Color 1 as your target color in a new material , the shader should be listed as 'SimpleColor'.)

Code (JavaScript):

1. Shader "SimpleColor" {
2.  
3.     Properties
4.     {
5.         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
6.         _Color ("Color", Color) = (1,1,1,1)
7.         _Color1("Color1", Color) = (1,1,1,0)
8.  
9.         [MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
10.  
11.     }
12.  
13.     SubShader
14.     {
15.         Tags
16.         {
17.             "Queue"="Transparent"
18.             "IgnoreProjector"="True"
19.             "RenderType"="Transparent"
20.             "PreviewType"="Plane"
21.             "CanUseSpriteAtlas"="True"
22.         }
23.  
24.         Cull Off
25.         Lighting Off
26.         ZWrite Off
27.  
28.         Blend SrcAlpha OneMinusSrcAlpha
29.  
30.         Pass
31.         {
32.         CGPROGRAM
33.             #pragma vertex vert
34.             #pragma fragment frag
35.             #pragma multi_compile _ PIXELSNAP_ON
36.             #include "UnityCG.cginc"
37.            
38.             struct appdata
39.             {
40.                 float4 vertex   : POSITION;
41.                 float4 color    : COLOR;
42.                 float2 texcoord : TEXCOORD0;
43.             };
44.  
45.             struct v2f
46.             {
47.                 float4 vertex   : SV_POSITION;
48.                 fixed4 color    : COLOR;
49.                 half2 texcoord  : TEXCOORD0;
50.             };
51.            
52.             fixed4 _Color;
53.             fixed4 _Color1;
54.            
55.             sampler2D _MainTex;
56.  
57.             v2f vert(appdata IN)
58.             {
59.                 v2f OUT;
60.                 OUT.vertex = UnityObjectToClipPos(IN.vertex);
61.                 OUT.texcoord = IN.texcoord;
62.                 OUT.color = IN.color * _Color;
63.                 #ifdef PIXELSNAP_ON
64.                 OUT.vertex = UnityPixelSnap (OUT.vertex);
65.                 #endif
66.  
67.                 return OUT;
68.             }
69.  
70.             fixed4 frag(v2f IN) : SV_Target
71.             {
72.                 fixed4 c = tex2D(_MainTex, IN.texcoord) * IN.color;
73.                
74.                 c.rgb = lerp(c.rgb,_Color1.rgb,_Color1.a);
75.  
76.                 return c;
77.             }
78.         ENDCG
79.         }
80.     }
81. }

 

@gsynuh Thank you so much! This is super close to what I needed.

Is it possible to have the Shader get the color value from the individual Sprite GameObject it's affecting? Otherwise I'll need to make a different Shader for each variation I need, I think? (which might turn out to be a lot!)

 

@Kirbychwan you do need one material per color with this shader.

I Suppose you could get rid of all mentions of the extra color I added : _Color1
And change lines 70-77 to :

1. fixed4 frag(v2f IN) : SV_Target
2. {
3. fixed4 c = tex2D(_MainTex, IN.texcoord) ;
5. c.rgb = lerp(c.rgb,IN.color.rgb,IN.color.a);
6. 
   
7. return c;
8. }
   
   
   which will use the "sprites's color" instead of the Color1 I added that appears in the material , with that you should be able to work with a single material for all sprites, let me know if it works

 

Is there any way to make Filters2D function with Anima2D? Anima2D uses "Skinned Mesh Renderer", and filters 2d doesn't seem to work with it. (disclaimer - I'm new to Unity) Let me know if I should provide more details.

 

@-Aymeric- or @gsynuh :
I need a way to be able to blur large (fullscreen 1920x1080) sprites, to create an illusion of depth in my 2D backgrounds. I'm considering whether Filters2D could be the way to do this.

But I'm thinking, how expensive in terms of processing power is the filter? Will you need a high end computer to process the blur filter on very large sprites, or is it something that can be done fluently on more standard computers as well?

 

Hi @iamlowlikeyou blur filters are heavy and putting them on large sprites isn't really recommended. On high end computer you shouldn't have issue, but it will depends what you call standard computers

 

Hey I just purchased this package for the sprite blur effect. Unfortunately it's generating errors for me. I'm trying to use this on a SpriteRenderer that's using an SVG asset for the Sprite.

Code (CSharp):

1. NullReferenceException: Object reference not set to an instance of an object
2. DaVikingCode.Filters2D.Blur.UpdateShader () (at Assets/Filters2D/Scripts/Filters/Blur.cs:198)
3. DaVikingCode.Filters2D.AFilter.OnValidate () (at Assets/Filters2D/Scripts/Filters/AFilter.cs:147)
4. DaVikingCode.Filters2D.Blur.OnValidate () (at Assets/Filters2D/Scripts/Filters/Blur.cs:147)
5.  

What are the chances you'd be able to support this? Thanks!

 

Hi @Pawl, we investigated the problem. The new SVG system create meshes to render the images, and our system work only with textures. It will work if you set yours SVG applied as a sprite texture, but I think if you use SVG it's to not use pixelated format.

Adapted the plugin to SVG asset is complex and it currently not planned.
Sorry.

 

Ah bummer, okay thanks for the update.

 

Can you please tell me if this plugin will blur Canvas UI images? Thanks!

 

Hi @jtsutsui yes it does! But don't forget it's an expensive operation (if you want to blur a fullscreen background).

 

Thanks @-Aymeric- for the quick response! I actually have a canvas with several static canvas UI images such as buttons, background images, logos, etc. Is there a way to blur everything on that canvas at once, i.e. put a new UI image or "filter" in front of everything? Or do I need to add the blur component to every image individually?

I understand this is an expensive operation, but I'm hoping that I can do this since nothing is moving when the blur is in effect. It's just a still image. Basically, the only clear image I'll have on this screen is an instructional popup. Once the popup is dismissed, then I plan to remove/disable the blur. Note that I'm also targeting iOS and Android mobile devices. Do you see a problem with this? Any other thoughts?

 

Hi @jtsutsui unfortunately you will have to put it on all images, individually.

Well, I don't see other problem. Just a quick note, you can't put our Blur on a Text / TextMeshPro.

 

@-Aymeric- I found that I was having an issue putting the blur script on an image with a lot of transparent background. It was doing this (it was cutting away part of the image creaking those lines on the right):

I have attached the actual image so you can take a look for yourself.https://cdn.discordapp.com/attachme.../627189072271638539/parallax_grassy_front.png

 

Hi all,

I downloaded this asset and am having an issue on an Android phone. After the splash screen, all I see is a black screen indefinitely.

Logs:

WARNING: Shader
12-05 21:12:41.943 8969 8991 D Unity : Unsupported: 'Filters2D/Camera/Blur' - Pass '' has no vertex shader
12-05 21:12:41.956 8969 8991 D Unity : WARNING: Shader
12-05 21:12:41.957 8969 8991 D Unity : Unsupported: 'Filters2D/Sprite/Blur' - Pass '' has no vertex shader

Phone: Pixel 4 XL
Android version: 10

Can anyone help with this?

 

@JeffRBake
Hello,
Sorry for the delay. We found the cause of the issue. By default, Unity optimizes the sprite rendering by removing the rendering of full transparent pixels in the sprite. On the blur and outline effect, we enlarge the rendering area to avoid cuts on the sprite edges. It happens when there is not enough space around the images. When we enlarge the rendering area, we also enlarge the "mask" which prevents transparent pixels to be rendered. In the process the "mask" overlaps normal pixels and creates holes. This is why your background is cut.
So two solutions are available.
First, you can modify the settings of the sprite to be rendered completely (no "mask"). On the inspector when the image is selected, change the "Mesh Type" value to "Full Rect". But be aware if your images (like your background) are huge and a lot of sprites like this are rendered, performance issues can appear.
Second, we modify the shader to decide if an enlargement of the rendering area is applied. Cut artifacts can appear on the blur and outline effects. You can create some empty space around the sprite to reduce/prevent these artifacts.

@tuqire
Hello,
At the same time we modify the shaders for JeffRBake, we also work on your problems. Normally, it's fixed.

The new version the shaders will be upload in the next few days.

Have a nice day.

 

Hi. I am using the Color Matrix, and I am trying to graduately change its values during runtime. It works in Editor but not in Build.

The part of my code that does the change is like:

Code (CSharp):

1. private ColorMatrix CM;
2. private ColorMatrix4x5 CM4x5, iniCM4x5 = new ColorMatrix4x5();
3. private    float[,] final_CM4x5_array = new float[4, 5]; // 2D float array to store the values to change to
4.  
5. CM4x5 = CM.adjustments.Find (x => x.type == ColorMatrixAdjustmentType.USER).colorMatrix;
6.  
7. for (i = 0; i < 4; i++) {
8.                     for (int j = 0; j < 5; j++) {
9.                         CM4x5 [i, j] = Mathf.Lerp (iniCM4x5 [i, j], final_CM4x5_array [i, j], t);
10.                     }
11.                 }
12.  
13.                 if (t <= 1f) { // Check if the action is NOT completed
14.                     t += Time.deltaTime / timeOfChange;
15.                     return defaultPauseTime;
16.                 }

And I have checked the log that the values in CM4x5 [i, j] correctly changes in Build, but the sprite color is not changing. What do I have to do to make the change happen in Build?

One way I thought of is to change the values in the material directly, but what would be the property name for, like, MatR X Y Z?

 

Hello @QuilloGames,

In the plugin, we have an example of this use case in the F2DTest.cs file.

A new adjustment is created (required) and a colormatrix set to USER type is created (which you already have)
The matrix's component are modified, then a ForceUpdate on the adjustment is called which rebuilds the entire "tree" of adjustments and applies the effect.

So this is the official way to do it.

In Editor mode, its called every frame by the custom inspector so that artists and coders can see real time changes, but you have to follow the F2DTest.cs code for runtime changes in builds because our system cannot track changes and update automatically... plus you get to decide when you need to or don't need to actually recalculate everything.

Have a nice day.

 

Thank you @flamingfox for quick reply. It works in build after adding ForceUpdate(). It happened that I can use:

CM4x5 = colorMatrix.adjustments.Find (x => x.type == ColorMatrixAdjustmentType.USER).colorMatrix;

to reference the colorMatrix4x5 in the gameObject. The changes on CM4x5 is directly reflected on the gameObject.

 

Hi, I am trying to control Color Matrix settings by script. But I face an issue that, when I use a general script, the Color Matrix may or may not has a specific adjustment, for example Hue. How may I check if the adjustment exists in the Color Matrix by script?