pixijs-math

Performs PixiJS coordinate transforms, 2D affine matrix operations, and hit testing for interactive rendering.

16|8|Updated May 20, 2020
One-click install
npx skills add https://github.com/encounterplus/web-client --skill pixijs-math-encounterplus
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixijs-math
Source: https://github.com/encounterplus/web-client/tree/main/.agents/skills/pixijs-math
Command: npx skills add https://github.com/encounterplus/web-client --skill pixijs-math-encounterplus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PixiJS apps often need accurate coordinate conversion, transform math, and shape-based hit testing, but it’s easy to get wrong bounds, intersections, or local/global mapping.

Core Features & Use Cases

  • Coordinate transforms: Convert points between local and global spaces using Container helpers like toGlobal/toLocal.
  • Affine transform math: Build, apply, invert, and decompose 2D Matrix transforms for positioning, scaling, rotation, and skew.
  • Shape containment and collision: Use Rectangle/Circle/Ellipse/Polygon/RoundedRectangle/Triangle methods (contains, containsRect, intersects, strokeContains, getBounds) for interaction hit areas and geometry checks.
  • Layout rectangle helpers: Pad, fit, enlarge, ceil, scale, and compute aggregated bounds with chaining, plus safe reuse patterns via out params.
  • math-extras utilities: Extend Point/ObservablePoint with vector operations and Rectangle with intersection/union, and use exported geometry helpers like lineIntersection/segmentIntersection.

Quick Start

Use the pixijs-math skill to transform a local point to global space and verify whether a Rectangle hit area contains a given pointer coordinate in PixiJS v8.

Frequently Asked Questions about pixijs-math

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert local points to global coordinates in PixiJS for hit testing?

PixiJS coordinate transforms convert points between local and global spaces using Container helpers like toGlobal and toLocal. You can then verify whether a Rectangle hit area contains a given pointer coordinate by applying shape containment methods.

What is the best way to check if a polygon contains a point or intersects a rectangle in PixiJS?

PixiJS shape containment checks use Polygon, Rectangle, and Circle methods like contains, containsRect, and intersects. These geometry-based hit testing functions evaluate polygon winding, containment, and rectangle intersection for interactive rendering boundaries.

Does PixiJS math-extras support line intersection and vector operations for ObservablePoint?

PixiJS math-extras extends Point and ObservablePoint with vector operations and adds Rectangle intersection and union helpers. Exported geometry utilities include lineIntersection and segmentIntersection for calculating exact shape boundary crossings.

How do I compute aggregated bounds and pad or fit rectangles in a PixiJS layout?

PixiJS layout rectangle helpers pad, fit, enlarge, ceil, and scale bounds with method chaining. You compute aggregated bounds across multiple shapes safely using out params for memory reuse during layout calculations.

Why are my PixiJS stroke hit detection checks failing on rotated containers?

PixiJS stroke hit detection requires accurate coordinate conversion before calling strokeContains on shape boundaries. Ensure global-local conversions across Containers are applied first so the pointer coordinate is evaluated in the correct local transform space.