Procedual UI Elements - Shaders
(Manual)
Table Of Contents
  • About The Package
  • Type Of Shader Effects / Image Effects
    • Fill Amount
    • Shape Bending
    • Color Mode
    • Displace Shape
    • Texture Overlay
    • Lines Overlay
    • Inner Shadow
    • Border/Stroke
    • Drop Shadow
    • Reflection
  • Tools
    • Convert Material/UIShader To Image File (PNG)
    • Polygone Editor
  • Youtube Tutorials
  • Contact & Support
About The Package
Package contains 45 UI Shaders.

You can convert the UI Shader to image file (PNG).
OR
Use could these UI Elements as UI Shaders/Material and control the properties of UI Shader from the script.
If you use all the UI Elements (As UI-Shaders) it will only cost you 1MB of Space.
Type Of Shader Effects / Image Effects
Fill Amount
It has three modes, Linear, Clockwise and Anticlockwise.
Shape Bending
With this feature you can bend the shape symmetrically and asymmetrically.
Color Mode
It offers five modes.
Color : Simple Color
Texture : You can apply texture
Radial Gradient : You can scale the gradient and offset the gradient center, also can make it toon style.
Linear Gradient : You can scale the gradient, change the angle, change the gradient center, also can make it toon style.
Sharp Boundary : You can change the boundary position and sharpness of the boundary.
Displace Shape Layer
You can displace the color mode layer and can adjust the sharpness of the boundary between two layer.
Texture Overlay
Texture added as overlay, you can rotate, scale and clip the texture.
Lines Overlay
Offer three types.
Linear
Radial
Spiral
Inner Shadow
Offer two color modes simple and gradient.
Border/Stroke
You can change the border width, offset and edge blur. It also offers two color modes simple and gradient.
Drop Shadow
Offer two color modes simple and gradient.
Reflection
It has three modes.
  • Circle : You can change the radius, opacity, edge blur and position offset.
  • Line : You can change the line's width, edge blur, rotation and opacity.
  • Double Line : You can change the line's width and separation between them
You can animate the line and double line, by adjusting the speed and delay of animation.

Reflection shaders for different shapes are listed below.
  • UI Element 1E : Cirlce and rings
  • UI Element 2E : Rectangle, cube and capsule
  • UI Element 3E : Polygone, Stars etc.
  • UI Element 4E : Points based Polygone
  • UI Element 6E : Heart Shape
  • UI Element 8E : Blended Shapes


In this example we will explore the UI Element 2E.
Tools
Convert Material/UIShader To Image File (PNG)
  • Create a new gameobject and apply MaterialToImageConvertor_PUE.cs to it.
  • Assign the material and set the quality.
  • Click the SaveMaterialAsImageFile() function in context menu of inspector.
  • You could find the saved image file in OutputFolder.


[NOTE]
If a material has ImageSizeRatio = (512 , 512, 0, 0) and you set the quality (In Inspector) to 2 then the dimension of saved image file will be 1024 x 1024. So, do care about the ImageSizeRatio.
Polygone Editor
This tool could help you edit the polygone shape shaders - 4A, 4B, 4C, 4D, 4E. It contains point to define/adjust the shape.
You could adjust the points position in the shader or you could use this polygone editor.
Youtube Tutorials
There are 36+ video tutorials on youtube.
These tutorials could help you to use these UI Shaders properly.


LINK : https://www.youtube.com/watch?v=UqUN5yUk87E&list=PLwmwCM5vIf5IkHfzC8PCEaxI-hlztrmZY
Contact & Support
Email : simulationstack@gmail.com
Email : shaderprog@gmail.com

Website : https://simulationstack.org/
Instagram : https://www.instagram.com/shaderprog_/