Procedural Shapes

Summary

This lesson explores Procedural Shapes in Rive, which include rectangles, ellipses, triangles, polygons, and stars. Unlike custom paths, procedural shapes come with unique properties like corner radius, number of points, and specific inner/outer radius controls. The lesson also demonstrates how to convert these shapes into custom paths for advanced vertex editing.

Step by Step

1. 00:04
   Available Shapes

   Access procedural shapes (Rectangle, Ellipse, Triangle, Polygon, Star) from the Create Tools menu.
2. 00:20
   Rectangle & Square

   Click and drag to draw a rectangle; hold Shift to constrain it to a square.
3. 00:42
   Width & Height vs. Scale

   Changing Width/Height properties affects the geometry without altering the layer's Scale property.
4. 01:04
   Origin Control

   Adjust the origin (e.g., 50% for center, 0% for edge) to change how the shape expands or rotates.
5. 01:33
   Ellipse & Linking

   Use the chain symbol in properties to link Width and Height for uniform adjustments.
6. 02:16
   Polygon Properties

   Adjust the "Radius" to round corners and "Points" to change the number of sides.
7. 02:39
   Star Tool

   Fine-tune the number of points, inner radius percentage, and rounding of inner/outer points.
8. 03:04
   Conversion to Custom Path

   Tap Enter twice or click "Edit Vertices" to convert. Note that this process is irreversible and removes procedural properties.

Notes About Current Rive

• Size vs. Scale: Always prefer adjusting Width and Height for layout, and use Scale for animation or overall transformations.
• Irreversibility: Once a shape is converted to a custom path, you lose properties like the ability to change the number of star points dynamically.
• Inner Radius: The inner radius percentage on stars is a powerful way to create everything from sharp sunbursts to soft floral shapes.