Phaser 4 examples
Curves
- 29 examples
Examples 29
Cubic Bezier BoundsLearn how to calculate and display the bounding box of a Cubic Bezier curve. This example features interactive control points that update the curve shape and its bounds in real-time.
Cubic Bezier CurveCreate a cubic Bezier curve using start, end, and two control points, and animate an object moving along the path using a tween.
Cubic Bezier Curve DebugVisualizes the mathematical construction of a Cubic Bezier curve using linear interpolation across control points and intermediate lines.
Cubic Bezier Path PointsDemonstrates how to extract evenly spaced points or specific coordinates along a Cubic Bezier curve using getPoints and getPoint.
Drag Cubic Bezier CurveCreate and manipulate a Cubic Bezier curve by dragging its start, end, and control points, while an object follows the path via a tween.
Drag Quadratic Bezier CurveManipulate a Quadratic Bezier curve in real-time by dragging its start, end, and control points while an object animates along the path.
Drag Spline CurveDemonstrates an interactive spline curve where control points can be dragged to reshape the path in real-time while an object follows the curve.
Draggable Line CurveDemonstrates how to create a Line curve and interactively update its start and end points using draggable handle objects.
Ellipse Curve AnimationDemonstrates how to create an elliptical path and animate its x and y radius over time while moving an object along the curve.
Ellipse Curve BoundsDemonstrates how to calculate and visualize the bounding box of an interactive Ellipse curve. Includes real-time controls for radius, rotation, and start/end angles.
Get Point at Distance on Line CurveDemonstrates how to find the specific coordinates of a point located at a certain pixel distance along a line curve using getTFromDistance.
Get Point from Spline CurveDemonstrates how to use getPointAt to find specific coordinates along a Spline curve based on a normalized value between 0 and 1.
Get Points on a Line CurveDemonstrates how to use the getPoints method to sample a specific number of coordinate points at regular intervals along a linear path.
Get Points on Cubic Bezier CurveExtract an array of coordinate points at regular intervals along a Cubic Bezier curve and visualize them using Graphics.
Get Spaced Points on a Cubic Bezier CurveExtract and visualize a set of points distributed at equal distances along a Cubic Bezier curve using the getSpacedPoints method.
Get Spaced Points vs. Get PointsDemonstrates the difference between points sampled at segment intervals versus points distributed at equal distances along the entire path length.
Get Tangent Vectors on Cubic Bezier CurveLearn how to extract and visualize tangent and normal vectors at specific points along a cubic Bezier curve to determine direction and orientation.
Interactive Ellipse Curve ParametersAdjust an Ellipse curve's dimensions, rotation, and start/end angles using interactive sliders and a draggable center point while an object follows the path.
Interactive Spline Curve BoundsDemonstrates how to calculate and update the bounding box of a Spline curve in real-time using interactive drag-handles to modify the curve points.
Line CurveDemonstrates creating a simple straight-line curve and animating a point along its path using a tween.
Line Curve BoundsDemonstrates how to calculate and update the bounding box of a line curve as its endpoints are moved via drag-and-drop handles.
Quadratic Bezier CurveCreate a quadratic Bezier curve and animate a point along its path using a tween to interpolate the position.
Rectangle Spline IntersectionLearn how to detect collisions between a draggable sprite and a complex Spline curve by combining bounding box checks with segment-level line-to-rectangle intersection tests.
Spaced Points on a Line CurveDemonstrates how to retrieve a specific number of evenly distributed points along a straight line curve.
Spline Between PointsDemonstrates how to create a smooth spline curve between two points by calculating midpoints and normals to generate oscillating control points along a straight line.
Spline BuilderInteractively build and modify a Spline curve by clicking to add new points and dragging existing control handles. A sprite moves along the generated path using a tween.
Spline CurveCreate a smooth Spline curve from an array of points and animate a point along its length using the getPoint method and a Tween.
Spline Curve Distance PointsDemonstrates how to generate an array of points along a spline curve spaced at a specific pixel distance using the getDistancePoints method.
Spline Curve from Coordinate ArrayDemonstrates how to create a smooth Spline curve by passing a flat array of X and Y coordinates to the constructor.