Senior Unity Technical Artist: Nine-Slice Scrolling UV Cg Shader
*Senior Unity Technical Artist: Nine-Slice Scrolling UV Cg Shader*
This project showcases a custom Unity UI shader that adds animated overlay effects to interface graphics while preserving the original sprite’s shape and transparency.
The shader supports scrolling and rotating effect textures, adjustable tinting, gradient-based masking, stencil compatibility, UI clipping, and alpha clipping. It was designed for Unity’s Built-In Render Pipeline and works with Unity UI components such as Images and other generated UI meshes.
Shader Features
• Animated UV scrolling on the X and Y axes
• Adjustable overlay texture rotation
• Customizable effect tint
• Top-to-bottom gradient masking
• Adjustable mask falloff
• Support for sprite atlases
• Unity UI stencil and masking support
• RectMask2D clipping compatibility
• Optional alpha clipping
• Transparent UI blending
• Support for animated effects such as highlights, energy, shimmer, smoke, and scrolling patterns
The shader samples the original UI sprite and blends an animated effect texture over it. The effect’s visibility is controlled by a vertex-generated gradient, allowing the overlay to fade smoothly across the graphic.
A supporting C# mesh-effect script writes relative vertex positions into the UI mesh’s secondary UV channels. These additional UV coordinates allow the shader to map its gradient and animated overlay consistently across UI elements with different sizes, positions, and scales.
The script also detects changes to the UI element’s scale and rebuilds the mesh when necessary, so the generated UV data remains accurate.
Collaboration
The supporting `WriteRelativePositionToUV1` C# script was created by an engineer.
My work focused on the shader implementation, visual effect development, parameter setup, testing, and integration into the Unity UI workflow.
Technologies Used
Unity
Unity UI
CG/HLSL
C#
BaseMeshEffect
VertexHelper
Custom Vertex Data
UV Animation
Gradient Masking
Stencil Operations
UI Effect Development
This shader was created for Unity’s Built-In Render Pipeline as part of my technical art and UI shader portfolio.
#Unity #UnityShader #UnityUI #HLSL #CGShader #TechnicalArt #UIEffects #ShaderDevelopment #GameDevelopment #VFX #TechArt #CSharp