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 helper

PixiJS exposes lightweight math primitives (Point, Matrix, shape classes) used throughout the library for transforms, hit testing, and coordinate conversion. Import pixi.js/math extras to add vector operations (add, dot, magnitude, reflect) and Rectangle intersection/union helpers. Quick Start Related skills: pixijs scene container (transform properties), pixijs events (hitArea usage), pixijs scene core concepts (culling with Rectangle). Core Patterns Point and ObservablePoint Point is a simple {x, y} value type. ObservablePoint fires a callback when x or y changes; it is used internally by Container's position, scale, pivot, origin, and skew. Container properties like position , scale , pivot , origin , and skew are ObservablePoints. Setting .x or .y on them triggers transform recalculation automatically. Matrix (2D affine transform) Matrix represents a 3x3 affine transform: a c tx b d ty 0 0 1 . It supports translate, scale, rotate, append, prepend, invert, and decompose. Coordinate transforms via Container Containers provide toGlobal , toLocal , and getGlobalPosition for coordinate conversion. Shapes and hit testing Rectangle, Circle, Ellipse, Polygon, RoundedRectangle, and Triangle all implement contains(x, y) for point in shape tests, plus getBounds(out?) and strokeContains(x, y, width, alignment?) . They can be used as hitArea on containers for custom interaction regions. Do not confuse native Rectangle.intersects(other) (returns boolean ) with math extras intersection(other) (returns a Rectangle describing the overlap area). Rectangle layout helpers Rectangle ships with mutating helpers used heavily in UI/layout, bounds aggregation, and pixel snapping. All return this for chaining. Polygon Polygon accepts four constructor formats: a flat number array, an array of point like objects, or either passed as spread arguments. Constants Types PointData minimal {x, y} interface accepted by most APIs. Use it when typing parameters that only need to read coordinates. PointLike extends PointData with set() , copyFrom() , copyTo() , equals() . Implemented by both Point and ObservablePoint . Size { width, height } interface used by renderer/canvas APIs. SHAPE PRIMITIVE string literal union: 'rectangle' 'circle' 'ellipse' 'polygon' 'roundedRectangle' 'triangle' . Every shape exposes type so you can branch without instanceof . math extras (side effect import) import 'pixi.js/math extras' adds methods to Point, ObservablePoint, and Rectangle via prototype extension. Not included in the default bundle. Point / ObservablePoint vector methods All methods accept an optional out parameter to avoid allocations. Without out , a new Point is returned. Rectangle extended methods containsRect and intersects are native Rectangle methods (see above). math extras adds equals , intersection (returns the overlap rect), and union : Geometry utility functions These functions are exported from pixi.js/math extras , not the main pixi.js entry. Common Mistakes HIGH: Importing from @pixi/math Wrong: Correct: v8 uses a single pixi.js package. All sub packages like @pixi/math , @pixi/core , etc. were removed. MEDIUM: Mutating ObservablePoint without triggering observer Wrong: Correct: Container's position, scale, pivot, origin, and skew are ObservablePoints. Setting .x or .y on them triggers the container's transform update. Reassigning the variable reference does not modify the container. Always mutate the existing ObservablePoint via .set() , .copyFrom() , or direct property assignment on the original object. MEDIUM: Not importing math extras for extended methods Wrong: Correct: Extended math utilities (add, subtract, multiply, magnitude, normalize, dot, cross, etc. on Point; intersection methods on shapes) require an explicit import 'pixi.js/math extras' . These are not included in the default bundle. MEDIUM: Storing references to shared/temporary objects Wrong: Correct: Point.shared and Matrix.shared are reset to zero/identity every time they are accessed. They exist for one off calculations within a single expression. Never store a reference to them. API Reference [Point](https://pixijs.download/release/docs/maths.Point.html.md) [ObservablePoint](https://pixijs.download/release/docs/maths.ObservablePoint.html.md) [Matrix](https://pixijs.download/release/docs/maths.Matrix.html.md) [Rectangle](https://pixijs.download/release/docs/maths.Rectangle.html.md) [Circle](https://pixijs.download/release/docs/maths.Circle.html.md) [Ellipse](https://pixijs.download/release/docs/maths.Ellipse.html.md) [Polygon](https://pixijs.download/release/docs/maths.Polygon.html.md) [RoundedRectangle](https://pixijs.download/release/docs/maths.RoundedRectangle.html.md) [Triangle](https://pixijs.download/release/docs/maths.Triangle.html.md) [DEG TO RAD](https://pixijs.download/release/docs/maths.DEG TO RAD.html.md)

pixijs-math