Path Direction & Fill Rules

Summary

This lesson provides an in-depth look at how path direction affects vector fill logic. It focuses on the "Non-Zero" fill rule, demonstrating how to create holes or merge shapes by toggling between clockwise and counter-clockwise directions. Additionally, it covers the "Clockwise" fill rule and the "Subtract Path" option, which offer a more intuitive workflow when using Vector Feathering.

Step by Step

1. 00:04
   Identifying Path Direction

   Every path has a specific direction. In Edit Vertices mode, the arrow-shaped vertex indicates the flow of the path.
2. 00:54
   Reversing Path Direction

   Use the Reverse Direction button in the top toolbar to toggle the path between clockwise and counter-clockwise.
3. 01:12
   Non-Zero Fill Logic

   Under the default rule, clockwise paths are assigned +1 and counter-clockwise -1. Rive calculates the sum; any non-zero area is filled.
4. 01:54
   Creating Holes

   When two paths within the same shape layer have opposite directions and overlap, the sum becomes zero, resulting in a transparent hole.
5. 03:07
   Impact of Scaling

   Setting a path's X or Y scale to -100% flips its direction. If this causes unexpected fills, the direction must be manually adjusted.
6. 04:09
   Clipping Groups

   When a layer is clipped to a group containing multiple paths, the directions of all paths within that group are factored into the fill rule.
7. 05:04
   Vector Feathering Limitations

   Enabling Vector Feathering forces the "Clockwise" fill rule, meaning reversing path direction will no longer create holes.
8. 06:04
   Using the Subtract Path Option

   Under the Clockwise rule, checking the Subtract Path box on a specific path is the preferred way to create holes without worrying about direction or scale.

Notes About Current Rive

• Workflow Optimization: While Non-Zero is powerful, using Clockwise combined with Subtract Path is generally more intuitive and less prone to errors in Rive.
• Technical Tip: Mastering Path Direction is essential for managing Bezier Handles and procedural geometry effectively.
• Feathering Compatibility: If your shape requires soft edges (feathering), you must switch to the Clockwise mode and utilize the Subtract Path property for any interior cutouts.