LLM Skills
~/catalogue/frontend//SKILL
Frontendsource GitHub

Géométrie et mathématiques

/SKILL

Utilisez cette compétence lorsque vous utilisez les utilitaires mathématiques et géométriques de Phaser 4. Elle couvre les vecteurs, les rectangles, l

phaserjsphaserjs
40.3k
21 mai 2026
MIT License
// contenu du skill

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

ClassNamespaceConstructorKey Properties
CirclePhaser.Geom.Circle(x, y, radius)x, y, radius, diameter, left, right, top, bottom
EllipsePhaser.Geom.Ellipse(x, y, width, height)x, y, width, height, left, right, top, bottom
LinePhaser.Geom.Line(x1, y1, x2, y2)x1, y1, x2, y2, left, right, top, bottom
PolygonPhaser.Geom.Polygon(points)area, points (array of Vector2Like)
RectanglePhaser.Geom.Rectangle(x, y, width, height)x, y, width, height, left, right, top, bottom, centerX, centerY
TrianglePhaser.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)

FunctionDescription
CircleToCircle(circleA, circleB)Two circles overlap
CircleToRectangle(circle, rect)
// source originale publique
phaserjs/phaser
/skills/geometry-and-math/SKILL.md
Licence : MIT License
Projet indépendant, non affilié à Anthropic. Ce skill reste la propriété de son auteur original.
// installer ce skill
Collez cette commande dans votre terminal à la racine de votre projet :
mkdir -p .claude/commands && curl -o ".claude/commands/SKILL.md" "https://raw.githubusercontent.com/phaserjs/phaser/master/skills/geometry-and-math/SKILL.md"
Ensuite dans Claude Code, tapez /SKILL pour l'activer.
open_in_newVoir la source originale
// sauvegarder
Sauvegarde disponible après connexion.
loginSe connecter pour sauvegarder
// informations
Créateurphaserjs
Étoiles 40.3k
CatégorieFrontend
LicenceMIT License
Mis à jour21 mai 2026
Format.md
AccèsGratuit
// similaires

Skills Frontend

Voir toutarrow_forward