LLM Skills
~/catalog/frontend//SKILL
FrontendGitHub source

Geometry and Mathematics

/SKILL

Use this skill when working with Phaser 4's mathematical and geometric tools. It covers vectors, rectangles, and

phaserjsphaserjs
40.3k
May 21, 2026
MIT License
// skill content

--- 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 ``js // 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)` |

// original public source
phaserjs/phaser
/skills/geometry-and-math/SKILL.md
License: MIT License
Independent project, not affiliated with Anthropic. This skill remains the property of its original author.
// install this skill
Paste this command in your terminal at the root of your project:
mkdir -p .claude/commands && curl -o ".claude/commands/SKILL.md" "https://raw.githubusercontent.com/phaserjs/phaser/master/skills/geometry-and-math/SKILL.md"
Then in Claude Code, type /SKILL to activate it.
open_in_newOpen original source
// save
Save available after sign in.
loginSign in to save
// information
Creatorphaserjs
Stars 40.3k
CategoryFrontend
LicenseMIT License
UpdatedMay 21, 2026
Format.md
AccessFree
// similar

Skills Frontend

View allarrow_forward