Advanced: Creating Custom Effect
Creating custom visuals from scratch.
Combining existing effects
Take 2 or more prefabs with the effects you like, place them on the canvas, and unpack them.
Choose which of the layers will be the background one and which will be in front. The background one will be the main parent object on Canvas, for example, TouchGlowTrailFairy. Move the prefabs of the other effects onto it as child objects, for example, TouchStarTrail.
For the child effects (like TouchStarTrail), remove the internal InputController and instead reference the InputController from the parent to avoid duplicating input logic. Also, for the child effects set Additional Settings: Always Last Sibling and Don`t Destroy on Load to False.
Arrange the child effects in the correct layer order. Configure all components in the resulting structure with proportional lifetime, sizes. Customize colors to achieve the desired result.
TouchGlowUI
Creating an effect with this component allows to generate a continuous trail or a mathematically animated one-touch effect without the need to draw.
1/5 References
Create an empty object on the Canvas and add the TouchGlowUI component to it. Create a child object and add the InputController component to it. Right away, set the input system to Old/New.
Fill in the references. In TargetCanvas, assign the current Canvas. In GlowMaterial, temporarily set Sprites-Default (UI). In Input Controller, assign the child InputController component. In PointPrefab, assign the UI particle prefab from the TouchEffectSystem → Prefabs → Sources folder. For ParentObjectForPoints, assign the current object itself or create a child inside it as a container.
Then proceed with the settings.
2/5 Desktop Settings
For a single-touch effect, set Desktop Max Points = 1 and Glow Mode = One Touch.
For a trail effect, set Desktop Max Points = 512 and Glow Mode = Trail.
Set the Desktop Glow Lifetime to the number of seconds you want each particle to exist = 1.
Set the Desktop Glow Lifetime to the number of seconds you want each particle to exist = 2.
Set Desktop Point Size = 120 and Desktop Base Trail Spacing = 0. For One-Touch effect, spacing isn’t needed, so it only makes sense to adjust the size.
Set Desktop Point Size = 120 and Desktop Base Trail Spacing = 10. These values control the particle size and the spacing between them.
Leave Desktop Target FPS at 60 for optimal performance.
Leave Desktop Target FPS at 60 for optimal performance.
Run the scene and check what exactly appears and changes using the Sprite-Default particles as an example. This is the basic system for building touch feedback without a custom shader. Next, you need to set up the visual appearance of the particles.
3/5 Glow Material
Select one of the prepared shaders in TouchEffectSystem → Shaders or create your own based on them.
Use any shader from the OneTouch folder, TouchPointCircle for example.
Use any shader from the other folders, TouchPointGlow for example.
Right-click the shader → Create → Rendering → Material. Assign the created material to the Glow Material field in TouchGlowUI instead of Sprites-Default.
Change the colors or other material settings to your liking.
4/5 Additional
Now, after setting up the actual visuals, adjust the particle size, spacing, lifetime for Desktop.
Set Initialization Delay to postpone system initialization to avoid overloading the app at startup.
Set Always Last Sibling to True so that the touch effect always stays above the other UI elements on the Canvas.
Set Dont Destroy On Load to True if there are no other objects on the Canvas and you want the touch effect to persist between scenes.
Set Enable Multi Touch to True to allow multiple particles to respond to touches from several fingers on a touchscreen.
For a single particle, you don’t need to enable Sharp Edges, since there’s no segment to taper.
If you need sharp edges, set SharpEdges to True and adjust Start Taper Points Desktop and End Taper Points Desktop, for example, to 64 particles each. This many particles will be tapered at the start and end of the trail. However, this logic excludes multitouch due to the complexity of calculations.
For a single particle, it’s better to adjust the size using Desktop Point Size, but you can also use Size Multiplier for quick calibration to the screen size.
To change the overall trail size without altering the proportions, use the Size Multiplier slider.
5/5 Mobile Settings
Once the Desktop effect visuals are set, move on to the Mobile Settings. You can copy the same settings from Desktop, but this may not produce the desired effect. Usually, for mobile, it makes sense to slightly increase the particle size and reduce the spacing. If Sharp Edges are used, it’s better to halve the number of tapered points compared to Desktop.
Set Force Mobile In Editor to True to test the mobile visuals directly from the Editor. It’s also recommended to use Unity Remote and make a build for mobile with the Demo Scene for preliminary testing.
Disable Enable Debug Logs and Force Mobile In Editor before building. However, even if you don’t, they are automatically turned off.
SparkleSpawner
Creating an effect with this component allows to generate an accent effect by adding particle sprites and dispersing them across the touch area.
1/4 References
Create an empty object on the Canvas and add the SparkleSpawner component to it. Create a child object and add the InputController component to it. Right away, set the input system to Old/New.
Fill in the references. In TargetCanvas, assign the current Canvas. In Input Controller, assign the child InputController component. In PointPrefab, assign the UI particle prefab from the TouchEffectSystem → Prefabs → Sources folder. For ParentObjectForPoints, assign the current object itself or create a child inside it as a container.
Add 2D textures to Sparkle Textures that will make up the particle effects (randomly selected from them). It is recommended to use white sprites with square proportions, for example, 256×256. Use diamonds, feathers, leaves, snowflakes, etc., depending on the app’s style.
Add colors to Sparkle Colors to randomly color the particles.
Then proceed with the settings.
2/4 Universal & Desktop Settings
Select a Dispersion Type and Fade Animation Type from the available options to adjust the basic behavior of the particles.
For a single-touch effect, set Desktop Max Points = 1 and Sparkle Mode = One Touch.
For a trail effect, set Desktop Max Points = 512 and Sparkle Mode = Trail.
Set the Desktop Glow Lifetime to the number of seconds you want each particle to exist = 1.
Set the Desktop Glow Lifetime to the number of seconds you want each particle to exist = 2.
Set Desktop Point Min/Max Size = 20/40. Particles will spawn at random sizes within this range.
Set Desktop Point Min/Max Size = 20/40. Particles will spawn at random sizes within this range.
Set Desktop Base Trail Spacing = 0. For One-Touch effect, spacing isn’t needed, so it only makes sense to adjust the size.
Set Desktop Spacing = 20. It’s best to set it smaller than the point size so that gaps between bursts are not noticeable, creating a continuous trail.
Set Desktop Min/Max Sparkle Points = 8/16 (number of particles per burst).
Set Desktop Min/Max Sparkle Points = 8/16 (number of particles per burst).
Set Desktop Min/Max Radius to 80/120. Particles appear within this area (green-highlighted in the Scene view).
Set Desktop Min/Max Radius to 80/120. Particles appear within this area (green-highlighted in the Scene view).
3/4 Mobile Settings
Once the Desktop effect visuals are set, move on to the Mobile Settings. You can copy the same settings from Desktop, but this may not produce the desired effect. Usually, for mobile, it makes sense to slightly increase the particle size and reduce the spacing for trail.
Set Force Mobile In Editor to True to test the mobile visuals directly from the Editor. It’s also recommended to use Unity Remote and make a build for mobile with the Demo Scene for preliminary testing.
Disable Enable Debug Logs and Force Mobile In Editor before building. However, even if you don’t, they are automatically turned off.
4/4 Additional
Set Initialization Delay to postpone system initialization to avoid overloading the app at startup.
Set Always Last Sibling to True so that the touch effect always stays above the other UI elements on the Canvas.
Set Dont Destroy On Load to True if there are no other objects on the Canvas and you want the touch effect to persist between scenes.
Set Enable Multi Touch to True to allow multiple particles to respond to touches from several fingers on a touchscreen.
Once the proportions are set and the effect’s appearance is satisfactory, adjust its overall size while preserving internal proportions using the Size Multiplier slider.
Creating new UI-Shader with AI
Last updated