actions-and-utilities
Use this skill when working with Phaser 4 utility functions, actions, alignment, grid layout, or batch operations on game objects. Triggers on: align, grid…
Use this skill when using Phaser 4 math and geometry utilities. Covers vectors, rectangles, circles, triangles, polygons, random number generation, angles, distance, interpolation, and snapping. Triggers on: Vector2, Rectangle, Circle, math, distance, angle, random, lerp.
$ npx -y skills add phaserjs/phaser --skill geometry-and-math --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/geometry-and-mathContext preview
The summary Claude sees to decide when to auto-load this skill.
Use this skill when using Phaser 4 math and geometry utilities. Covers vectors, rectangles, circles, triangles, polygons, random number generation, angles, distance, interpolation, and snapping. Triggers on: Vector2, Rectangle, Circle, math, distance, angle, random, lerp.
name: geometry-and-math description: "Use this skill when using Phaser 4 math and geometry utilities. Covers vectors, rectangles, circles, triangles, polygons, random number generation, angles, distance, interpolation, and snapping. Triggers on: Vector2, Rectangle, Circle, math, distance, angle, random, lerp."
> Geom classes (Circle, Ellipse, Line, Polygon, Rectangle, Triangle), intersection tests, and Math utilities (Vector2, Vector3, Matrix4, angles, distances, interpolation, easing, random, snap, clamp).
Related skills: graphics-and-shapes.md, physics-arcade.md
---
// Create geometry objects (these are data only, not renderable)
const rect = new Phaser.Geom.Rectangle(10, 20, 200, 100);
const circle = new Phaser.Geom.Circle(400, 300, 50);
const line = new Phaser.Geom.Line(0, 0, 100, 100);
// Point containment
rect.contains(50, 50); // true
circle.contains(410, 310); // true
// Intersection test
Phaser.Geom.Intersects.CircleToRectangle(circle, rect); // boolean
// Math utilities
const v = new Phaser.Math.Vector2(3, 4);
v.length(); // 5
v.normalize(); // {x: 0.6, y: 0.8}
const dist = Phaser.Math.Distance.Between(0, 0, 100, 100);
const angle = Phaser.Math.Angle.Between(0, 0, 100, 100);
const clamped = Phaser.Math.Clamp(150, 0, 100); // 100---
Geometry objects are pure data containers holding coordinates and dimensions. They are NOT game objects and cannot be added to the display list. To render geometry, use the Graphics game object or Shape game objects (see graphics-and-shapes.md).
Every geom class has a `type` property set to a `Phaser.Geom` constant for fast type checks.
All geom classes share a common instance method pattern:
Each geom type also has a folder of static helper functions (e.g., `Phaser.Geom.Rectangle.Contains`, `Phaser.Geom.Circle.Area`).
---
| Class | Namespace | Constructor | Key Properties | |---|---|---|---| | **Circle** | `Phaser.Geom.Circle` | `(x, y, radius)` | `x`, `y`, `radius`, `diameter`, `left`, `right`, `top`, `bottom` | | **Ellipse** | `Phaser.Geom.Ellipse` | `(x, y, width, height)` | `x`, `y`, `width`, `height`, `left`, `right`, `top`, `bottom` | | **Line** | `Phaser.Geom.Line` | `(x1, y1, x2, y2)` | `x1`, `y1`, `x2`, `y2`, `left`, `right`, `top`, `bottom` | | **Polygon** | `Phaser.Geom.Polygon` | `(points)` | `area`, `points` (array of Vector2Like) | | **Rectangle** | `Phaser.Geom.Rectangle` | `(x, y, width, height)` | `x`, `y`, `width`, `height`, `left`, `right`, `top`, `bottom`, `centerX`, `centerY` | | **Triangle** | `Phaser.Geom.Triangle` | `(x1, y1, x2, y2, x3, y3)` | `x1`, `y1`, `x2`, `y2`, `x3`, `y3` |
`Phaser.Geom.Rectangle.*`: Area, Ceil, CeilAll, CenterOn, Clone, Contains, ContainsPoint, ContainsRect, CopyFrom, Decompose, Equals, FitInside, FitOutside, Floor, FloorAll, FromPoints, FromXY, GetAspectRatio, GetCenter, GetPoint, GetPoints, GetSize, Inflate, Intersection, MarchingAnts, MergePoints, MergeRect, MergeXY, Offset, OffsetPoint, Overlaps, Perimeter, PerimeterPoint, Random, RandomOutside, SameDimensions, Scale, Union.
`Phaser.Geom.Circle.*`: Area, Circumference, CircumferencePoint, Clone, Contains, ContainsPoint, ContainsRect, CopyFrom, Equals, GetBounds, GetPoint, GetPoints, Offset, OffsetPoint, Random.
`Phaser.Geom.Line.*`: Angle, BresenhamPoints, CenterOn, Clone, CopyFrom, Equals, Extend, GetEasedPoints, GetMidPoint, GetNearestPoint, GetNormal, GetPoint, GetPoints, GetShortestDistance, Height, Length, NormalAngle, NormalX, NormalY, Offset, PerpSlope, Random, ReflectAngle, Rotate, RotateAroundPoint, RotateAroundXY, SetToAngle, Slope, Width.
`Phaser.Geom.Triangle.*`: Area, BuildEquilateral, BuildFromPolygon, BuildRight, CenterOn, Centroid, CircumCenter, CircumCircle, Clone, Contains, ContainsArray, ContainsPoint, CopyFrom, Decompose, Equals, GetPoint, GetPoints, InCenter, Offset, Perimeter, Random, Rotate, RotateAroundPoint, RotateAroundXY.
The Polygon constructor accepts multiple formats for the `points` argument:
---
All under `Phaser.Geom.Intersects`.
| Function | Description | |---|---| | `CircleToCircle(circleA, circleB)` | Two circles overlap | | `CircleToRectangle(circle, rect)` | Circle overlaps rectangle | | `LineToCircle(line, circle)` | Line segment intersects circle | | `LineToLine(line1, line2, out?)` | Two line segments cross; writes point to `out` | | `LineToRectangle(line, rect)` | Line segment intersects rectangle | | `PointToLine(point, line, lineThickness?)` | Point lies on/near line | | `PointToLineSegment(point, line)` | Point lies on finite line segment | | `RectangleToRectangle(rectA, rectB)` | Two rectangles overlap | | `RectangleToTriangle(rect, triangle)` | Rectangle overlaps triangle | | `RectangleToValues(rect, left, right, top, bottom, tolerance?)` | Rectangle overlaps LRTB bounds | | `TriangleToCircle(triangle, circle)` | Triangle overlaps circle | | `TriangleToLine(triangle, line)` | Triangle intersects line | | `TriangleToTriangle(triA, triB)` | Two triangles overlap |
| Function | Description | |---|---| | `GetCircleToCircle(circleA, circleB, out?)` | Intersection points of two circles
Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers and has been actively developed for over 13 years.
Repo: phaserjs/phaser
Use this skill when working with Phaser 4 utility functions, actions, alignment, grid layout, or batch operations on game objects. Triggers on: align, grid…
Use this skill when creating or controlling sprite animations in Phaser 4. Covers spritesheets, atlases, AnimationManager, AnimationState, play/stop/chain,…
Use this skill when adding audio or sound to a Phaser 4 game. Covers loading audio, playing sounds, music, volume, spatial audio, Web Audio API, and…
Use this skill when working with cameras in Phaser 4. Covers camera effects (shake, fade, flash, pan, zoom), following sprites, scroll, bounds, viewports,…
Use this skill when working with curves and paths in Phaser 4. Covers splines, bezier curves, lines, ellipses, path followers, and mathematical curve types.…
Use this skill when using the Phaser 4 DataManager to store custom key-value data on game objects, listen for data change events, or manage game state.…