/geometry-and-math
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.
Claude Code
$ npx -y skills add phaserjs/phaser --skill geometry-and-math --agent claude-code
Codex
$ npx skills add phaserjs/phaser --skill geometry-and-math -a codex -y
Cursor
$ npx skills add phaserjs/phaser --skill geometry-and-math -a cursor -y
Gemini CLI
$ npx skills add phaserjs/phaser --skill geometry-and-math -a gemini-cli -y
GitHub Copilot
$ npx skills add phaserjs/phaser --skill geometry-and-math -a github-copilot -y
OpenCode
$ npx skills add phaserjs/phaser --skill geometry-and-math -a opencode -y
Windsurf
$ npx skills add phaserjs/phaser --skill geometry-and-math -a windsurf -y
SKILL.md
geometry-and-math.SKILL.mdname: 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."
Phaser 4 — Geometry and Math
> 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
---
Quick Start
// 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---
Core Concepts
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:
- `contains(x, y)` -- point-in-shape test
- `getPoint(position, output?)` -- point at normalized position (0-1) on perimeter
- `getPoints(quantity, stepRate?, output?)` -- evenly spaced points on perimeter
- `getRandomPoint(output?)` -- random point inside the shape
- `setTo(...)` -- reset all properties
- `setEmpty()` -- zero out the shape
- `setPosition(x, y)` -- move origin/center
Each geom type also has a folder of static helper functions (e.g., `Phaser.Geom.Rectangle.Contains`, `Phaser.Geom.Circle.Area`).
---
Geometry Classes
| 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` |
Rectangle Static Helpers
`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.
Circle Static Helpers
`Phaser.Geom.Circle.*`: Area, Circumference, CircumferencePoint, Clone, Contains, ContainsPoint, ContainsRect, CopyFrom, Equals, GetBounds, GetPoint, GetPoints, Offset, OffsetPoint, Random.
Line Static Helpers
`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.
Triangle Static Helpers
`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.
Polygon Input Formats
The Polygon constructor accepts multiple formats for the `points` argument:
- Space-separated string: `'40 0 40 20 100 20 100 80'`
- Array of `{x, y}` objects
- Flat number array: `[x1, y1, x2, y2, ...]`
- Array of `[x, y]` sub-arrays
---
Intersection Tests
All under `Phaser.Geom.Intersects`.
Boolean Tests (return `true`/`false`)
| 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 |
Get Intersection Points (return `Vector2[]`)
| Function | Description | |---|---| | `GetCircleToCircle(circleA, circleB, out?)` | Intersection points of two circles
Read more
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."
Phaser 4 — Geometry and Math
> 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
---
Quick Start
// 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---
Core Concepts
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:
- `contains(x, y)` -- point-in-shape test
- `getPoint(position, output?)` -- point at normalized position (0-1) on perimeter
- `getPoints(quantity, stepRate?, output?)` -- evenly spaced points on perimeter
- `getRandomPoint(output?)` -- random point inside the shape
- `setTo(...)` -- reset all properties
- `setEmpty()` -- zero out the shape
- `setPosition(x, y)` -- move origin/center
Each geom type also has a folder of static helper functions (e.g., `Phaser.Geom.Rectangle.Contains`, `Phaser.Geom.Circle.Area`).
---
Geometry Classes
| 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` |
Rectangle Static Helpers
`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.
Circle Static Helpers
`Phaser.Geom.Circle.*`: Area, Circumference, CircumferencePoint, Clone, Contains, ContainsPoint, ContainsRect, CopyFrom, Equals, GetBounds, GetPoint, GetPoints, Offset, OffsetPoint, Random.
Line Static Helpers
`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.
Triangle Static Helpers
`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.
Polygon Input Formats
The Polygon constructor accepts multiple formats for the `points` argument:
- Space-separated string: `'40 0 40 20 100 20 100 80'`
- Array of `{x, y}` objects
- Flat number array: `[x1, y1, x2, y2, ...]`
- Array of `[x, y]` sub-arrays
---
Intersection Tests
All under `Phaser.Geom.Intersects`.
Boolean Tests (return `true`/`false`)
| 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 |
Get Intersection Points (return `Vector2[]`)
| 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.
Other skills on phaser.
More skills from other plugins.
migrate-radix-to-base
Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert…
taste-skill
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One…
Questions about geometry-and-math.
- Which coding agents can use geometry-and-math?
- geometry-and-math installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.

