Polygon Plugin for Construct 3
This plugin allows you to dynamically generate, manipulate, slice, and render complex 2D shapes at runtime. Powered by a robust mathematical core (ClipperLib) and highly optimized WebGL rendering.
Quick Start: Drawing Your First Shape
The easiest way to use the Polygon plugin is to use a Shape Template.
Add the Polygon object to your layout.
In your Event Sheet, add the action: On Start of Layout -> Polygon: Set shape to Star (Points: 5, Inner: 25, Outer: 50, Closed: True)
Style it: Polygon: Set fill color to "255,0,0,1" and Polygon: Set border thickness to 5.
Note: If you ever slice a shape 100% and it disappears, it is not destroyed from memory—it just has an area of 0. Use the native Destroy action to completely remove objects you no longer need!
Feature Categories & Actions
Actions, conditions, and expressions are neatly organized into the following categories:
1. Shape Templates
Quickly generate perfect mathematical base shapes.
Set shape to Rectangle / Circle / Polygon / Star: Instantly draw perfect shapes. The Closed parameter determines if the final wall is sealed (True for solid objects, False for open arcs/lines).
Load SVG Path: Paste raw SVG path data (e.g., M 10 10 L 90 10...) to instantly convert vector graphics into playable game objects!
2. Geometry & Points
Manually build or edit shapes vertex by vertex.
Set Point (Local, World, Polar): Move individual points exactly where you need them.
Add / Delete Point: Insert points dynamically during gameplay.
Point Naming Standard: Points are automatically named using the format SegmentIndex_PointIndex. The main outer boundary is always Segment 0 (e.g., 0_0, 0_1). Holes and cutouts are Segment 1+ (e.g., 1_0).
3. Styling & Patterns
Customize the visual render of your shapes.
Colors & Borders: Set RGBA fill colors, border colors, and thickness. Choose between Miter, Round, or Bevel join types for your corners.
Images: Map a Sprite's image to your shape's Fill or Border. (Includes Offset, Scale, and Draw Modes like "Scale to Fit" or "Repeat"). Images can be stacked on top of each other.
Patterns: Procedurally generate internal rendering patterns (Lines, Checkers, Dots) over your shapes.
4. Math & Operations
Deform and optimize your geometry mathematically.
Expand Shape: Grow or shrink a shape by a pixel amount.
Smooth Shape: Adds vertices to perfectly round off jagged edges. (Safely capped to prevent WebGL buffer limits).
Optimize Shape: Removes unnecessary vertices along straight lines based on a pixel tolerance, drastically improving performance.
5. Boolean Cut & Merge (Destructive)
These actions permanently alter the shape's data.
Merge / Cut Hole: Combine shapes together or punch holes out of them based on overlapping UIDs.
Batch Operations (UIDs): Pass a comma-separated string of UIDs (e.g., "104,105,106") to merge or cut dozens of shapes in a single, hyper-fast mathematical sweep.
Guillotine Shape / Radial: Permanently slice percentages or pie-wedges out of a shape.
Convert Line to Solid: Takes an open line and mathematically wraps a solid boundary around it based on thickness.
6. Visual Masks (Non-Destructive)
Act exactly like CSS clip-path. These actions hide parts of the shape visually without altering the collision bounds or mathematical points!
Set Clip Mask: Hide a percentage from the Top, Bottom, Left, or Right edge. (Stackable!)
Set Radial Mask: Sweep a pie/radar mask from a start angle to an end angle. Perfect for UI cooldowns, health bars, and line-of-sight cones.
7. Interaction & Drag
Grab At / Release Drag: Custom actions to safely drag complex multi-segmented shapes with the mouse, natively calculating offsets.
See Example file for advanced useage.