FlatFX - 2D effects

FlatFX is a pack of customizable geometry-based 2D effects.

Get FlatFX here.

Features

• Five different effects each with its own customizable colors, size, duration and few more settings.
• Setting can be modified in editor or from code, stored and loaded from external file.
• The geometry (mesh) is generated by a C# script, no sprites are used. This way FlatFX don't take additional video memory and allows to scale effects to any size and set any duration.
• Supports sorting layers in the same way sprites do.

A friendly reminder
If you bought this asset and liked it, why not give it a rating or write a short, one-sentence review! This would really help to popularize this asset and speed up the development of new features.

 

Hi,

The effect is working fine when I test it in the editor view. It animates and it clears. However when running the game in the editor the effect does not animate or clear. This happens both when I programmatically add an effect and when I hit the Test button while the game is running.

I notice that the triangle count and effect counts keeps increasing. If I keep running it I eventually wind up with a filled circle.

Is there something I'm missing?

Here's my code:

Code (CSharp):

1. FlatFX fx = warnAnimation.GetComponent<FlatFX>();
2. fx.gameObject.transform.localScale = new Vector3(100, 100, 100);
3. RectTransform rt = GetComponent<RectTransform>();
4. Bounds b = GetRectTransformBounds(rt);
5. fx.AddEffect(b.center, 2);
6.  

The FlatFX object is a child of a canvas object. Here's the JSON of my object:

Code (JavaScript):

1. {
2.   "selectedEffect": 2,
3.   "settings": [
4.     {
5.       "type": 0,
6.       "sectorCount": 30,
7.       "lifetime": 0.699999988079071,
8.       "easing": 11,
9.       "randomizePosition": 1.0,
10.       "start": {
11.         "position": {
12.           "x": 0.0,
13.           "y": 0.0
14.         },
15.         "size": 2.0,
16.         "thickness": 3.0,
17.         "rotation": 159.8514404296875,
18.         "innerColor": {
19.           "r": 1.0,
20.           "g": 0.43448272347450259,
21.           "b": 0.0,
22.           "a": 1.0
23.         },
24.         "outerColor": {
25.           "r": 1.0,
26.           "g": 0.18620696663856507,
27.           "b": 0.0,
28.           "a": 1.0
29.         },
30.         "seed": 0.0
31.       },
32.       "end": {
33.         "position": {
34.           "x": 0.0,
35.           "y": 0.0
36.         },
37.         "size": 3.0,
38.         "thickness": 0.0,
39.         "rotation": 159.8514404296875,
40.         "innerColor": {
41.           "r": 0.4852941036224365,
42.           "g": 0.37824392318725588,
43.           "b": 0.37824392318725588,
44.           "a": 1.0
45.         },
46.         "outerColor": {
47.           "r": 0.4485294222831726,
48.           "g": 0.4485294222831726,
49.           "b": 0.4485294222831726,
50.           "a": 1.0
51.         },
52.         "seed": 0.0
53.       }
54.     },
55.     {
56.       "type": 1,
57.       "sectorCount": 30,
58.       "lifetime": 2.0,
59.       "easing": 11,
60.       "randomizePosition": 0.5,
61.       "start": {
62.         "position": {
63.           "x": 0.0,
64.           "y": 0.0
65.         },
66.         "size": 0.0,
67.         "thickness": 1.0,
68.         "rotation": 117.05316925048828,
69.         "innerColor": {
70.           "r": 0.0,
71.           "g": 0.7103447914123535,
72.           "b": 1.0,
73.           "a": 1.0
74.         },
75.         "outerColor": {
76.           "r": 0.0,
77.           "g": 0.7098039388656616,
78.           "b": 1.0,
79.           "a": 1.0
80.         },
81.         "seed": 0.0
82.       },
83.       "end": {
84.         "position": {
85.           "x": 0.0,
86.           "y": 0.0
87.         },
88.         "size": 6.0,
89.         "thickness": 0.0,
90.         "rotation": 117.05316925048828,
91.         "innerColor": {
92.           "r": 0.0,
93.           "g": 0.7098039388656616,
94.           "b": 1.0,
95.           "a": 0.0
96.         },
97.         "outerColor": {
98.           "r": 0.0,
99.           "g": 0.7098039388656616,
100.           "b": 1.0,
101.           "a": 0.0
102.         },
103.         "seed": 0.0
104.       }
105.     },
106.     {
107.       "type": 2,
108.       "sectorCount": 10,
109.       "lifetime": 0.5,
110.       "easing": 12,
111.       "randomizePosition": 0.0,
112.       "start": {
113.         "position": {
114.           "x": 0.0,
115.           "y": 0.0
116.         },
117.         "size": 6.0,
118.         "thickness": 4.0,
119.         "rotation": 274.034912109375,
120.         "innerColor": {
121.           "r": 1.0,
122.           "g": 0.5611366629600525,
123.           "b": 0.4784313440322876,
124.           "a": 1.0
125.         },
126.         "outerColor": {
127.           "r": 1.0,
128.           "g": 0.6781498789787293,
129.           "b": 0.4784313440322876,
130.           "a": 1.0
131.         },
132.         "seed": 0.0
133.       },
134.       "end": {
135.         "position": {
136.           "x": 0.0,
137.           "y": 0.0
138.         },
139.         "size": 2.0,
140.         "thickness": 0.0,
141.         "rotation": 274.034912109375,
142.         "innerColor": {
143.           "r": 1.0,
144.           "g": 0.0,
145.           "b": 0.1030879020690918,
146.           "a": 1.0
147.         },
148.         "outerColor": {
149.           "r": 1.0,
150.           "g": 0.4784313440322876,
151.           "b": 0.8786624073982239,
152.           "a": 1.0
153.         },
154.         "seed": 0.0
155.       }
156.     },
157.     {
158.       "type": 3,
159.       "sectorCount": 4,
160.       "lifetime": 0.30000001192092898,
161.       "easing": 0,
162.       "randomizePosition": 0.0,
163.       "start": {
164.         "position": {
165.           "x": 0.0,
166.           "y": 0.0
167.         },
168.         "size": 20.0,
169.         "thickness": 20.0,
170.         "rotation": 49.638118743896487,
171.         "innerColor": {
172.           "r": 1.0,
173.           "g": 1.0,
174.           "b": 1.0,
175.           "a": 1.0
176.         },
177.         "outerColor": {
178.           "r": 1.0,
179.           "g": 1.0,
180.           "b": 1.0,
181.           "a": 1.0
182.         },
183.         "seed": 0.0
184.       },
185.       "end": {
186.         "position": {
187.           "x": 0.0,
188.           "y": 0.0
189.         },
190.         "size": 20.0,
191.         "thickness": 20.0,
192.         "rotation": 49.638118743896487,
193.         "innerColor": {
194.           "r": 1.0,
195.           "g": 1.0,
196.           "b": 1.0,
197.           "a": 1.0
198.         },
199.         "outerColor": {
200.           "r": 1.0,
201.           "g": 1.0,
202.           "b": 1.0,
203.           "a": 1.0
204.         },
205.         "seed": 0.0
206.       }
207.     },
208.     {
209.       "type": 4,
210.       "sectorCount": 16,
211.       "lifetime": 2.0,
212.       "easing": 0,
213.       "randomizePosition": 0.0,
214.       "start": {
215.         "position": {
216.           "x": 0.0,
217.           "y": 0.0
218.         },
219.         "size": 10.0,
220.         "thickness": 9.0,
221.         "rotation": 344.0030517578125,
222.         "innerColor": {
223.           "r": 1.0,
224.           "g": 0.9215686917304993,
225.           "b": 0.01568627543747425,
226.           "a": 1.0
227.         },
228.         "outerColor": {
229.           "r": 1.0,
230.           "g": 0.9215686321258545,
231.           "b": 0.01568627543747425,
232.           "a": 0.0
233.         },
234.         "seed": 0.0
235.       },
236.       "end": {
237.         "position": {
238.           "x": 0.0,
239.           "y": 0.0
240.         },
241.         "size": 10.0,
242.         "thickness": 9.0,
243.         "rotation": 224.0030517578125,
244.         "innerColor": {
245.           "r": 1.0,
246.           "g": 0.9215686917304993,
247.           "b": 0.01568627543747425,
248.           "a": 1.0
249.         },
250.         "outerColor": {
251.           "r": 1.0,
252.           "g": 0.9215686917304993,
253.           "b": 0.01568627543747425,
254.           "a": 0.0
255.         },
256.         "seed": 0.0
257.       }
258.     }
259.   ],
260.   "sortingLayer": 0,
261.   "orderInLayer": 0
262. }

 

First thing that comes to mind is that your game's time scale is set to 0. If it's not, it may still have something to do with time settings.

 

That's it; I'm setting time scale to 0 to pause the game. However I'm using FlatFX to animate the UI. Do you know anyway I might be able to pause one, but not the other?

 

It makes sense for me to add the checkbox to the asset to allow it to be TimeScale-independent. I'll add this feature and will update the asset on the asset store. It usually takes few days before they approve and make the new version public. If you give me your email (or email me) I'll send you the updated asset personally as soon as I'll add this feature.

UPDATE. I've already added this feature and it's on the way to the asset store. Still if you need it right now, I can send the updated asset to you.

 

Thanks! That's a great turn around. Really appreciate it!

 

The new version is live.
Here's the new feature:



If you check this box, FlatFX won't get paused and will ignore TimeScale setting.

 

Perfect, thank you! Works a charm.

 

Hello.

I am using this asset and works fine. Congratulations.

I have placed the Flat FX script in an empty gameobject and invoke it using this code:

Code (CSharp):

1. flatEffect.AddEffect( Vector2.zero, 1 );

It works perfectly, but I have detected that if the user clicks on a specific part of the screen, the effect runs alone.

I am doing something wrong?

Thanks for your time.

 

Hi and thanks a lot for choosing my asset! I don't quite understand what you mean but as far as I understant, the effect gets triggered on a click somewhere on the screen without you intending it to worklike this. There's nothing in code of this asset that reacts on click. From a first glance it looks to me that the issue you're having is caused outside of the code of the asset.

 

Hey Andrii.

I bought FlatFX asset and love it.
Do you plan to had other FXs soon?
It would be awesome.

 

Thanks a lot!
It's not in my plans at the moment. But which effects would you like to see added, that would work with the parameters that are already there?

 

Other simple effect in the same style (anime/flat).
Like speed lines for instance!

EDIT: Also, I was wondering out of curiosity:
How come the line flatfx.AddEffect(transform.position, 0)
is executed when i spawn a prefab with this script since the line is in "void Start" function?
( It behave like OnEnable, I thought "void Start" means "start of the Scene" ).

 

That's an interesting idea. Still I don't know if I'll have time to try and implement this anytime soon.

The Start method is actually called when object is initialized, not the start of the scene.

 

Hello, just one quick question, can I change the material of the effects? or do I need to use the material it has by default?

 

The material the asset is using is in FlatFX > Resources > FlatFXDefault
Your first option is to edit it or replace it with another material but it has to be named FlatFXDefault. Since the script loads it using this name.

The second option at the moment is placing another material in a Resources folder anywhere in your project and then editing the script in FlatFX > scripts > FlatFX.cs, line 35 where it loads "FlatFXDefault" and changing it to the name of your material. It's important for it to be in a Resources folder tobe available at runtime.

I hope this works for you. I can add a setting to use custom material, if you need a cleaner way to do this but I'm not sure how useful that would be.

 

I think that would be it, I was thinking in buying the VFX but for my game I´m currently using a custom shader for managing some color palettes and stuff like that, and I was afraid, that my material could not be applied to the meshes respectively, but now that you tell me that everything is ok, I´, going to buy the asset, thx

 

Is there a way to spawn a flat fx at a custom point? ie I have an object that moves around that I would like to spawn a flat fx as a child object but am having a hard time with the Z position. It doesn't seem to want to spawn at different z positions.

Edit: I guess the question is is there a way to get flatfx working in a 3d space?

 

Hi there, I'm really loving the asset, although like WoWPerrorDev I would also like to use a custom material, and I would like to ideally be able to use multiple different materials (so no hardcoding). It seems in FlatFX.cs I can't just set the material to public and edit SetMaterial because of the Editor code. Any advice or snippets to help achieve this?