pixijs-math
Use this skill when working with coordinates, vectors, matrices, shapes, hit testing, or layout rectangles in PixiJS v8. Covers Point/ObservablePoint, Matrix (2D affine, decompose, apply, applyInverse), shapes (Rectangle, Circle, Ellipse, Polygon, RoundedRectangle, Triangle), Rectangle layout helpers (pad, fit, enlarge, ceil, scale, getBounds), strokeContains hit tests, Polygon isClockwise/containsPolygon, toGlobal/toLocal, PointData/PointLike/Size types, DEG_TO_RAD, and pixi.js/math-extras vect
Security Assessment
About pixijs-math
PixiJS v8 ships a set of lightweight math primitives that the rest of the library relies on for transforms, hit testing, and coordinate conversion. The skill documents the Point and ObservablePoint value types, the 2D affine Matrix, the shape classes (Rectangle, Circle, Ellipse, Polygon, RoundedRectangle, Triangle), and the coordinate-conversion helpers exposed on Container. ObservablePoint backs Container properties such as position, scale, pivot, origin, and skew, firing a callback that marks the transform dirty whenever x or y changes, while plain Point is a simple {x, y} value with set, clone, equals, and copyFrom helpers plus a reusable Point.shared temporary.
The Matrix section covers building and combining affine transforms via translate, rotate, scale, append, and prepend, applying them with apply (local to parent) and applyInverse (parent to local), and pulling position/scale/rotation/skew back out with decompose. Container methods toGlobal, toLocal, and getGlobalPosition convert points between local, world, and other containers' spaces. Shapes implement contains for point-in-shape tests, getBounds for an enclosing Rectangle, and strokeContains for hit tests against a stroked outline with inner/centered/outer alignment, and any shape can serve as a container's hitArea.
Rectangle additionally offers mutating layout helpers used in UI and bounds work: pad to grow on all sides, fit to clip inside another rect, enlarge to aggregate bounds, scale, ceil for pixel-grid snapping, and copyFromBounds to import a Container's bounds object. The doc is explicit that native Rectangle.intersects returns a boolean while the math-extras intersection helper returns a Rectangle of the overlap. Importing pixi.js/math-extras adds vector operations (add, dot, magnitude, reflect) and Rectangle intersection/union helpers, plus line and segment intersection utilities. Reach for this skill whenever you are reasoning about coordinates, vectors, matrices, custom hit areas, or layout rectangles in a PixiJS scene.
FAQ
What is the difference between Point and ObservablePoint?
Point is a plain {x, y} value type, while ObservablePoint fires a callback when x or y changes and is used internally by Container properties like position, scale, pivot, origin, and skew so that setting a coordinate automatically marks the transform dirty.
How do I convert a point between local and world coordinates?
Containers expose toGlobal(point) to go from a child's local space to world space, toLocal(point, from?) to go the other way or between two containers, and getGlobalPosition() for the object's own world position.
What do I import to get vector math like dot product and reflect?
Import pixi.js/math-extras, which adds vector operations such as add, dot, magnitude, and reflect along with Rectangle intersection/union and line/segment intersection helpers.
How does strokeContains alignment work?
strokeContains(x, y, width, alignment?) tests whether a point lies on a stroked outline, where the alignment argument selects 1 for inner, 0.5 for centered, and 0 for outer stroke placement.
Does Rectangle.intersects return the overlapping area?
No. Native Rectangle.intersects returns a boolean indicating whether two rectangles overlap; to get a Rectangle describing the overlap area you use the math-extras intersection helper instead.
Install pixijs-math
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
pixijs/pixijs-skills