> For the complete documentation index, see [llms.txt](https://octanta-studio.gitbook.io/touch-effect-system-for-unity/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://octanta-studio.gitbook.io/touch-effect-system-for-unity/usage-guide/additional-creating-custom-effect.md). # Additional: Creating Custom Effect Creating custom visuals from scratch. ### Creating new Shader with AI {% embed url="" %} [Get shader examples via GitHub →](https://github.com/octantast/octantastudio_as_publisher/tree/main/TouchEffectSystem_examples) ### Combining existing effects * Take two 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 OneTouch 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 Target Canvas, assign the current Canvas. In GlowMaterial, temporarily set Sprites-Default (UI). In Input Controller, assign the child InputController component. In Point Prefab, assign the UI particle prefab from the TouchEffectSystem → Prefabs → Sources folder. For Parent Object For Points, assign the current object itself or create a child inside it as a container. * Then proceed with the settings. **2/5 Desktop Settings** | OneTouch | Trail | | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | For a single-touch effect, set Desktop Max Points = 1 and Glow Mode = OneTouch. | 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 OneTouch 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 to see how the particles behave with a default Sprite-Default material - this is the base system for building touch feedback before adding a custom shader. Next, you need to set up the visual appearance of the particles.
{% hint style="info" %} From the main script, each particle’s material receives the Desktop Glow Lifetime value. During this time, the particle controls its own 'fade-out' visual through the shader. The UI shaders contain the particle animation logic, so without a special material, the particles won’t fade out properly. {% endhint %} **3/5 Glow Material** * Select one of the prepared shaders in TouchEffectSystem → Shaders or [create your own based on them](#creating-new-ui-shader-with-ai). | OneTouch | Trail | | ---------------------------------------------------------------------- | ------------------------------------------------------------------ | | 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 Don't 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. | One-Touch | Trail | | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 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. | {% hint style="info" %} Also try combining two trails into one - for example, a highlight layer on top of a main trail. See TouchGlowTrailHeat or TouchBladeTrailCute for reference. When using two TouchGlowUI scripts, it’s recommended to use a single shared Input Controller and create separate child container objects to hold the particles, to maintain the correct hierarchy. {% endhint %} **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 Target Canvas, assign the current Canvas. In Input Controller, assign the child InputController component. In Sparkle Particle Prefab, assign the UI particle prefab from the TouchEffectSystem → Prefabs → Sources folder. For Sparkle Parent, assign the current object itself or create a child inside it as a container. * Add 2D textures to Sparkle Textures - one will be randomly picked per particle. It is recommended to use white sprites with square proportions, for example, 256×256. Use diamonds, feathers, leaves, snowflakes, or anything else that fits your 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. | OneTouch | Trail | | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | For a single-touch effect, set Desktop Max Points = 1 and Sparkle Mode = OneTouch. | 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 OneTouch 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 trail spacing. * 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 Don't 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 effect looks right, use the Size Multiplier slider to scale it up or down while keeping internal proportions intact.