# Phaser Examples Index
# https://phaser.io
#
# Format: version | folder | title | description
# For full metadata and source code, use the API: GET /api/v1/examples/{id}
#

v4.1.0 | actions | Add Mask Shape Action | Demonstrates applying and configuring geometric masks on images using the AddMaskShape action, featuring options for inversion, specific regions, and scale modes.
v4.1.0 | actions | Add Shine Effect | Demonstrates how to apply a default shine animation effect to an image using Phaser Actions.
v4.1.0 | actions | Add Shine Effect with Displacement Map | Demonstrates how to apply an animated shine effect to an image using a displacement map to create distorted light reflections.
v4.1.0 | actions | Align Objects Sequence | Uses the AlignTo action to position an array of Game Objects sequentially relative to one another based on a specified alignment point.
v4.1.0 | actions | Align To Action | Demonstrates how to use the AlignTo action to position an array of Game Objects sequentially relative to each other, using the first object as the anchor.
v4.1.0 | actions | Align To Offset | Demonstrates using Phaser.Actions.AlignTo to position a sequence of sprites relative to each other with a dynamic vertical offset.
v4.1.0 | actions | Angle Action | Demonstrates how to use the Angle action to rotate an array of Game Objects by a fixed amount every frame.
v4.1.0 | actions | Angle With Step | Uses Phaser.Actions.Angle to apply a continuous, incremental rotation across an array of Game Objects every frame.
v4.1.0 | actions | Bloom Camera Effect | Demonstrates how to apply a bloom shader effect to a camera using the AddEffectBloom action and animate the effect intensity with a tween.
v4.1.0 | actions | Fit To Region | Demonstrates how to use the FitToRegion action to scale game objects into a target area using different fit modes including fit inside, stretch to fill, or fit outside.
v4.1.0 | actions | Fit to Region with Manual Size | Demonstrates how to use Phaser.Actions.FitToRegion on Game Objects that lack intrinsic dimensions, such as Particle Emitters, by providing explicit source width and height.
v4.1.0 | actions | Get First Action | Demonstrates how to use the GetFirst action to find the first game object in an array that matches specific property values, such as scale and frame.
v4.1.0 | actions | Grid Align Animations | Demonstrates how to use the GridAlign action to arrange a collection of animated sprites into a structured grid layout.
v4.1.0 | actions | Grid Align Group | Demonstrates how to use the GridAlign action to automatically arrange Game Objects from a Group into a grid formation with defined cell dimensions and positioning.
v4.1.0 | actions | Grid Align Sprites | Demonstrates how to arrange an array of sprites into a 4x2 grid using the GridAlign action, specifying cell dimensions and starting coordinates.
v4.1.0 | actions | Grid Align with Overlap | Demonstrates how to arrange a group of sprites into a grid where the items overlap horizontally by setting cell dimensions smaller than the actual sprite size.
v4.1.0 | actions | Increment X Action | Use the IncX action to move an array of Game Objects horizontally, applying both a base increment and an optional step value for varied speeds.
v4.1.0 | actions | Increment Y Action | Demonstrates using the IncY action to shift the vertical position of multiple Game Objects simultaneously, including the use of a step value for graduated movement.
v4.1.0 | actions | IncXY Action | Demonstrates how to use the IncXY Action to apply relative X and Y movement to an entire array of Game Objects simultaneously.
v4.1.0 | actions | Place and Rotate Around a Circle | Demonstrates how to arrange multiple groups of sprites into concentric circles and animate them rotating around a central point.
v4.1.0 | actions | Place On A Circle Reversed | Arrange multiple groups of sprites onto concentric circles and animate them by rotating each ring in alternating directions.
v4.1.0 | actions | Place On Circle | Arrange a group of sprites along the perimeter of a circular geometry and animate their rotation and radius using Action functions.
v4.1.0 | actions | Place On Ellipse | Position a group of Game Objects evenly around the perimeter of an ellipse and update their positions dynamically as the ellipse changes size.
v4.1.0 | actions | Place On Line | Demonstrates how to use the PlaceOnLine action to distribute a group of game objects evenly along a geometric line segment.
v4.1.0 | actions | Place On Rectangle | Distributes a group of game objects evenly along the perimeter of a rectangle shape using the PlaceOnRectangle action.
v4.1.0 | actions | Place On Rectangle Shift | Demonstrates how to arrange a group of sprites along the perimeter of a rectangle and shift their positions each frame to create a rotation effect while the rectangle's dimensions are animated with a tween.
v4.1.0 | actions | Place on Triangle | Learn how to distribute a group of sprites along the perimeter of equilateral and right-angled triangles using the PlaceOnTriangle action.
v4.1.0 | actions | Place Sprites on a Circle | Demonstrates using the PlaceOnCircle action to arrange an array of sprites along the perimeter of a geometric circle, including depth sorting based on their y-coordinates.
v4.1.0 | actions | Place Sprites on a Circle and Rotate | Arrange a group of sprites in a circle and animate their rotation and distance from the center using Phaser Actions and a tweened counter.
v4.1.0 | actions | Place Sprites on a Circular Arc | Distribute a collection of sprites along a specific segment of a circle using start and end angles with the PlaceOnCircle action.
v4.1.0 | actions | Random Circle Action | Distribute a collection of game objects randomly within the area of a circle geometry object using the RandomCircle action.
v4.1.0 | actions | Random Ellipse | Distributes a group of sprites randomly within the area of an ellipse geometry object using the RandomEllipse action.
v4.1.0 | actions | Random Line | Positions a group of sprites at random points along a specific geometric line.
v4.1.0 | actions | Random Position in Triangle | Demonstrates how to use the RandomTriangle action to randomly distribute a group of sprites within the boundaries of a triangle geometry object.
v4.1.0 | actions | Random Rectangle Action | Demonstrates how to randomly distribute a group of sprites within the boundaries of a geometric rectangle using the RandomRectangle action.
v4.1.0 | actions | Rotate Around | Demonstrates how to rotate a group of Game Objects around a fixed point in space using the RotateAround action.
v4.1.0 | actions | Rotate Around Distance | Demonstrates how to use the RotateAroundDistance action to rotate a group of game objects around a specific point while maintaining a fixed radius.
v4.1.0 | actions | Rotate Around Point with Distance | Demonstrates using the RotateAroundDistance action to orbit a group of sprites around a specific point at a fixed radius, with the rotation center following the pointer.
v4.1.0 | actions | Rotate Container Facing Point | Demonstrates how to orbit a Container around a specific point using RotateAroundDistance and update its rotation so that it always faces the center of the orbit.
v4.1.0 | actions | Set Alpha Action | Demonstrates using the Set Alpha action to apply a linear gradient of transparency across a group of sprites.
v4.1.0 | actions | Set X Y Action | Demonstrates how to use the SetXY action to set the coordinates for all members of a group at once.
v4.1.0 | actions | Shift Position Snake | Demonstrates using the ShiftPosition action to create a snake-like movement effect where each item in an array follows the previous coordinates of the leader.
v4.1.0 | actions | Shift Position Trail | Create a smooth trailing effect by using the ShiftPosition action to move a group of objects sequentially toward the mouse pointer.
v4.1.0 | actions | Shine Effect Options | Demonstrates how to apply and customize the shine effect using Phaser.Actions.AddEffectShine, including adjustments for direction, radius, custom color bands, animation easing, and reveal modes.
v4.1.0 | actions | Soft Mask Shape Action | Demonstrates how to apply a mask with soft, blurred edges to a Game Object using the AddMaskShape action with blur radius and padding.
v4.1.0 | actions | Spread Action | Demonstrates how to use the Spread action to evenly distribute a property value, such as alpha, across a collection of Game Objects.
v4.1.0 | actions | Wrap in Camera Bounds | Demonstrates how to use the WrapInRectangle action to wrap a collection of objects around the screen when they exit the camera's viewport.
v4.1.0 | actions | Wrap In Rectangle | Demonstrates how to keep a group of moving sprites within a specific rectangular area using the WrapInRectangle action.
v4.1.0 | actions | Wrap In Rectangle With Padding | Demonstrates using the WrapInRectangle action to keep sprites within a defined boundary, using a padding value to ensure they fully exit the area before wrapping to the opposite side.
v4.1.0 | animation | 60fps Animation Test | Demonstrates creating and playing a sprite animation at 60 frames per second using a texture atlas, combined with scrolling tile sprites.
v4.1.0 | animation | Add Animation Event | Demonstrates how to listen for the ADD_ANIMATION event to trigger a callback whenever a new animation is created in the Animation Manager.
v4.1.0 | animation | Add Frames to Existing Animation | Learn how to dynamically add new frames to an animation after it has already been created and is currently being played by sprites.
v4.1.0 | animation | Animation Complete Event | Listen for the animation complete event on a Sprite to trigger custom logic, such as spawning items or starting tweens, immediately after an animation finishes playing.
v4.1.0 | animation | Animation from Multiple Atlases | Demonstrates how to create a single animation by sequencing frames that are distributed across multiple different texture atlases.
v4.1.0 | animation | Animation from PNG Sequence | Create a looping animation using a series of individual image files and learn how to customize the duration of specific frames within the sequence.
v4.1.0 | animation | Animation Playback and Frame Monitoring | Demonstrates how to play, pause, and restart animations while visualizing the current frame selection on the source spritesheet and monitoring playback progress metrics.
v4.1.0 | animation | Animation Playback Progress | Demonstrates how to use the getProgress method to track the current playback state of a running animation, visualized using a graphics-based progress bar.
v4.1.0 | animation | Animation Random Delay | Use the delay property when playing an animation to stagger the start times across multiple sprites.
v4.1.0 | animation | Animation Repeat Event | Demonstrates how to listen for the animation repeat event to trigger logic, such as spawning objects, every time a sprite's animation completes a loop.
v4.1.0 | animation | Animation Repeat Event | Demonstrates how to use the ANIMATION_REPEAT event to trigger logic, such as spawning items, every time a sprite's looping animation completes a cycle.
v4.1.0 | animation | Animation Stop Event | This example demonstrates how to listen for the animation stop event on a sprite and trigger logic when an animation is manually halted.
v4.1.0 | animation | Animation Update Event | Trigger specific actions or logic when an animation reaches a particular frame by listening for the animation update event.
v4.1.0 | animation | Animation Yoyo Toggle | Demonstrates how to use the yoyo property to play an animation forwards and then in reverse, including how to toggle the effect at runtime.
v4.1.0 | animation | Animations from JSON | Demonstrates how to define and batch-create multiple animations simultaneously using a single JSON configuration object.
v4.1.0 | animation | Aseprite Animation Loading | Learn how to load Aseprite exported files, automatically generate animations from JSON tags, and play them on a sprite.
v4.1.0 | animation | Chained Animation | Demonstrates how to queue multiple animations to play in sequence using the chain method and play after the current animation repeat finishes.
v4.1.0 | animation | Create Animation From Canvas Texture | Demonstrates how to programmatically draw a sprite sheet onto a canvas texture, define individual frames from it, and use those frames to create a playable animation.
v4.1.0 | animation | Create Animation From Sprite Sheet | Demonstrates how to create multiple animations by selecting specific frame indices from a loaded sprite sheet and playing them on a sprite.
v4.1.0 | animation | Create Animation From Texture Atlas | Demonstrates how to generate animations by extracting specific frame sequences from a texture atlas using the generateFrameNames helper.
v4.1.0 | animation | Create Animation Without Frame Names | Demonstrates how to create a sprite animation by passing a texture atlas key directly to the animation configuration, allowing Phaser to automatically extract and numerically sort all frames within that atlas.
v4.1.0 | animation | Create Sprites from Config | Demonstrates creating multiple sprites using configuration objects that define randomized properties and complex animation behaviors like delayed playback and repeat delays.
v4.1.0 | animation | Export Animation to JSON | Demonstrates how to export specific animations or the entire global animation manager configuration into a JSON format for saving or debugging.
v4.1.0 | animation | Generate Animation Frame Numbers | Demonstrates different ways to define animation frames from a spritesheet, including using the entire sheet, specifying a range, or creating a custom sequence of frame indices.
v4.1.0 | animation | Generate Frame Names | Demonstrates how to use the generateFrameNames method to automatically create animation frames from a texture atlas by specifying prefixes, suffixes, and zero-padding for sequenced frame names.
v4.1.0 | animation | Hide Animation On Complete | Demonstrates how to use the hideOnComplete property to automatically hide a sprite once its animation finishes playing.
v4.1.0 | animation | Load Animations from JSON | Demonstrates how to load animation definitions from an external JSON file and apply them to sprites using a texture atlas.
v4.1.0 | animation | Local Sprite Animations | Demonstrates how to create animations directly on a specific Sprite, allowing it to have private animation keys that override global animations with the same name.
v4.1.0 | animation | Mixed Animation Transitions | Demonstrates how to use animation mixing to define specific delay durations when transitioning between different sprite animations.
v4.1.0 | animation | Multi Atlas Animation | Demonstrates how to load a multi-file texture atlas and create a sprite animation from its frames.
v4.1.0 | animation | On Animation Start Event | Demonstrates how to use the ANIMATION_START event to trigger logic when a sprite begins a new animation, such as synchronizing background scrolling with a character's run cycle.
v4.1.0 | animation | Pause All Animations | Demonstrates how to globally pause and resume every active sprite animation in the game using the Animation Manager.
v4.1.0 | animation | Pause Animation Instances | Demonstrates how to pause an animation globally, which stops all sprites currently using that animation instance simultaneously.
v4.1.0 | animation | Play Animation After Delay | Demonstrates how to schedule an animation to play after a specific delay in milliseconds using the playAfterDelay method.
v4.1.0 | animation | Play Animation After Random Delay | Demonstrates how to use the playAfterDelay method to restart an animation after a random time interval once it has completed.
v4.1.0 | animation | Play Animation After Repeat | Demonstrates how to use playAfterRepeat to queue an animation to start only after the current repeating animation completes its current loop, and how to chain subsequent animations.
v4.1.0 | animation | Play Animation with Config Object | Demonstrates how to play an animation using a configuration object to override or extend global animation settings, such as frameRate and repeatDelay, on individual sprites.
v4.1.0 | animation | Remove Animation Event | Demonstrates how to listen for the removal of an animation from the global Animation Manager and respond to the event.
v4.1.0 | animation | Reverse Animation | Demonstrates how to control animation playback direction using playReverse, the reverse method, and yoyo toggling.
v4.1.0 | animation | Show On Start | Demonstrates how to use the showOnStart property to automatically make a hidden Sprite visible the moment an animation begins playing.
v4.1.0 | animation | Sprite Animation Events | Listen for and respond to animation lifecycle events, including start, update, repeat, and complete, to execute logic during a sprite's playback.
v4.1.0 | animation | Staggered Animation Playback | Demonstrates how to use staggerPlay to trigger an animation across a group of sprites with an incremental time delay between each start.
v4.1.0 | animation | Staggered Animation Playback | Learn how to use staggerPlay to start animations on a group of sprites with an incremental time delay between each one, creating a wave-like visual effect.
v4.1.0 | animation | Staggered Animation Playback | Demonstrates how to use staggerPlay to trigger an animation across a large collection of Sprites with an incremental delay between each start.
v4.1.0 | animation | Staggered Cube Animations | This example demonstrates how to use staggerPlay to trigger animations across a group of sprites with a time offset, combined with grid alignment and camera effects.
v4.1.0 | animation | Start Animation from Random Frame | Demonstrates how to start playing an animation from a random frame in the sequence using the randomFrame configuration property.
v4.1.0 | animation | Tweening Animation Time Scale | This example demonstrates how to use a tween to dynamically adjust the timeScale of a sprite animation, smoothly transitioning the playback speed over time.
v4.1.0 | audio/HTML5 Audio | Audio Markers with HTML5 Audio | Demonstrates how to define and play specific segments of a single audio file using markers with the HTML5 Audio backend.
v4.1.0 | audio/HTML5 Audio | Disable Pause on Blur (HTML5 Audio) | Demonstrates how to keep HTML5 Audio playing even when the browser tab loses focus by setting the sound pauseOnBlur property to false.
v4.1.0 | audio/HTML5 Audio | HTML5 Audio Loop Delay | Demonstrates how to synchronize multiple audio stems using HTML5 Audio, including precise delay scheduling and compensation for browser playback lag.
v4.1.0 | audio/HTML5 Audio | HTML5 Audio Markers Pause and Resume | Demonstrates how to define and play audio markers, and control their playback using pause and resume methods with HTML5 Audio.
v4.1.0 | audio/HTML5 Audio | HTML5 Audio Playback and Events | Demonstrates comprehensive control of HTML5 Audio, featuring playback states, property manipulation like rate and detune, global volume management, audio sprites, and responding to sound events.
v4.1.0 | audio/HTML5 Audio | HTML5 Audio Properties | Demonstrates controlling volume, mute, playback rate, and detune for individual sounds and the global Sound Manager using HTML5 Audio. It also shows how to sync sprite animation speeds to the audio playback rate.
v4.1.0 | audio/HTML5 Audio | HTML5 Audio Seeking | Demonstrates how to set and update the playback position (seek) of HTML5 audio, including synchronizing sprite movement with audio progress and scrubbing through a track via dragging.
v4.1.0 | audio/HTML5 Audio | HTML5 Audio Sprites | Demonstrates how to load an audio sprite and play specific sound segments using HTML5 Audio.
v4.1.0 | audio/HTML5 Audio | Play Audio From Child Scene | Demonstrates how to preload an audio asset in one scene and then play it within a subsequent scene. This example specifically uses HTML5 Audio and handles audio unlocking across scene transitions.
v4.1.0 | audio/HTML5 Audio | Play HTML5 Audio | Load and play a sound file using the HTML5 Audio tag by disabling the Web Audio API in the game configuration.
v4.1.0 | audio/No Audio | Audio Loop Delay | Demonstrates how to stagger multiple looping audio tracks using the delay parameter in the sound playback configuration. It shows how to layer stems by calculating delays based on track duration and syncing visual elements to the audio loop events.
v4.1.0 | audio/No Audio | Audio Markers | How to define specific segments of an audio file using markers and play them back individually, featuring a demonstration of the No Audio sound manager.
v4.1.0 | audio/No Audio | Audio Markers Pause and Resume | Demonstrates how to define audio markers for segments of a sound file and control playback using pause and resume methods.
v4.1.0 | audio/No Audio | Audio Properties and Synchronization | Demonstrates how to control volume, mute, rate, and detune for both the global Sound Manager and individual sounds, including synchronizing sprite animation speeds and transparency with audio properties.
v4.1.0 | audio/No Audio | Audio Seeking | Demonstrates how to start audio at a specific timestamp and synchronize visual movement with playback progress, including interactive scrubbing using the seek property.
v4.1.0 | audio/No Audio | Audio Sprite with No Audio | Demonstrates loading an audio sprite via JSON and playing specific segments by name using playAudioSprite, while the game is configured with noAudio: true.
v4.1.0 | audio/No Audio | Sound Events with No Audio | Demonstrates how the Sound Manager and Sound objects still emit events and handle property changes like volume, rate, and detune even when the audio system is disabled via the game config.
v4.1.0 | audio/SID | C64 SID Player | Demonstrates how to play Commodore 64 SID music files using a plugin. Includes loading binary audio data, switching between sub-tunes, and extracting track metadata such as author and title.
v4.1.0 | audio/Web Audio | Audio Control: Volume, Mute, Rate, and Detune | Adjust volume, mute status, playback rate, and detune for individual sounds and the global Sound Manager, while syncing sprite animation speed to the audio rate.
v4.1.0 | audio/Web Audio | Audio Loop Delay | Demonstrates how to layer multiple audio stems by using sound markers and the delay property within the play configuration to synchronize looping tracks.
v4.1.0 | audio/Web Audio | Audio Marker Pause and Resume | Demonstrates how to play specific audio markers and use the pause and resume methods to control their playback state.
v4.1.0 | audio/Web Audio | Audio Markers | Define and play specific sections of a single audio file using markers to manage multiple sound effects.
v4.1.0 | audio/Web Audio | Audio Seeking | Demonstrates how to start audio at a specific timestamp and dynamically update the playback position using the seek property, including synchronizing a sprite's position with audio progress.
v4.1.0 | audio/Web Audio | Audio Sprites | Demonstrates how to load a single audio file containing multiple sound effects and play specific markers using an audio sprite JSON configuration.
v4.1.0 | audio/Web Audio | Multiple Instances of the Same Audio File | Demonstrates how to create and manage multiple independent sound instances using a single loaded audio asset.
v4.1.0 | audio/Web Audio | Play Audio File | Demonstrates how to load and play an audio file using multiple source formats for browser compatibility and how to toggle automatic pausing when the game loses focus.
v4.1.0 | audio/Web Audio | Play Audio From Child Scene | This example demonstrates how to preload audio in one scene and play it in a subsequent scene, showing that audio assets and the Sound Manager persist across scene transitions.
v4.1.0 | audio/Web Audio | Play Audio From File Pack | Demonstrates how to load and play audio using a File Pack object, which allows you to define multiple asset types in a single manifest for bulk loading.
v4.1.0 | audio/Web Audio | Play Movement Sound | Demonstrates how to trigger and manage sound effects based on player movement and interaction, including logic to prevent overlapping audio while walking.
v4.1.0 | audio/Web Audio | Play Sound on Keypress | Trigger specific audio files using keyboard input listeners and stop all active sounds using the sound manager.
v4.1.0 | audio/Web Audio | Reuse Web Audio Context | Demonstrates how to provide an externally created Web Audio context to the Phaser game configuration, allowing the audio context to persist across multiple game instances.
v4.1.0 | audio/Web Audio | Spatial Audio Following a Sprite | This example demonstrates how to set a fixed listener position and have a sound source follow a moving Sprite, automatically updating its spatial panning and volume as the sprite moves.
v4.1.0 | audio/Web Audio | Spatial Audio Moving with Player | Learn how to update the Web Audio listener position to follow a player sprite, creating a dynamic soundscape as the character moves through a world of localized audio sources.
v4.1.0 | audio/Web Audio | Web Audio Playback and Events | A comprehensive demonstration of controlling audio playback in Phaser, including play, pause, seek, volume fades, rate and detune adjustments, global sound management, and audio sprites.
v4.1.0 | cache | JSON File Loading | Demonstrates how to load an external JSON file and retrieve its content from the global JSON cache.
v4.1.0 | cache | Loading and Parsing XML Files | Demonstrates how to load an external XML file, retrieve it from the cache, and parse its content using standard DOM methods to extract data for use within the game.
v4.1.0 | cache | Loading and Retrieving Text Files | Learn how to load external text files into the Phaser Cache and retrieve their raw string content for use in your game.
v4.1.0 | camera | 16 Camera Grid | Demonstrates how to create and position multiple cameras in a grid layout to display the same scene across several viewports simultaneously.
v4.1.0 | camera | Add Camera On Click | Demonstrates how to dynamically add multiple cameras to a scene on a pointer event, creating a grid of viewports that all render the same scene objects.
v4.1.0 | camera | Camera Alpha | This example demonstrates how to adjust the transparency of a camera using its alpha property, affecting the visibility of all game objects rendered by that camera.
v4.1.0 | camera | Camera Background Color | Learn how to set a specific background color and alpha for an individual camera using RGBA values.
v4.1.0 | camera | Camera Background Color Interpolation | Learn how to smoothly transition the camera's background color between two values based on a sprite's vertical position using color interpolation.
v4.1.0 | camera | Camera Blur Shader | Demonstrates how to apply a built-in blur filter to a specific camera and use camera ignore lists to keep certain game objects sharp.
v4.1.0 | camera | Camera Bounds with Negative Coordinates | This example demonstrates how to set camera and physics world bounds using negative coordinates, allowing the camera to scroll into areas behind the (0,0) origin while following a player.
v4.1.0 | camera | Camera Center On | Use the centerOn method to snap the camera focus to specific world coordinates, demonstrated with a zoomed-in view of a large map.
v4.1.0 | camera | Camera Effect Callbacks | Demonstrates how to sequence multiple camera effects like flash, shake, and fade by using completion callbacks to trigger the next effect in a chain.
v4.1.0 | camera | Camera Effects | Demonstrates the built-in camera special effects including fading, flashing, and shaking using multiple cameras and viewports.
v4.1.0 | camera | Camera External Filter Scanline | Demonstrates applying an external shader filter to a camera and updating the shader's uniform values based on mouse input.
v4.1.0 | camera | Camera External Filters | Demonstrates applying, toggling, and combining multiple external post-processing shaders on a camera using filter controllers.
v4.1.0 | camera | Camera External Shader Filter | Demonstrates how to apply a custom post-processing shader effect to a camera using the external filters API and render nodes.
v4.1.0 | camera | Camera Fade Effect | Demonstrates how to trigger a camera fade-out effect with custom colors and durations, while using event listeners to detect when the fade starts and completes.
v4.1.0 | camera | Camera Fade In and Out | Demonstrates how to use camera fade effects to transition a scene in and out, using the fade completion event to chain effects.
v4.1.0 | camera | Camera Fade Out and In | Demonstrates how to chain camera fade effects using the camera fade completion event to transition between different scenes or images.
v4.1.0 | camera | Camera Filter | Demonstrates how to use the cameraFilter property to control which Game Objects are rendered by specific cameras, allowing for independent UI layers and isolated camera effects.
v4.1.0 | camera | Camera Filter Shader | Demonstrates applying a custom post-processing shader filter to a camera view, affecting all rendered content including background images and fixed UI elements.
v4.1.0 | camera | Camera Filters and Layer Isolation | Demonstrates how to apply external post-processing filters to specific cameras and use the ignore method to isolate which game objects are rendered by each camera.
v4.1.0 | camera | Camera Flash Effect | Trigger a camera flash effect on user input and use event listeners to respond when the flash effect begins and finishes.
v4.1.0 | camera | Camera Follow Offset | Demonstrates how to use followOffset to adjust the camera position relative to its target, shifting the view as the player moves left or right.
v4.1.0 | camera | Camera Follow Sprite | Demonstrates how to have the main camera follow a user-controlled physics sprite while constrained within specific world bounds.
v4.1.0 | camera | Camera Follow with Graphics Landscape | Create a procedurally generated landscape using the Graphics API and configure the camera to follow a Matter physics-enabled sprite across a wide world.
v4.1.0 | camera | Camera Follow with Lerp | This example demonstrates how to have multiple cameras follow a single sprite simultaneously, using different lerp (interpolation) values to achieve varying levels of smooth movement and tracking delays.
v4.1.0 | camera | Camera Follow with Zoom | Demonstrates the camera following a moving sprite with a high zoom level applied, constrained within specified world bounds.
v4.1.0 | camera | Camera Follow with Zoom and Tilemap | Demonstrates a camera following a moving sprite across a tilemap while maintaining a zoom level and staying within defined map boundaries.
v4.1.0 | camera | Camera Following with Small Bounds | Demonstrates a camera following a sprite within defined world bounds that are smaller than the game viewport in one dimension, combined with a 2x zoom level.
v4.1.0 | camera | Camera Hue Rotate Shader | This example demonstrates how to apply a post-processing hue rotation shader to the main camera, which affects the visual appearance of the entire game scene.
v4.1.0 | camera | Camera Ignore | Demonstrates how to exclude specific Game Objects from being rendered by a camera using the ignore method, useful for creating UI layers that remain static while the main camera moves or rotates.
v4.1.0 | camera | Camera Ignore Container | Demonstrates how to use multiple cameras to render different game objects by using the ignore method, specifically excluding a Container and its children from the main camera to create a stable UI overlay.
v4.1.0 | camera | Camera Ignore Containers | Demonstrates how to use the Camera ignore method to selectively hide entire Containers and all their children from being rendered by specific cameras.
v4.1.0 | camera | Camera Ignore Game Objects | Demonstrates how to use the Camera ignore method to prevent specific Game Objects from rendering in a particular camera view.
v4.1.0 | camera | Camera Ignore Group Children | Learn how to exclude specific Game Objects or entire Group contents from being rendered by a Camera to create isolated UI layers.
v4.1.0 | camera | Camera Overlap | Demonstrates creating a secondary camera that overlaps the main view to display a specific, independently scrolling area of the scene.
v4.1.0 | camera | Camera Pan to Location | Demonstrates how to use the camera pan effect to smoothly move the viewport to specific coordinates using different durations and easing functions.
v4.1.0 | camera | Camera Plasma Shader Filter | Apply a dynamic plasma shader effect to the main camera view while using smoothed keyboard controls to navigate.
v4.1.0 | camera | Camera Post-Processing Shader Effect | Demonstrates applying a full-screen post-processing shader filter to a camera, creating a visual wave distortion effect over the entire game scene.
v4.1.0 | camera | Camera Post-Processing Shader Filter | Demonstrates applying a custom shader filter to the entire camera view. The post-processing effect is applied to all rendered objects, including background elements and sprites with fixed scroll factors.
v4.1.0 | camera | Camera Shader Filter | Apply an external shader filter to a camera to process its entire rendered output, featuring a hue rotation effect and smooth camera controls.
v4.1.0 | camera | Camera Shake Effect | Learn how to apply a screen shake effect to the main camera and use the camera shake start and complete events to trigger logic.
v4.1.0 | camera | Camera Smoothed Key Control | Use the SmoothedKeyControl class to pan and zoom the camera using keyboard inputs, featuring smooth acceleration and deceleration.
v4.1.0 | camera | Camera Viewport | Demonstrates how to define the position and size of the camera's rendering area within the game canvas using the setViewport method.
v4.1.0 | camera | Camera Viewport Basics | Learn how to add a secondary camera and manipulate its basic properties including viewport size, scroll position, zoom, rotation, and background color.
v4.1.0 | camera | Camera World Points and Hit Testing | Demonstrates using getWorldPoint to convert screen coordinates into world coordinates for accurate hit detection on geometry and interactive sprites, even when the camera is zoomed, rotated, or panned.
v4.1.0 | camera | Camera World View Properties | Demonstrates how the camera's worldView rectangle tracks the visible area of the game world as you scroll and zoom using keyboard controls.
v4.1.0 | camera | Camera Zoom To and Pan | Demonstrates how to smoothly transition the camera zoom level and position simultaneously over a set duration.
v4.1.0 | camera | Cameras from Scene Configuration | This example demonstrates how to define multiple cameras directly within a Scene configuration object, including their dimensions, screen positions, and background colors.
v4.1.0 | camera | Cross Scene Object Placement | Calculate screen-space positions for UI elements in an overlay scene based on world-space coordinates in a background scene, factoring in camera panning and zoom levels.
v4.1.0 | camera | Fixed to Camera via Scroll Factor | Demonstrates how to keep a sprite stationary on the screen while the camera moves by using the setScrollFactor method.
v4.1.0 | camera | Follow Sprite with Deadzone | Demonstrates how to use a camera deadzone so that the camera only begins scrolling once the followed sprite moves outside of a defined central area.
v4.1.0 | camera | Game Camera Shader Filter | This example demonstrates how to apply a custom post-processing shader effect to the main camera view within a physics-based platformer scene.
v4.1.0 | camera | Get World Point | Convert screen coordinates into world coordinates using the camera, accounting for zoom and scroll positions.
v4.1.0 | camera | Grid of 16 Cameras with Shaders | Demonstrates creating a 4x4 grid of 16 cameras, where each individual camera applies a different post-processing shader filter to the same scene.
v4.1.0 | camera | Minimap Camera | Learn how to create a persistent minimap using a second camera. This example demonstrates camera positioning, zooming, and using the ignore method to hide specific game objects from the minimap view.
v4.1.0 | camera | Multiple Camera Scroll Views | Demonstrates using multiple cameras to view different parts of a scene simultaneously with independent horizontal, vertical, and circular scrolling offsets.
v4.1.0 | camera | Multiple Camera Viewports | Demonstrates creating and manipulating multiple cameras, each with its own viewport, zoom level, rotation, and scroll position to view the same scene.
v4.1.0 | camera | Multiple Cameras | Learn how to divide the game canvas into multiple viewports by adding and positioning several cameras within a single scene.
v4.1.0 | camera | Multiple Cameras Grid | Demonstrates how to create and arrange 32 separate cameras in a grid layout to view the same scene content.
v4.1.0 | camera | Remove Camera On Click | Demonstrates how to dynamically remove cameras from the Camera Manager using pointer input and add new cameras to specific screen coordinates.
v4.1.0 | camera | Rotate Camera | Rotate and pan the camera view using keyboard input while observing scroll coordinates and camera midpoint values.
v4.1.0 | camera | Round Pixels | Learn how to use the Camera roundPixels setting to ensure sprites are rendered on integer coordinates, preventing sub-pixel blurring even when using non-integer positions or zoom levels.
v4.1.0 | camera | Set Camera Bounds | This example demonstrates how to restrict a camera's movement to a specific rectangular area using the setBounds method, preventing it from panning outside the defined limits of the game world.
v4.1.0 | camera | Set Scroll Factor | Demonstrates how to use setScrollFactor to control the movement speed of Game Objects relative to camera scrolling, ideal for creating parallax effects or fixed UI elements.
v4.1.0 | camera | Set Small Camera Bounds | Restricts camera movement to a defined area using setBounds, allowing for horizontal scrolling while limiting vertical movement.
v4.1.0 | camera | Single Small Camera | Demonstrates how to adjust the camera viewport, zoom, and scroll position to render a scene within a smaller, specific portion of the game canvas.
v4.1.0 | camera | Tile Map Camera Shake | Demonstrates how to apply a screen shake effect to the camera while navigating a large tilemap using fixed keyboard controls.
v4.1.0 | camera | World Coordinates from Another Scene | Convert screen pointer coordinates into world coordinates using a camera reference from a different scene, accounting for that camera's specific zoom and scroll values.
v4.1.0 | camera/multi camera | Multi-Scene Camera Management | Learn how to manipulate the cameras of multiple active scenes simultaneously. A central controller scene uses tweens to move, zoom, and swap the viewports of four distinct scenes, creating dynamic layouts and transitions.
v4.1.0 | components/data | Change Data Event | Learn how to listen for changes to specific keys in a Game Object's Data Manager and react by updating text or modifying values.
v4.1.0 | components/data | Data Values | Demonstrates how to store and retrieve custom data on a Game Object, and use the 'setdata' event to respond to value changes.
v4.1.0 | components/data | Get and Set Data Values | Learn how to use the Data Manager to store and retrieve custom properties on a Game Object.
v4.1.0 | components/data | Query Data | Demonstrates how to use regular expressions to filter and retrieve specific sets of keys and values from a Game Object's Data Manager.
v4.1.0 | components/data | Set Data Event | Demonstrates how to listen for and respond to the 'setdata' event when initial data values are first added to a Game Object's Data Manager.
v4.1.0 | components/data | Set Multiple Data Values | Demonstrates how to initialize multiple data properties on a Game Object using an object and how to listen for the 'changedata' event to update UI elements.
v4.1.0 | components/data | Store Scene Data | Demonstrates how to use the Scene Data Manager to store and retrieve custom key-value pairs at the Scene level.
v4.1.0 | demoscene | Chunky Raster Bars | Demonstrates creating a classic demoscene raster effect using image tinting, staggered tween delays, and group iteration.
v4.1.0 | demoscene | Raster Carpet | Creates a classic demoscene 'raster carpet' effect using a group of tinted images animated with staggered sine-wave tweens.
v4.1.0 | demoscene | Raster Wave | Create a classic demoscene raster effect using a group of sprites with staggered sine-wave tweens and HSV color tinting.
v4.1.0 | demoscene | Vertical Raster Wave | A demoscene-style vertical raster wave effect created by tweening a group of sprites with staggered delays based on their index.
v4.1.0 | depth sorting | Ball Mesh Depth Sort | Demonstrates how to use the depth property of Game Objects to handle visual layering for 3D meshes. This example parses OBJ files, performs 3D rotations on vertices, and maps the Z-coordinate of each vertex to a sprite's depth for correct sorting.
v4.1.0 | depth sorting | Bring To Top | Demonstrates how to move a Game Object to the front of the display list, ensuring it renders on top of all other objects in the Scene.
v4.1.0 | depth sorting | Isometric Blocks | Demonstrates how to calculate isometric grid coordinates and use depth sorting to maintain visual layering while animating tiles with grid-based delays.
v4.1.0 | depth sorting | Isometric Map Depth Sorting | Demonstrates rendering an isometric map with manual tile positioning and dynamic depth sorting for moving characters and static buildings based on their Y-axis.
v4.1.0 | depth sorting | Remove From Display List | Demonstrates how to remove Game Objects from the Scene's display list at runtime using a timer and random selection.
v4.1.0 | depth sorting | Sort Game Objects by Depth | Demonstrates how to use the depthSort method to organize an array of Game Objects based on their current rendering order in the Scene.
v4.1.0 | depth sorting | Sprite Depth Sorting | Learn how to use the depth property to implement Y-sorting, allowing Game Objects to appear in front of or behind one another based on their vertical screen position.
v4.1.0 | depth sorting | Z-Index and Depth Sorting | Change the rendering order of Game Objects using the setDepth method to bring specific items to the front of the display list.
v4.1.0 | display/align | Align Bottom Center | Demonstrates how to align a Game Object to the bottom-center position inside another Game Object.
v4.1.0 | display/align | Align Bottom Right | Demonstrates how to use the BottomRight alignment helper to position one Game Object relative to the bottom-right corner of another.
v4.1.0 | display/align | Align In Bottom Left | Demonstrates how to align a Game Object to the inner bottom-left corner of another Game Object.
v4.1.0 | display/align | Align In Center | Demonstrates how to use Phaser.Display.Align.In.Center to align Game Objects to the exact center of other objects, such as zones or images.
v4.1.0 | display/align | Align In Right Center | Position a Game Object so it is aligned to the right-center interior of another Game Object.
v4.1.0 | display/align | Align In Top Center | Demonstrates how to align one Game Object to the inner top-center position of another Game Object using the Display Align utility.
v4.1.0 | display/align | Align In Top Left | Demonstrates how to position a Game Object inside the top-left corner of another Game Object using the alignment utility.
v4.1.0 | display/align | Align In Top Right | Demonstrates how to align one Game Object to the top-right corner of another using the Phaser.Display.Align utility.
v4.1.0 | display/align | In Left Center Alignment | Demonstrates using the LeftCenter alignment helper to position one Game Object relative to the middle of the left edge of another.
v4.1.0 | display/alpha | Bottom Alpha Gradient | Demonstrates how to apply a transparency gradient to an image by setting individual alpha values for its top and bottom corners.
v4.1.0 | display/alpha | Single Alpha | Demonstrates how to set the transparency level of a single image game object using the setAlpha method.
v4.1.0 | display/alpha | Top Alpha | Demonstrates setting per-vertex alpha values to create a vertical transparency gradient on an image.
v4.1.0 | display/alpha | Top Left Alpha | Demonstrates how to set the alpha transparency value specifically for the top-left corner of an image to create a gradient effect.
v4.1.0 | display/alpha | Tween Corner Alpha | Demonstrates how to independently animate the alpha transparency of individual image corners to create complex gradient transition effects.
v4.1.0 | display/blend modes | Canvas Blend Modes | Demonstrates the use of advanced blend modes, such as Add and Difference, specifically within the Canvas renderer.
v4.1.0 | display/blend modes | Circle Cut Out Blend Mode | Demonstrates using a custom WebGL blend mode to create a cut-out effect, displaying an image only within the bounds of a Graphics shape.
v4.1.0 | display/blend modes | Custom Blend Mode Tester | An interactive tool to create and test custom WebGL blend modes by defining specific source/destination factors and blend equations directly via the renderer.
v4.1.0 | display/blend modes | Custom Blend Mode with Graphics | Demonstrates how to define and register a custom WebGL blend mode and apply it to a Graphics object.
v4.1.0 | display/blend modes | Custom Separate Blend Mode | Demonstrates how to create and dynamically update a custom WebGL blend mode with separate RGB and Alpha channel blending factors.
v4.1.0 | display/blend modes | Custom WebGL Blend Mode | Learn how to create, apply, and dynamically update a custom WebGL blend mode using specific source factors, destination factors, and blend equations.
v4.1.0 | display/blend modes | Difference Blend Mode | Demonstrates the use of the Difference blend mode in Canvas mode, showing how a sprite's colors react to moving particles and a background image.
v4.1.0 | display/blend modes | Graphics Blend Mode | Demonstrates how to apply blend modes to a Graphics object to change how it interacts with underlying images.
v4.1.0 | display/blend modes | Image Blend Modes | Demonstrates how to apply Additive and Screen blend modes to individual images to create layered visual effects.
v4.1.0 | display/color | Brighten Color | Demonstrates how to use the brighten method on a Color object to increase its brightness by a percentage value.
v4.1.0 | display/color | Convert RGB Strings to Color Objects | Demonstrates how to parse CSS-style RGB and RGBA strings into Phaser Color objects, including handling of alpha channels and out-of-range values.
v4.1.0 | display/color | Convert Value to Color | Demonstrates how to use Phaser.Display.Color.ValueToColor to convert various color formats—including hex numbers, hex strings, and CSS RGB strings—into Phaser Color objects.
v4.1.0 | display/color | Darken Color | Demonstrates how to use the darken method of the Color object to decrease the lightness of a color by a specific percentage on each interaction.
v4.1.0 | display/color | Hex String to Color | Demonstrates how to convert CSS-style hexadecimal strings, in both 3-digit and 6-digit formats, into Phaser Color objects.
v4.1.0 | display/color | Interpolate Color RGB vs HSV | Compare different color interpolation methods, showing the visual difference between standard RGB blending and HSV-based transitions that preserve saturation and value.
v4.1.0 | display/color | Lighten Color | Demonstrates how to use the lighten method to increase the lightness of a Phaser Color object by a specific percentage.
v4.1.0 | display/color | Random Color | Demonstrates how to generate random colors with a minimum brightness threshold using the Phaser Color object.
v4.1.0 | display/color | Random Gray | Demonstrates how to generate random grayscale colors with a specified minimum brightness threshold.
v4.1.0 | display/masks | Container Bitmap Mask | Demonstrates how to apply a bitmap mask to a Container, effectively masking all of its children simultaneously using the filters API.
v4.1.0 | display/masks | Dynamic Texture as a Bitmap Mask | Demonstrates how to use a Dynamic Texture as a bitmap mask applied to an image via the external filter system.
v4.1.0 | display/masks | Geometry Mask From Shape | Demonstrates how to apply a hidden Shape object as a geometry mask for an image and animate the mask's rotation using a tween.
v4.1.0 | display/masks | Inverted Graphics Mask | Demonstrates how to use a Graphics object as a bitmap mask. In this example, a rectangle is used to punch an inverted hole through a semi-transparent overlay to reveal the image underneath.
v4.1.0 | display/masks | Shared Bitmap Mask | Demonstrates how to apply a single bitmap mask to multiple images simultaneously using the external filter system.
v4.1.0 | display/shaders | GLSL Shader with Camera Mask | Demonstrates applying a GLSL fragment shader to the background with real-time uniform updates while using internal camera filters to add a grunge mask effect.
v4.1.0 | display/shaders | Loading and Manipulating Shaders | Demonstrates how to load GLSL fragment shaders, pass uniforms from the game loop, and treat shader objects as GameObjects that can be tweened, scaled, and moved via input.
v4.1.0 | display/shaders | Shader and Camera Masking | Demonstrates applying different masks to both the main camera and an individual shader object simultaneously, while passing time uniforms to the fragment shader.
v4.1.0 | display/shaders | Shader Uniforms and Animation | Demonstrates how to load a custom fragment shader and pass dynamic data, such as time, to it using the setupUniforms callback.
v4.1.0 | display/shaders | Shader with Bitmap Mask | Demonstrates applying an image-based bitmap mask to a shader. The example features a dynamic fragment shader that follows the mouse pointer while being constrained to the shape of a mask.
v4.1.0 | display/tint | Atlas Frame Tint | Demonstrates applying multi-color gradient tints to individual images loaded from a texture atlas.
v4.1.0 | display/tint | Corner Tint | Demonstrates how to apply distinct colors to the four corners of a Game Object to create multi-color gradient effects.
v4.1.0 | display/tint | Per-Vertex Tint | Demonstrates how to apply individual tint colors to each of the four corners of an image to create unique gradient effects.
v4.1.0 | display/tint | Pixel Wave | Reconstruct an image using individual tinted sprites by extracting color data from a source texture and animating them into position.
v4.1.0 | display/tint | Rainbow Animated Text | Demonstrates how to create an animated rainbow effect on text and strokes by applying cycling HSV colors to the text tint properties.
v4.1.0 | display/tint | Raster Gradients with Tint | Demonstrates how to create vertical color gradients by applying different tint colors to the corners of a stretched pixel sprite.
v4.1.0 | display/tint | Single Color Tint | Learn how to apply a single color tint to a Game Object and update it dynamically using the pointer and an HSV color wheel.
v4.1.0 | display/tint | Text Tint | Apply multi-color tint gradients and fill modes to Text objects.
v4.1.0 | display/tint | Tile Sprite Tint | This example demonstrates applying multi-color corner tints to scrolling TileSprites using textures from an atlas.
v4.1.0 | display/tint | Tint and Alpha | This example demonstrates how to apply color tints and transparency levels to images simultaneously, including the use of fill tint modes.
v4.1.0 | display/tint | Tint Fill Effect | Demonstrates the difference between standard multiplicative tinting and the solid color tint fill mode on images.
v4.1.0 | display/tint | Tint Fill Modes | Demonstrates the difference between standard multiply tinting and tint fill modes, showing how to apply solid color overlays or gradients to sprites.
v4.1.0 | display/tint | Tint Modes | An interactive demonstration of various tinting modes including Multiply, Fill, Add, Screen, Overlay, and Hard Light, showing how they affect the rendering of an image.
v4.1.0 | display/tint | Tinting Multiple Images | Demonstrates how to apply different color tints to multiple Image Game Objects using the same source texture.
v4.1.0 | display/tint | Tweening Image Tint | Animate the tint of an image by using a Tween Counter to dynamically update color values over time.
v4.1.0 | events | Create Event Emitter | This example demonstrates how to create a standalone instance of the Phaser Event Emitter, register a custom event listener, and emit events with arguments.
v4.1.0 | events | Emit Events Using Symbols | This example demonstrates how to use ES6 Symbols as unique event identifiers when registering and emitting events within the Scene Event Emitter.
v4.1.0 | events | Emit Scene Event | This example shows how to use a Scene's internal EventEmitter to listen for and dispatch custom events within a Scene.
v4.1.0 | events | Event Arguments | Learn how to pass and receive multiple parameters when emitting custom events in Phaser.
v4.1.0 | events | Game Object Events | Demonstrates how Game Objects can emit and listen for custom events to trigger actions, such as changing visual properties.
v4.1.0 | events | Listen to Game Object Custom Events | Demonstrates how to bridge standard scene input events to custom events emitted directly by Game Objects, allowing objects to handle their own logic through event listeners.
v4.1.0 | events | Once Event Listener | Demonstrates how to register an event listener that automatically removes itself after being triggered a single time.
v4.1.0 | events | Turn Off Anonymous Event Handler | This example demonstrates how to remove all listeners for a specific event by calling the off method without a callback reference, which is particularly useful for stopping anonymous functions.
v4.1.0 | events | Turn Off Event Handler | Demonstrates how to programmatically remove an active event listener using the off method after a specific condition is met.
v4.1.0 | filters | Container Composite Alpha | Demonstrates the difference between standard alpha and composite alpha in containers. Setting 'filtersForceComposite' ensures a container renders as a flattened layer, preventing overlapping child elements from showing through each other.
v4.1.0 | filters | Creating a Custom Shader Filter | Demonstrates how to create and apply a custom WebGL filter by defining a fragment shader, a Filter Controller, and a RenderNode to convert a bump map into a normal map in real-time.
v4.1.0 | filters | Custom Filter with Secondary Texture Input | This example demonstrates how to create a multi-pass custom filter that uses a secondary image as a strength map to selectively control blur intensity across a Game Object.
v4.1.0 | filters | Custom Shine Filter | Learn how to apply a custom external shine filter effect to a Game Object using a specialized render node controller.
v4.1.0 | filters | Custom Shine Filter with Progress Control | Demonstrates applying a custom shine filter to an image and manually controlling its animation progress using a tween.
v4.1.0 | filters | Sprite Filter Auto-Focus | Demonstrates how filters automatically adapt to transformed Game Objects. This example applies color shifts and dynamic motion blur to multiple rotating and moving sprites.
v4.1.0 | filters/barrel | Barrel Distortion Filter on Sprites | Demonstrates applying barrel distortion filters to individual sprites with varying intensity and using focus overrides to prevent edge clipping.
v4.1.0 | filters/barrel | Barrel Distortion Text Effect | Learn how to apply and animate a barrel distortion filter to a Text object, creating a bulging fisheye visual effect.
v4.1.0 | filters/barrel | Barrel Filter FX | Apply and animate a barrel distortion filter on a Game Object to create bulging and pincushion effects.
v4.1.0 | filters/barrel | Barrel Squish Filter | Demonstrates how to apply and animate a barrel distortion filter on sprites to create a pulsing squish effect, including how to expand the filter's render area to prevent clipping.
v4.1.0 | filters/blend | Additive Blend Highlighting | Demonstrates creating glow and highlight effects by applying additive blend filters to Render Textures, including color channel manipulation and tweening filter intensity.
v4.1.0 | filters/blocky | Blocky Pixel Filter | Demonstrates applying a pixelation effect to the camera using the Blocky filter, including how to toggle the effect active state via user input.
v4.1.0 | filters/bloom | Bloom Filter Impact Effect | Demonstrates how to apply and animate a bloom filter on game objects. When a bullet hits the planet, a tween increases the bloom's blur strength to create a glowing impact visual.
v4.1.0 | filters/blur | Blur Filter Effect | Apply a blur effect to a Sprite using the filter system and animate the blur strength with a tween.
v4.1.0 | filters/blur | Container Blur Filter | Demonstrates how to apply a blur filter to a Container and animate its strength using a tween.
v4.1.0 | filters/bokeh | Particle Bokeh | Demonstrates how to apply a Bokeh filter to a particle emitter to create a depth-of-field blur effect on particles.
v4.1.0 | filters/bokeh | Tilt-Shift Camera Filter | Apply a tilt-shift post-processing effect to the camera to create a miniature-style depth-of-field blur.
v4.1.0 | filters/colormatrix | ColorMatrix Filters | Cycle through a variety of built-in ColorMatrix filter effects on a sprite, including hue rotation, saturation, brightness, sepia, and vintage photographic presets.
v4.1.0 | filters/colormatrix | ColorMatrix Hue Shift | Apply a ColorMatrix filter to a sprite and use a tween to cycle through its hue values, creating a shifting color effect.
v4.1.0 | filters/combine color matrix | Combine Color Matrix Alpha Transfer | Demonstrates how to use the Combine Color Matrix filter to map the brightness data of one texture onto the alpha channel of another, including how to invert the resulting alpha.
v4.1.0 | filters/custom wipe filter | Reveal Bottom to Top Wipe | Demonstrates how to apply a custom wipe filter to a sprite, revealing it from the bottom to the top using a progress-based tween.
v4.1.0 | filters/custom wipe filter | Reveal Left To Right | Applies a custom wipe filter to a sprite to create a reveal transition from left to right using a tweened progress value.
v4.1.0 | filters/custom wipe filter | Reveal Right to Left Wipe Effect | Demonstrates applying a custom wipe filter to a sprite to create a reveal effect from right to left, controlled by tweening the filter's progress property.
v4.1.0 | filters/custom wipe filter | Reveal Top To Bottom | Use a custom wipe filter and controller to create a top-to-bottom reveal effect on a sprite by tweening the filter's progress property.
v4.1.0 | filters/custom wipe filter | Text Reveal with Custom Wipe Filter | Demonstrates how to apply a custom wipe filter to a Text object and animate its progress using a Tween for a smooth reveal effect.
v4.1.0 | filters/displacement | Displacement Circles Filter | This example demonstrates how to apply a displacement filter to an image using a texture map and animate the distortion effect using a tween.
v4.1.0 | filters/displacement | Displacement Filter Effect | Demonstrates how to apply a displacement filter to an image using a noise texture and animate the distortion intensity with a tween.
v4.1.0 | filters/displacement | Displacement Filter with Mask | Demonstrates applying an animated displacement effect to an image combined with a blurred circular mask.
v4.1.0 | filters/glow | Double Glow Post Filter | Demonstrates how to apply and stack multiple glow post-processing filters on a single sprite to create complex multi-colored effects.
v4.1.0 | filters/glow | Glow Bitmap Text | Demonstrates how to apply a glow filter to a Bitmap Text object and animate its intensity using a tween.
v4.1.0 | filters/glow | Glow Filter | Demonstrates how to apply a glow filter effect to a Sprite, configure its distance and quality settings, and animate the outer strength using a tween.
v4.1.0 | filters/glow | Glow Graphics | Demonstrates how to apply and animate a glow filter on a Graphics object containing multiple shapes.
v4.1.0 | filters/glow | Glow Post Filter | Applies a glow post-processing filter to individual sprites, demonstrating how to configure and animate the glow strength.
v4.1.0 | filters/glow | Glow Rope Filter | Learn how to apply and animate a glow filter on a Rope game object, featuring dynamic vertex manipulation and tweened shader properties.
v4.1.0 | filters/glow | Glow Text | Demonstrates how to apply and animate an external glow filter on a Text object to create a pulsing light effect.
v4.1.0 | filters/gradient map | Gradient Map Filter | Apply a multi-stop color gradient map to an image and dynamically control its intensity using the filter's alpha property.
v4.1.0 | filters/gradient map | Palette Swap With Gradient Map | Demonstrates how to use a Gradient Map filter to dynamically swap colors on a sprite by mapping image values to a new color ramp.
v4.1.0 | filters/image light | Image Based Lighting Orbs | This example demonstrates image-based lighting (IBL) using 360-degree environment maps and normal maps. It shows how applying different blur levels to an environment map simulates varying surface roughness on objects, ranging from matte to mirror-like reflections.
v4.1.0 | filters/image light | Image Based Lighting with Normal Maps | Apply realistic lighting effects to sprites using normal maps and environment textures, featuring dynamic light source switching and rotation-aware lighting.
v4.1.0 | filters/image light | Image Light Smoothness | Demonstrates how to toggle a panorama blur filter on an environment map to create smooth image-based lighting effects on sprites using normal maps.
v4.1.0 | filters/image light | Image Light with Animated Environment | Demonstrates using a Dynamic Texture as an environment map for an Image Light filter, allowing real-time lighting effects to react to a scrolling and animated scene.
v4.1.0 | filters/key | Chroma Key Filter | Demonstrates how to use the key filter to remove a specific color from an image, making it transparent.
v4.1.0 | filters/key | Isolate Key Color | Demonstrates how to use a Key filter to isolate a specific color range within a sprite and apply color matrix transformations exclusively to that area.
v4.1.0 | filters/mask | Animated Sprite Filter Mask | Demonstrates how to use an animated sprite as a mask for another game object using the filter system, allowing you to create dynamic masking effects based on animation frames.
v4.1.0 | filters/mask | Screen Masking with Containers | Demonstrates how to use a Container, including shapes and dynamic particle emitters, as a mask for an image using external filters.
v4.1.0 | filters/normal tools | Normal Tools Facing Power | Demonstrates how to use Normal Tools to dynamically adjust the facing power of a normal map, causing surface normals to bend towards or away from the camera to alter lighting effects.
v4.1.0 | filters/normal tools | Normal Tools Filter | Demonstrates how to manipulate a normal map in real-time using the Normal Tools filter, rotating the map data before applying it to a sprite for dynamic lighting and environment mapping.
v4.1.0 | filters/normal tools | Normal Tools Ratio | Demonstrates using the Normal Tools filter with the outputRatio setting to create dynamic lighting and specular highlights by applying vector-based calculations to a normal map texture.
v4.1.0 | filters/panorama blur | Panorama Blur Filter | Use the Panorama Blur filter to pre-render blurred environment maps and apply them to normal-mapped sprites via the Image Light filter.
v4.1.0 | filters/parallel filters | Bloom with Parallel Filters | Demonstrates how to create a custom bloom effect by processing a camera through parallel filter tracks, applying threshold and blur filters to one track, and blending it back using additive blending.
v4.1.0 | filters/pixelate | Pixelate Amount | Adjust the intensity of the pixelate filter using the amount property to control the level of pixelation on a sprite.
v4.1.0 | filters/pixelate | Pixelate FX Filter | Demonstrates how to apply a pixelate filter to a Game Object and animate the pixelation intensity over time using a tween.
v4.1.0 | filters/pixelate | Pixelate Sprite Filter | Demonstrates how to apply a pixelation effect to a single Sprite and toggle its active state.
v4.1.0 | filters/pixelate | Pixelate Transition Scene | Demonstrates how to use the pixelate camera filter and tweens to create a retro-style transition effect when switching between different game scenes.
v4.1.0 | filters/quantize | Quantize Gradient Filter | Demonstrates applying the Quantize filter to a gradient object to create color banding effects, showcasing both standard quantization and the effect of dithering in HSVA mode.
v4.1.0 | filters/quantize | Quantize Image Filter | Apply a color quantization filter to an image to create a stylized, reduced-palette look. Features interactive controls for dithering, color space modes (RGB/HSV), and color step resolution.
v4.1.0 | filters/sampler | Filter Sampler | Demonstrates how to use the Sampler filter to retrieve color data from a specific pixel coordinate on an image, using the result to update the game background color.
v4.1.0 | filters/shadow | Sprite Shadow Filter | Demonstrates how to apply a drop shadow effect to a sprite and animate its properties using tweens.
v4.1.0 | filters/shadow | Text Shadow Filter | Demonstrates how to apply a dynamic drop shadow effect to a Text object using the external filter system.
v4.1.0 | filters/threshold | Threshold Filter | Apply a threshold filter to a particle emitter to create high-contrast, sharp-edged visual effects.
v4.1.0 | filters/vignette | Interactive Vignette Filter Position | Demonstrates how to add a vignette effect to a sprite and dynamically update its center position and radius using mouse input.
v4.1.0 | filters/vignette | Vignette Camera Filter | Demonstrates how to apply a vignette post-processing filter to a camera to create a cinematic darkened edge effect while the camera scrolls through a scene.
v4.1.0 | filters/vignette | Vignette Color | Demonstrates how to apply a vignette filter to a camera and customize its color and strength dynamically.
v4.1.0 | filters/vignette | Vignette Filter Strength | Demonstrates how to apply a vignette filter to a sprite and control its intensity by animating the strength property.
v4.1.0 | filters/vignette | Vignette Radius | Demonstrates how to use and animate the radius property of the Vignette effect to dynamically change the size of the vignette on Game Objects.
v4.1.0 | filters/vignette | Vignette Sprite | Demonstrates how to apply a vignette post-processing filter to an individual sprite and toggle the effect on and off.
v4.1.0 | filters/wipe | Reveal Bottom to Top Wipe | Demonstrates the wipe filter used to reveal a sprite from the bottom upwards by tweening the effect's progress property.
v4.1.0 | filters/wipe | Reveal Left to Right Wipe | Animate an image reveal using a wipe filter and a tween to control the progress property from left to right.
v4.1.0 | filters/wipe | Reveal Right to Left | Demonstrates a right-to-left wipe transition effect on a sprite using the wipe filter and a tween to control the progress property.
v4.1.0 | filters/wipe | Reveal Text | Demonstrates using the Wipe filter on a Text object with a Tween to create a progressive reveal effect for different lines of text.
v4.1.0 | filters/wipe | Reveal Top to Bottom Wipe Effect | Animate an image reveal using a Wipe filter and a tween to transition the effect from top to bottom.
v4.1.0 | filters/wipe | Wipe Bottom To Top Filter | Demonstrates how to apply a wipe transition effect to a sprite, revealing it from the bottom upwards by tweening the filter's progress property.
v4.1.0 | filters/wipe | Wipe Filter to Pointer | Use a Wipe filter on a sprite and link its progress to the mouse pointer position to create an interactive transition effect between two images.
v4.1.0 | filters/wipe | Wipe Left To Right Filter | Demonstrates how to apply and animate a wipe filter effect on a sprite from left to right using a tween.
v4.1.0 | filters/wipe | Wipe Right To Left | Demonstrates how to apply a wipe filter to a sprite to reveal or hide it from right to left using a tween to control the effect's progress.
v4.1.0 | filters/wipe | Wipe Scene Transition | Demonstrates how to transition between scenes using a camera wipe filter by syncing the filter progress with the Scene Transition update callback.
v4.1.0 | filters/wipe | Wipe Top to Bottom | Apply a top-to-bottom wipe filter effect to a sprite, controlled by a tween animation.
v4.1.0 | filters/wipe | Wipe Width | This example demonstrates how to adjust the wipeWidth property of a Wipe filter to control the softness or feathering of the transition edge.
v4.1.0 | game config | Clear Before Render | Demonstrates how to disable canvas clearing between frames using the clearBeforeRender and preserveDrawingBuffer configuration settings to create persistent motion trails.
v4.1.0 | game config | Custom Canvas | Demonstrates how to provide an existing HTML5 Canvas element to the Phaser game configuration instead of allowing Phaser to create its own.
v4.1.0 | game config | Custom Console Banner Colors | Demonstrates how to customize the text and background colors of the Phaser startup banner shown in the browser console, as well as how to hide the Phaser version info.
v4.1.0 | game config | Custom WebGL Canvas | Demonstrates how to provide a pre-existing canvas element and a manually created WebGL context to the Phaser Game configuration.
v4.1.0 | game config | Custom WebGL2 Canvas and Context | Demonstrates how to provide Phaser with a pre-existing HTML canvas and a manually created WebGL2 context using specific configuration attributes.
v4.1.0 | game config | Game Background Transparency | Demonstrates how to configure the game canvas with transparency using the backgroundColor and transparent properties, allowing HTML elements behind the game to show through.
v4.1.0 | game config | Game Destroy | Demonstrates how to programmatically shut down and destroy a Phaser game instance, including removing the canvas, and then re-instantiate the game.
v4.1.0 | game config | Game Destroy With Multi Scenes | Demonstrates how to destroy a running game instance containing multiple active scenes and then re-initialize it upon user interaction.
v4.1.0 | game config | Game RNG Seed | Demonstrates how to use a fixed seed in the Game Configuration to produce deterministic, repeatable results across various random number generation methods.
v4.1.0 | game config | Game Title Configuration | Shows how to define a custom game title in the global configuration and access it via the game config property.
v4.1.0 | game config | Game URL and Title Configuration | Demonstrates how to define a title and URL in the game configuration and access those values from within a scene.
v4.1.0 | game config | Game Version and Title | Demonstrates how to define a title and version number in the game configuration and access them through the game config object.
v4.1.0 | game config | Headless Renderer | Configure the game to use the Phaser.HEADLESS renderer type, allowing the game loop and logic to run without rendering any visual output to the screen.
v4.1.0 | game config | Hide Console Banner | Demonstrates how to disable the Phaser version and renderer information banner that typically appears in the browser console when the game starts.
v4.1.0 | game config | Hide Phaser From Console Banner | Learn how to use the game configuration to remove the Phaser library name and version number from the browser console startup banner.
v4.1.0 | game config | Multiple Game Instances | Demonstrates how to run two completely independent Phaser game instances simultaneously on the same web page, each with its own configuration and Scenes.
v4.1.0 | game config | Pixel Art Mode | Demonstrates how to enable pixel art mode in the game configuration to disable texture smoothing, keeping scaled images, tilemaps, and text crisp and sharp.
v4.1.0 | game config | Round Pixels | Demonstrates how the roundPixels configuration setting ensures Game Objects are rendered at whole integer pixel coordinates, preventing sub-pixel blur even when positions use decimal values.
v4.1.0 | game config | Transparent Game Canvas | Configure a Phaser game to have a transparent canvas, allowing the underlying HTML page or CSS background to show through the scene.
v4.1.0 | game objects/bitmaptext/dynamic | Bitmap Text Following a Path | Demonstrates how to use a display callback with Dynamic Bitmap Text to position individual characters along a complex curved path.
v4.1.0 | game objects/bitmaptext/dynamic | Display Callback Rotation Effect | Demonstrates using a display callback on Dynamic Bitmap Text to apply rotation to individual characters.
v4.1.0 | game objects/bitmaptext/dynamic | Display Callback Wibble Effect | Demonstrates how to use a display callback with Dynamic Bitmap Text to manipulate individual character positions in real-time for a jittering movement effect.
v4.1.0 | game objects/bitmaptext/dynamic | Dynamic Bitmap Text Display Callback | Demonstrates using display callbacks to manipulate individual character properties such as position and color in real-time to create custom text effects like rainbow waves and jiggling specific characters.
v4.1.0 | game objects/bitmaptext/dynamic | Dynamic Bitmap Text Display Callback | Demonstrates how to use a display callback to manipulate individual character properties in a Dynamic Bitmap Text object, creating a custom movement effect based on character index.
v4.1.0 | game objects/bitmaptext/dynamic | Dynamic Bitmap Text Parallax | Shows how to apply different scroll factors to Dynamic Bitmap Text objects to create a parallax depth effect using the Canvas renderer.
v4.1.0 | game objects/bitmaptext/dynamic | Dynamic Bitmap Text Tinting | Demonstrates how to use a display callback to apply dynamic, per-character tinting effects to a Dynamic Bitmap Text object using an HSV color wheel.
v4.1.0 | game objects/bitmaptext/dynamic | Vertical Bitmap Text Scroller | Demonstrates how to create a vertical scrolling text effect using DynamicBitmapText and the scrollY property to move a multi-line string within a fixed area.
v4.1.0 | game objects/bitmaptext/retro font | Retro Font from Image | Create a dynamic bitmap font by parsing a sprite sheet containing retro-style characters and updating the text content in real-time.
v4.1.0 | game objects/bitmaptext/retro font | Retro Font Scroll with Display Callback | Demonstrates using a display callback to manipulate individual character positions in a scrolling Dynamic Bitmap Text object, creating a custom sine wave animation effect.
v4.1.0 | game objects/bitmaptext/retro font | Retro Font with Dynamic Text | Demonstrates how to create a Bitmap Text object from an image-based retro font and update its content dynamically in the update loop.
v4.1.0 | game objects/bitmaptext/retro font | Retro Text Mega Scroll | Demonstrates creating a bitmap font from an image sheet and animating multiple lines of scrolling text using the scrollX property for a classic retro effect.
v4.1.0 | game objects/bitmaptext/retro font | Retro Text Scroll | Demonstrates how to create a scrolling marquee effect using Dynamic Bitmap Text and a retro font parsed from a sprite sheet.
v4.1.0 | game objects/bitmaptext/retro font | Scrolling Retro Text | Create a classic horizontal marquee scrolling effect using a Retro Font and dynamic bitmap text.
v4.1.0 | game objects/bitmaptext/retro font | Tinted Retro Text | Demonstrates how to create a Bitmap Font from an image sheet using RetroFont.Parse and apply dynamic, per-character color tinting through a display callback.
v4.1.0 | game objects/bitmaptext/static | Bitmap Text from Texture Atlas | Demonstrates how to create and use Bitmap Fonts where the font textures are stored inside a texture atlas frame rather than as standalone images.
v4.1.0 | game objects/bitmaptext/static | Bitmap Text from Texture Atlas | Demonstrates how to initialize and display a Bitmap Text object using font glyphs stored as a frame within a larger texture atlas.
v4.1.0 | game objects/bitmaptext/static | Bitmap Text in Canvas Mode | Demonstrates rendering and animating bitmap fonts using the Canvas renderer, including dynamic text updates and tweening properties like font size and scale.
v4.1.0 | game objects/bitmaptext/static | Bitmap Text Origin | Demonstrates how setting the origin (anchor point) affects the positioning and alignment of Bitmap Text objects relative to their coordinates.
v4.1.0 | game objects/bitmaptext/static | Bitmap Text Origin and Scale | Learn how to center Bitmap Text by setting its origin and apply scaling to change its size relative to its center point.
v4.1.0 | game objects/bitmaptext/static | Bitmap Text Rotation | Demonstrates how to rotate a Bitmap Text object using a tween and update its string content dynamically on user input.
v4.1.0 | game objects/bitmaptext/static | Bitmap Text Scaling | Learn how to manipulate the scale of a Bitmap Text object using independent tweens for the X and Y axes.
v4.1.0 | game objects/bitmaptext/static | BitmapText Blend Mode | This example demonstrates how to apply a blend mode to a BitmapText object and animate its scale over a background image.
v4.1.0 | game objects/bitmaptext/static | BitmapText Drop Shadow | Demonstrates how to apply a drop shadow effect to static BitmapText objects, with control over the shadow's offset, color, and alpha.
v4.1.0 | game objects/bitmaptext/static | BitmapText Max Width | This example demonstrates how to use the setMaxWidth method to automatically wrap BitmapText across multiple lines once it reaches a specific width, and shows how the maxWidth property can be dynamically updated using a Tween.
v4.1.0 | game objects/bitmaptext/static | BitmapText Max Width and Dynamic Content | Demonstrates how BitmapText behaves when content is appended frame-by-frame while a maximum width constraint is active.
v4.1.0 | game objects/bitmaptext/static | BitmapText Origin and Scale | Learn how to set the origin and scale of a BitmapText object, including negative scaling to flip text, and visualize its global bounds.
v4.1.0 | game objects/bitmaptext/static | BitmapText Width and Height with Scaling | Demonstrates how the width and height properties of a BitmapText object reflect its dimensions as it is scaled via tweens.
v4.1.0 | game objects/bitmaptext/static | Change Bitmap Text Font Size | Learn how to dynamically update the font size of a static BitmapText object using pointer events.
v4.1.0 | game objects/bitmaptext/static | Change BitmapText Font | Demonstrates how to swap the font of a single BitmapText object at runtime using the setFont method.
v4.1.0 | game objects/bitmaptext/static | Get Bitmap Text Bounds | Demonstrates how to use the getTextBounds method to retrieve the dimensions and global position of BitmapText objects, useful for layout and alignment.
v4.1.0 | game objects/bitmaptext/static | Get BitmapText Bounds | Demonstrates how to retrieve the world-space bounding box of a BitmapText object, accounting for scale and origin, and visualize it using a Graphics stroke.
v4.1.0 | game objects/bitmaptext/static | Large Content Bitmap Text | Demonstrates rendering a large amount of text from an external file using a single BitmapText object with vertical scrolling.
v4.1.0 | game objects/bitmaptext/static | Multi Line Bitmap Text Alignment | Demonstrates how to align multiple lines of text within a single BitmapText object using right-alignment.
v4.1.0 | game objects/bitmaptext/static | Multi-Line Bitmap Text | Learn how to display multiple lines of text within a single BitmapText object using newline characters.
v4.1.0 | game objects/bitmaptext/static | Multiline Bitmap Text Bounds | Learn how to use the getTextBounds method to calculate the dimensions of a multiline Bitmap Text object and visualize its global bounding box.
v4.1.0 | game objects/bitmaptext/static | Scaled BitmapText Bounds | Demonstrates how to use getTextBounds to accurately retrieve the global size and position of a BitmapText object while it is being dynamically scaled.
v4.1.0 | game objects/bitmaptext/static | Static and Dynamic Bitmap Text | Demonstrates how to load multiple bitmap fonts and display static, multi-line, and dynamically updated bitmap text.
v4.1.0 | game objects/bitmaptext/static | Tinted Bitmap Text | Demonstrates how to apply color tints to Bitmap Text, including multi-color gradient tints for each corner of the object.
v4.1.0 | game objects/blitter | Blitter Alpha | Demonstrates how to adjust the alpha transparency of individual Bobs within a Blitter object.
v4.1.0 | game objects/blitter | Blitter and Camera Controls | Demonstrates how to render a large grid of 10,000 sprites using a Blitter object and navigate the scene using keyboard-driven camera panning and zooming.
v4.1.0 | game objects/blitter | Blitter Benchmark | Demonstrates rendering performance by batching large numbers of static images using a Blitter object, with the ability to add 250 new bobs on every pointer click.
v4.1.0 | game objects/blitter | Blitter Bob Frame Objects | Demonstrates how to create Bobs within a Blitter object by passing specific Texture Frame objects instead of string keys.
v4.1.0 | game objects/blitter | Blitter Bob Tweens | Demonstrates how to apply tweens to individual bobs within a Blitter object for high-performance movement and animation.
v4.1.0 | game objects/blitter | Blitter Camera Controls (Canvas) | Demonstrates a Blitter object with numerous items being panned and zoomed using camera controls while running in the Canvas renderer.
v4.1.0 | game objects/blitter | Blitter Global Alpha | Demonstrates how to set a global alpha transparency for a Blitter object and how it affects individual bobs, including those with their own local alpha settings.
v4.1.0 | game objects/blitter | Blitter Physics Benchmark | A stress test demonstrating the performance of the Blitter object while animating thousands of bobs with custom gravity and bouncing logic, featuring a visual object counter.
v4.1.0 | game objects/blitter | Blitter Twist Scroller | A high-performance retro demo effect using the Blitter object to render animated text. It demonstrates scanning a font into raw data and applying complex mathematical transformations—such as sine waves, bounces, rotations, and cylinder distortions—to the individual 'bobs' forming the letters.
v4.1.0 | game objects/blitter | Blitter with Multi-Atlas | Shows how to use a Blitter object to display multiple bobs, each using a different frame from a Texture Packer multi-atlas.
v4.1.0 | game objects/blitter | Canvas Blitter Benchmark | A performance test demonstrating the Blitter object in Canvas mode, featuring hundreds of animated bouncing sprites with manual gravity, bounce physics, and an interactive counter.
v4.1.0 | game objects/blitter | Create Bobs from Callback | Demonstrates how to use a custom callback function to programmatically position and initialize multiple bobs inside a Blitter game object.
v4.1.0 | game objects/blitter | Interactive Blitter Benchmark | Stress test the Blitter object by clicking to rapidly add hundreds of new objects using multiple atlas frames.
v4.1.0 | game objects/blitter | Multiple Blitter Bobs | Demonstrates how to create a Blitter game object and add multiple individual 'bob' instances to it at different positions using a single texture.
v4.1.0 | game objects/blitter | Multiple Blitter Bobs from a Texture Atlas | Demonstrates how to create multiple bobs within a single Blitter object using different frames from a shared texture atlas, including relative positioning and horizontal flipping.
v4.1.0 | game objects/blitter | Single Atlas Frame Bob | Demonstrates how to create a Blitter Bob using a specific frame from a loaded texture atlas.
v4.1.0 | game objects/blitter | Single Blitter Bob | Demonstrates how to create a Blitter object and add a single Bob instance to it at a specific coordinate.
v4.1.0 | game objects/capture frame | Capture Frame as Texture | Demonstrates how to snapshot the current render stage into a texture using captureFrame, then display that texture in other Game Objects with applied filters and transformations.
v4.1.0 | game objects/capture frame | Underwater Displacement with Capture Frame | Demonstrates using CaptureFrame to snapshot scene content and applying an animated displacement filter via a RenderTexture to create a wavy underwater effect.
v4.1.0 | game objects/container | Add Array of Sprites to Container | Demonstrates how to add multiple Game Objects to a Container simultaneously using an array and shows how transformations applied to the Container affect all its children collectively.
v4.1.0 | game objects/container | Add Array of Sprites to Container at Index | Demonstrates how to add multiple Game Objects to a Container simultaneously while specifying their insertion index in the display list.
v4.1.0 | game objects/container | Add Emitter to Container | Demonstrates how to add a Particle Emitter to a Container and apply transformations like rotation to the entire group.
v4.1.0 | game objects/container | Add Sprite To Container | Demonstrates how to add multiple sprites as children of a Container, showing how child positions and transformations remain relative to the parent.
v4.1.0 | game objects/container | Add TileSprite to Container | Demonstrates how to add a TileSprite inside a Container and animate its tile position properties while nested.
v4.1.0 | game objects/container | Animated Sprites in a Container | Demonstrates playing animations on multiple sprites grouped inside a Container and applying transforms to the container itself.
v4.1.0 | game objects/container | Arcade Physics Sprite in Container | Demonstrates how Arcade Physics bodies interact when nested inside a Container, featuring collision detection, velocity, and world bounds between standard sprites and containerized ones.
v4.1.0 | game objects/container | Arcade Physics with Containers | Demonstrates how to apply an Arcade Physics body to a Container. It highlights the importance of manually setting the container size before enabling physics to ensure the body correctly matches the grouped sprites.
v4.1.0 | game objects/container | Camera and Container Transform Test | Demonstrates how nested transformations inside a Container interact with Camera properties like zoom, rotation, and scroll while maintaining accurate input detection.
v4.1.0 | game objects/container | Character Assembly with Containers | Demonstrates how to build a complex character by adding multiple individual sprite parts from a texture atlas into a single Container.
v4.1.0 | game objects/container | Container Alpha | Demonstrates how setting the alpha transparency on a Container affects all of its children simultaneously, even when children have their own individual alpha values.
v4.1.0 | game objects/container | Container and Child Input | Demonstrates how to enable input handling for both a Container and its individual child objects simultaneously, including using a custom shape for the container's hit area.
v4.1.0 | game objects/container | Container As Mask | Demonstrates using a complex, nested Container hierarchy as a dynamic mask for a Sprite, featuring animated transformations of parent and child containers.
v4.1.0 | game objects/container | Container Child Blend Modes | This example demonstrates how individual Game Objects inside a Container can maintain their own unique blend modes when rendered.
v4.1.0 | game objects/container | Container Child Input | Demonstrates how to handle input events for sprites contained within a moving, scaled Container. Clicking a sprite changes its tint while the parent container moves across the screen.
v4.1.0 | game objects/container | Container Child Order | Demonstrates how to manipulate the rendering depth of Game Objects inside a Container using the bringToTop method.
v4.1.0 | game objects/container | Container Depth | Demonstrates how a Container and its children interact with the Scene display list depth, showing how multiple sprites can be grouped and transformed as a single unit above a background image.
v4.1.0 | game objects/container | Container Hit Area | Defines a custom circular hit area for a Container to handle pointer events for a group of Game Objects.
v4.1.0 | game objects/container | Container Hit Area from Size | Learn how to make a Container interactive by manually setting its size to match its children. This enables the Container to detect pointer events like hover and click within the defined dimensions.
v4.1.0 | game objects/container | Container Inverse Kinematics | Demonstrates nested Containers and how rotation and scale transformations propagate through a multi-jointed parent-child hierarchy to create complex animations.
v4.1.0 | game objects/container | Container Mask | Demonstrates how to apply a mask to a Container and its entire hierarchy of nested children, allowing for complex clipped animations.
v4.1.0 | game objects/container | Container Placement | Demonstrates how child objects and nested containers are positioned relative to their parent container's origin.
v4.1.0 | game objects/container | Container Scroll Factor | Demonstrates how to set different scroll factors on Containers to create parallax effects as the camera moves.
v4.1.0 | game objects/container | Container Trail with Shared Children | Demonstrates creating a complex twirl effect by disabling container exclusivity, allowing multiple Containers to share and transform the same set of sprites simultaneously.
v4.1.0 | game objects/container | Container with Camera Zoom | Demonstrates how Containers interact with camera zoom and movement controls, featuring nested sprites and interactive camera navigation using SmoothedKeyControl.
v4.1.0 | game objects/container | Container with Text and Sprite | Grouping a Sprite and a Text object within a Container to demonstrate unified scaling and tweening of multiple game objects.
v4.1.0 | game objects/container | Container World Transform Matrix | Demonstrates how to use a Transform Matrix to calculate the global (world) position, scale, and rotation of a Game Object nested within multiple containers.
v4.1.0 | game objects/container | Create Container | Demonstrates how to group multiple images into a Container and apply transforms, such as rotation, to the entire group at once.
v4.1.0 | game objects/container | Draggable Container | Demonstrates how to enable drag-and-drop functionality for a Container, allowing multiple game objects to be moved together as one interactive unit.
v4.1.0 | game objects/container | Get Bounds of Nested Container Objects | Demonstrates how to retrieve the world-space bounding box for Game Objects nested inside a rotated Container, accounting for parent transformations as well as local rotation, scale, and origin.
v4.1.0 | game objects/container | Get Child World Position | Demonstrates how to calculate the global world coordinates of a child object inside a moving Container using the local transform matrix.
v4.1.0 | game objects/container | Input on Scaled Container Sprites | Demonstrates interactive input detection on a sprite with negative scaling and a custom origin inside a Container.
v4.1.0 | game objects/container | Input Overlap in Nested Containers | Demonstrates pointer input detection and hover events for interactive Sprites nested within multiple levels of Containers.
v4.1.0 | game objects/container | Inside Container Vs Outside Container | A visual comparison of how rotation and scale transformations affect Game Objects when they are placed directly in the Scene versus when they are nested inside single or multiple parent Containers.
v4.1.0 | game objects/container | Matter Physics Container | Demonstrates how to apply a Matter Physics body to a Container. Note that you must define the container size using setSize before enabling the physics body.
v4.1.0 | game objects/container | Matter Physics Container and Camera Follow | Demonstrates how to apply a Matter physics body to a Container by setting an explicit size and configuring the camera to follow the container as it moves through the world.
v4.1.0 | game objects/container | Matter Physics Sprite in Container | Demonstrates how to apply Matter.js physics to a specific Game Object that is a child of a Container.
v4.1.0 | game objects/container | Multi-Camera Container Input | Demonstrates how input events function correctly across multiple cameras with varying zoom, rotation, and scroll settings, specifically focusing on interactive Sprites inside a Container.
v4.1.0 | game objects/container | Nested Container Input | Demonstrates how to handle input events on a Sprite that is nested inside multiple levels of Containers.
v4.1.0 | game objects/container | Nested Container Input | Demonstrates input event handling for interactive Game Objects nested within multiple layers of parent Containers, showing how hit areas correctly account for nested transformations like rotation and scale.
v4.1.0 | game objects/container | Nested Container Transforms | Demonstrates how transformations like rotation and position are inherited across single and multiple levels of nested Containers.
v4.1.0 | game objects/container | Nested Container Visibility | Demonstrates how toggling the visibility of a nested container affects all children within it, including images and other nested containers.
v4.1.0 | game objects/container | Nested Get Bounds Test | Demonstrates how to accurately calculate the world-space bounds of a sprite nested inside multiple transformed containers using the getBounds method.
v4.1.0 | game objects/container | Non-Exclusive Container Children | Demonstrates how to render the same sprites multiple times by adding them to multiple Containers using the setExclusive(false) property, combined with staggered tweens for a complex visual effect.
v4.1.0 | game objects/container | Non-Exclusive Containers | Demonstrates how to add the same Game Object to multiple containers simultaneously by disabling exclusivity, allowing a single object to be rendered in multiple locations with different transformations.
v4.1.0 | game objects/container | Non-Exclusive Containers | Demonstrates using non-exclusive containers to add the same Game Objects to multiple container parents, allowing a single sprite to be rendered multiple times with different transforms.
v4.1.0 | game objects/container | Non-Exclusive Containers with Shared Sprites | Demonstrates using setExclusive(false) to add the same sprite instances to multiple containers, combined with staggered container tweens to create a complex visual twirl effect.
v4.1.0 | game objects/container | Non-Exclusive Shared Container Children | Demonstrates using the setExclusive(false) method to allow multiple Containers to share and render the same set of Sprites simultaneously, creating complex visual effects with additive blending and staggered tweens.
v4.1.0 | game objects/container | Rotated Container Input | Demonstrates how input events function correctly for interactive Game Objects placed inside a rotated Container.
v4.1.0 | game objects/container | Rotating a Container | This example shows how rotating a Container automatically rotates all of its child Game Objects, such as images and text, as a single group.
v4.1.0 | game objects/container | Twirl Effect with Non-Exclusive Containers | Demonstrates creating a complex visual effect by adding the same sprites to multiple non-exclusive containers and applying staggered tween animations.
v4.1.0 | game objects/container | Twirl with Non-Exclusive Containers | Demonstrates the use of non-exclusive containers to share the same set of sprites across multiple container instances, creating a complex twirling effect through staggered tweens.
v4.1.0 | game objects/display list | Add to Container | Demonstrates how to dynamically create Sprites and add them to a Container object on user input, while tracking the container's size.
v4.1.0 | game objects/display list | Add To Display List | Demonstrates how to manually add a Game Object to a Scene's display list using the addToDisplayList method after instantiating it with a constructor.
v4.1.0 | game objects/display list | Move Game Objects Between Containers | Demonstrates how to dynamically transfer Game Objects from one Container to another at runtime, updating their parent and tracking container sizes.
v4.1.0 | game objects/display list | Move Sprites Between Layers | This example demonstrates how to move Game Objects between different Layer containers. Clicking a sprite transfers it from one Layer to another, updating the display list hierarchy.
v4.1.0 | game objects/display list | Moving Objects Between Scene and Container | Demonstrates how to transfer Game Objects between the global Scene display list and a Container, showing how parentage and list sizes automatically update.
v4.1.0 | game objects/display list | Moving Sprites Between Display List and Layer | Learn how to move Game Objects between the Scene's main display list and a Layer. This example shows how to use layer.add and addToDisplayList to transfer objects between containers.
v4.1.0 | game objects/display list | Remove From Display List | Demonstrates how to remove Game Objects from the Scene's display list using the removeFromDisplayList method upon user interaction.
v4.1.0 | game objects/display list | Swap Game Objects Between Containers | Demonstrates how to move sprites between different Container instances dynamically and track container child counts.
v4.1.0 | game objects/dom element | CSS Styled DOM Text | Demonstrates how to load an external CSS file and apply styles to DOM elements using class names, while treating them as game objects that can be rotated and animated with tweens.
v4.1.0 | game objects/dom element | Div Depth | This example demonstrates how to use DOM Game Objects and control their rendering order relative to each other using the setDepth method.
v4.1.0 | game objects/dom element | DOM Element 3D Rotation | Demonstrates how to apply 3D rotation and perspective to a DOM Game Object and animate the rotation using a Tween.
v4.1.0 | game objects/dom element | DOM Element Arcade Physics | Demonstrates how to integrate a DOM element into the Arcade Physics system and move it using keyboard controls.
v4.1.0 | game objects/dom element | DOM Element Blend Modes | Demonstrates how to apply CSS blend modes to DOM Game Objects, allowing them to interact visually with underlying scene content.
v4.1.0 | game objects/dom element | DOM Element Camera Movement | Demonstrates how DOM elements interact with camera movement, featuring parallax scroll factors and 3D CSS rotations.
v4.1.0 | game objects/dom element | DOM Element CSS Style Object | Demonstrates how to create a DOM element and apply multiple CSS styles to it using a JavaScript style object.
v4.1.0 | game objects/dom element | DOM Element from Div | Demonstrates how to create a standard HTML div, style it, and add it to the scene as a DOM Game Object. It also shows how to apply transformations and nest the DOM element within a Phaser Container.
v4.1.0 | game objects/dom element | DOM Element in a Container | Demonstrates how DOM elements behave when parented to a Container, including the inheritance of rotation and scale transformations.
v4.1.0 | game objects/dom element | DOM Element in a Container | Demonstrates placing a DOM element inside a Container and applying rotations and scale transformations using Tweens.
v4.1.0 | game objects/dom element | DOM Element Input Form | Demonstrates how to integrate HTML input forms into a Phaser scene, including handling form events, retrieving input values, and combining DOM elements with interactive, draggable game objects.
v4.1.0 | game objects/dom element | DOM Element Origin and Tweens | Demonstrates setting the origin of a DOM element and applying tweens for rotation and scaling, while keeping it synchronized with the game canvas.
v4.1.0 | game objects/dom element | DOM Element Rotation and Scale | Demonstrates how to apply rotation, scaling, and origin settings to a DOM element and animate it using a Tween.
v4.1.0 | game objects/dom element | DOM Element Skew | Demonstrates applying and tweening skewX and skewY properties on a DOM Element Game Object.
v4.1.0 | game objects/dom element | DOM Element Transformation | Demonstrates creating a styled HTML div as a DOM Element and applying rotation and scale transforms using the Tween Manager.
v4.1.0 | game objects/dom element | DOM Element Video | Demonstrates how to integrate a native HTML5 video element into a Phaser scene using a DOM Element game object and handle its lifecycle events.
v4.1.0 | game objects/dom element | Form Input | Demonstrates how to create an interactive HTML login form as a DOM element, capture input values from text fields, and apply Phaser tweens to the form container.
v4.1.0 | game objects/dom element | Physics on DOM Elements | Demonstrates how to apply an Arcade Physics body to a DOM Element, enabling it to move, bounce, and collide with other game objects like sprites.
v4.1.0 | game objects/dom element | Sleeping Scene DOM Element Test | Demonstrates how DOM Game Objects behave when a Scene is put to sleep or switched during gameplay.
v4.1.0 | game objects/extern | Three.js Filters | Demonstrates applying Phaser post-processing filters, such as blur, to a 3D Three.js scene integrated via an Extern Game Object.
v4.1.0 | game objects/extern | Three.js Integration using Extern | Demonstrates how to integrate Three.js within a Phaser scene using the Extern game object to render 3D meshes alongside 2D sprites while sharing the same WebGL context.
v4.1.0 | game objects/gradient | Advanced Gradient Offsets and Shapes | Demonstrates how different gradient shape modes, such as bilinear and symmetric conic, create unique visual effects like mirroring and kaleidoscopic patterns when their offsets and shapes are manipulated over time.
v4.1.0 | game objects/gradient | Animate Gradient Offset | Demonstrates animating the offset property of a radial gradient and using captureFrame to apply it as a dynamic displacement map for an image.
v4.1.0 | game objects/gradient | Animated Gauge with Conic Gradient | Create a color-changing gauge by masking an asymmetrical conic gradient with an animated Graphics arc.
v4.1.0 | game objects/gradient | Asymmetric Conic Gradient | This example demonstrates how to create and animate an asymmetric conic gradient, allowing for off-center focal points and custom transition angles.
v4.1.0 | game objects/gradient | Bilinear Gradient Shape | Demonstrates the bilinear shape mode for gradients, allowing for two-dimensional color transitions based on a defined start point and shape coordinate.
v4.1.0 | game objects/gradient | Conic Symmetric Gradient Shape | Demonstrates how to create and animate a symmetric conic gradient object, featuring smooth color transitions radiating from a central point.
v4.1.0 | game objects/gradient | Generating Normal Maps from Gradients | Learn how to programmatically create a spherical normal map by combining RGB gradient layers into a Dynamic Texture, then apply it to a light filter for real-time environment mapping.
v4.1.0 | game objects/gradient | Gradient Flare | Demonstrates how to create a radial lens flare effect using the Gradient Game Object with multiple color bands and an animated offset.
v4.1.0 | game objects/gradient | Gradient Repeat Mode Truncate | This example demonstrates the Truncate repeat mode for Gradient Game Objects, where the gradient is constrained within its defined shape without repeating or extending beyond its bounds.
v4.1.0 | game objects/gradient | Gradient Repeat Mode: Extend | Demonstrates the 'Extend' repeat mode for gradients, where the edge colors are stretched to fill the remainder of the Game Object's area.
v4.1.0 | game objects/gradient | Gradient Repeat Mode: Sawtooth | Demonstrates the Sawtooth repeat mode for a Gradient Game Object, creating a repeating linear pattern that resets to the start color at the beginning of every cycle.
v4.1.0 | game objects/gradient | Gradient Repeat Mode: Triangular | Demonstrates the triangular repeat mode for gradients, which creates a mirrored back-and-forth pattern as the gradient repeats across the Game Object.
v4.1.0 | game objects/gradient | Linear Gradient Shape | Demonstrates creating and animating a linear gradient Game Object, including adjusting its position and rotation.
v4.1.0 | game objects/gradient | Radial Gradient Shape Mode | Demonstrates how to create and animate a radial gradient using shapeMode, including color band configuration and center point positioning.
v4.1.0 | game objects/graphics | 3D Wireframe OBJ Viewer | Demonstrates how to parse 3D .obj files and render them as animated wireframe objects using Phaser Graphics and manual vertex rotation math.
v4.1.0 | game objects/graphics | 3D Wireframe Teapot | Demonstrates parsing a 3D .obj model and rendering it as a rotating wireframe using Graphics primitives with manual vertex rotation and back-face culling.
v4.1.0 | game objects/graphics | Arc Stroke | Demonstrates how to draw and stroke circular arcs using Graphics, including setting line widths, colors, and arc directions.
v4.1.0 | game objects/graphics | Atari Graphics Lines | Demonstrates drawing complex vector shapes and stylized outlines using Graphics path commands like beginPath, moveTo, lineTo, and strokePath.
v4.1.0 | game objects/graphics | Circle Overlap | Learn how to create and animate multiple Graphics objects containing concentric circles to produce a dynamic overlapping visual effect.
v4.1.0 | game objects/graphics | Drawing Filled Shapes with Graphics | Demonstrates how to use the Graphics object to draw solid and semi-transparent rectangles and triangles.
v4.1.0 | game objects/graphics | Drawing Star Shapes | Demonstrates how to use the Graphics object to procedurally draw star shapes by calculating vertex positions based on points, radii, and line styles.
v4.1.0 | game objects/graphics | Fill Rounded Rectangle | Demonstrates how to draw filled rounded rectangles using the Graphics object, featuring both uniform corner radii and custom radius values for individual corners.
v4.1.0 | game objects/graphics | Filled Rectangles | Demonstrates how to use the Graphics object to draw multiple overlapping filled rectangles with varying transparency levels.
v4.1.0 | game objects/graphics | Generate Texture for Blitter | Demonstrates creating a custom shape with a Graphics object, converting it into a reusable texture, and then using that texture to render high-performance bobs within a Blitter object.
v4.1.0 | game objects/graphics | Generate Texture from Graphics | Demonstrates how to draw shapes using a Graphics object and convert them into a reusable texture that can be applied to an Image Game Object.
v4.1.0 | game objects/graphics | Generate Texture from Graphics | Demonstrates how to convert a Graphics object into a reusable texture that can be applied to Images or Sprites.
v4.1.0 | game objects/graphics | Generate Texture to TileSprite | Demonstrates how to draw shapes with Graphics, convert them into a reusable texture key, and apply that texture to a scrolling TileSprite.
v4.1.0 | game objects/graphics | Graphics Arc | Demonstrates how to draw a curved arc using the Graphics object, specifying the center position, radius, start and end angles, and direction.
v4.1.0 | game objects/graphics | Graphics Arc Chomp Animation | Create an animated chomping effect by dynamically updating the angles of a Graphics slice using a Tween counter.
v4.1.0 | game objects/graphics | Graphics Canvas Transformations | Demonstrates using translate, scale, and rotate transformations within a Graphics object to draw and animate multiple shapes using a canvas-style state stack.
v4.1.0 | game objects/graphics | Graphics in a Container | Demonstrates how to add a Graphics object to a Container and draw shapes using coordinates relative to the container's position.
v4.1.0 | game objects/graphics | Graphics Line Styles | Learn how to configure stroke properties including thickness, color, and alpha when drawing shapes using the Graphics object.
v4.1.0 | game objects/graphics | Graphics Line Tracing | Interactively draw and commit persistent lines to the screen using pointer events, geometry shapes, and the Graphics object.
v4.1.0 | game objects/graphics | Graphics Rendering and Transformations | Draw a complex star shape using Graphics path commands and apply real-time rotation and scaling transformations.
v4.1.0 | game objects/graphics | Graphics Transformation Logo | Demonstrates creating an animated, multi-layered vector logo using Graphics path drawing combined with canvas-style translation, rotation, and scaling.
v4.1.0 | game objects/graphics | Health Bars using Graphics | Create dynamic, reusable health bars for game objects by drawing and updating rectangles with the Graphics object.
v4.1.0 | game objects/graphics | Line Rendering with Graphics | Demonstrates how to use the Graphics object to draw geometric shapes and custom paths with specific line and fill styles, while applying real-time rotation and scaling.
v4.1.0 | game objects/graphics | Line Thickness | Learn how to define the width and color of strokes when drawing rectangles, circles, and custom paths using the Graphics object.
v4.1.0 | game objects/graphics | Many Stars | Demonstrates rendering and animating a large number of individual Graphics objects, featuring procedurally drawn stars with updating rotation and scale.
v4.1.0 | game objects/graphics | Motion Trail with Graphics | Create a colorful motion trail effect by storing a history of coordinates and drawing them sequentially using a Graphics object and an HSV color wheel.
v4.1.0 | game objects/graphics | Mouse Trail with Graphics | Create a dynamic, multi-colored mouse trail using a Graphics object by drawing a continuous path through a history of pointer positions with varying line thickness and color.
v4.1.0 | game objects/graphics | Multiple Cameras and Effects | Create multiple camera viewports within a single Scene to display the same game objects with different simultaneous effects including shake, flash, fade, zoom, and rotation.
v4.1.0 | game objects/graphics | Multiple Graphics Instances | Create and update hundreds of individual Graphics objects, each with unique positions, rotations, and scales.
v4.1.0 | game objects/graphics | Pacman Arc | Demonstrates how to use the Graphics.slice method to draw a partial circle, creating a filled Pacman-style shape.
v4.1.0 | game objects/graphics | Phaser Logo Shift | Demonstrates complex Graphics transformations, color cycling, and manual vector drawing to create an animated, multi-layered logo effect.
v4.1.0 | game objects/graphics | Primitive Graphics Shapes | Demonstrates how to draw basic shapes using the Graphics object, including rectangles, circles, and ellipses with custom fill and line styles.
v4.1.0 | game objects/graphics | Pseudo-3D Graphics Logo | Demonstrates a pseudo-3D stacking effect by rendering multiple layers of a vector-drawn logo using Graphics transformations, coordinate offsets, and HSV color cycling.
v4.1.0 | game objects/graphics | Rendering Thousands of Circles with Graphics | Demonstrates how to efficiently draw and animate 2,000 individual circles using a single Graphics object within the update loop.
v4.1.0 | game objects/graphics | Spinning 3D Wireframe Cube | Demonstrates rendering a rotating 3D wireframe cube by manually calculating vertex rotations and drawing the edges using the Graphics object.
v4.1.0 | game objects/graphics | Stroke Circle | Demonstrates how to draw a circle outline using Graphics lineStyle and the strokeCircle method.
v4.1.0 | game objects/graphics | Stroke Path | Learn how to draw custom vector shapes by defining a path of points and applying a line style to outline it using a Graphics object.
v4.1.0 | game objects/graphics | Stroke Rect | Demonstrates how to draw the outline of a rectangle using the Graphics object, including setting the line thickness, color, and alpha.
v4.1.0 | game objects/graphics | Stroke Rounded Rectangle | Demonstrates how to draw the outline of rounded rectangles with both uniform corner radii and individual radii for each corner using the Graphics object.
v4.1.0 | game objects/graphics | Stroke Triangle | This example shows how to use a Graphics object to draw the outline of a triangle by defining three coordinate points and a custom line style.
v4.1.0 | game objects/graphics/primitives | Draw a Stroked Path | Create a custom shape using the Graphics object by defining a path with line commands and rendering its outline with a specific stroke style.
v4.1.0 | game objects/graphics/primitives | Filled Arcs | Demonstrates how to draw and fill arc shapes using Graphics primitives, including both clockwise and counter-clockwise directions.
v4.1.0 | game objects/graphics/primitives | Filled Rectangles | Demonstrates how to draw filled rectangles using the Graphics object, including setting fill colors and alpha transparency.
v4.1.0 | game objects/graphics/primitives | Graphics Gradient Fill | Apply color gradients to primitive shapes, such as circles, using the fillGradientStyle method within a Graphics object.
v4.1.0 | game objects/graphics/primitives | Graphics Triangle with Gradient Fill | Demonstrates how to apply multi-color gradients to triangle primitives using the fillGradientStyle method on a Graphics object.
v4.1.0 | game objects/graphics/primitives | Line Between | Demonstrates how to draw a single straight line between two specific coordinates using Graphics.
v4.1.0 | game objects/graphics/primitives | Line Between | Demonstrates how to draw a straight line between two points with a custom thickness and color using the Graphics object.
v4.1.0 | game objects/graphics/primitives | Line Gradient Stroke | Demonstrates how to draw a line between two points with a multi-color gradient stroke using the Graphics object.
v4.1.0 | game objects/graphics/primitives | Multi-Scene Graphics Rendering | Demonstrates rendering Graphics objects and images across multiple simultaneous scenes, showing scene stacking and the use of custom viewports.
v4.1.0 | game objects/graphics/primitives | Path Gradient Fill | Demonstrates how to apply a four-color gradient to a custom path using fillGradientStyle in the Graphics object.
v4.1.0 | game objects/graphics/primitives | Rectangle Fill and Gradient | Demonstrates how to draw filled rectangles using solid colors and multi-color gradients with the Graphics object.
v4.1.0 | game objects/graphics/primitives | Rectangle Gradient Fill | Demonstrates how to apply multi-color gradients to Graphics rectangles using fillGradientStyle to define corner colors.
v4.1.0 | game objects/graphics/primitives | Rectangle Stroked | Demonstrates how to draw outlined rectangles using the Graphics object and custom line styles.
v4.1.0 | game objects/graphics/primitives | Split Path Filled | Demonstrates how to draw and fill multiple separate shapes within a single Graphics path by using moveTo to start new sub-paths.
v4.1.0 | game objects/graphics/primitives | Stroked Arcs | Demonstrates how to draw outlined arcs using the Graphics object, including setting line styles and defining circular paths.
v4.1.0 | game objects/graphics/primitives | Stroked Triangle | Demonstrates how to draw outlined triangles using different line styles, widths, and colors with the Graphics object.
v4.1.0 | game objects/graphics/primitives | Triangle Gradient Strokes | Demonstrates how to use lineGradientStyle to draw triangle outlines with multi-colored gradient strokes.
v4.1.0 | game objects/group | Create Group from Config | Demonstrates how to populate a Group using configuration objects or arrays to define repetition, spacing, and initial properties for multiple sprites.
v4.1.0 | game objects/group | Destroy Group Children | Demonstrates how calling destroy() on a Game Object automatically removes it from any Group it belongs to.
v4.1.0 | game objects/group | Group Create Child | Demonstrates how to use the group.create method to instantiate a new Sprite and automatically add it to both the Group and the Scene display list.
v4.1.0 | game objects/group | Group Create Multiple | Learn how to batch-create multiple Game Objects within a Group using configuration options like frame lists, quantities, and repeat counts.
v4.1.0 | game objects/group | Group Create Multiple Keys | Demonstrates how to populate a Group with multiple texture keys and frames simultaneously using the createMultiple method, including options for random frame selection and quantities.
v4.1.0 | game objects/group | Group Rotation Step | Demonstrates how to apply an incremental rotation to group members during creation using the setRotation step property.
v4.1.0 | game objects/group | Group Set Scale | Demonstrates how to use the Group configuration object to initialize multiple sprites with specific scale values and incremental scale steps.
v4.1.0 | game objects/group | Group setXY Configuration | Demonstrates how to use the setXY property when creating a Group to automatically position sprites with optional horizontal and vertical stepping.
v4.1.0 | game objects/group | Group setXY Configuration | Demonstrates how to use the setXY property in a Group configuration to position multiple sprites with incremental horizontal spacing.
v4.1.0 | game objects/group | Group setXY Vertical Spacing | Demonstrates how to use the setXY property in a Group configuration to automatically position and vertically space multiple sprites using a stepY value.
v4.1.0 | game objects/group | Multiple Group Configurations | Demonstrates how to pass an array of multiple configuration objects to a Group to create different sets of children with their own frames and positioning rules simultaneously.
v4.1.0 | game objects/group | Random Frame Group Creation | Demonstrates how to populate a group with sprites that are assigned random frames from a spritesheet and organized into a grid layout.
v4.1.0 | game objects/group | Shuffle Group Children | Demonstrates how to use Phaser.Actions.Shuffle to randomly reorder the render depth of children within a Group.
v4.1.0 | game objects/group | Sprite Pool | Demonstrates how to implement an object pool using a Group to efficiently recycle sprites, manage a maximum capacity, and monitor active versus inactive objects.
v4.1.0 | game objects/group | Swirl Rotation Action | Demonstrates using Phaser.Actions.Rotate to apply an incremental rotation to a group of sprites, creating a swirling visual effect.
v4.1.0 | game objects/images | Custom Game Object | Extend a built-in Sprite class and register it with the Game Object Factory to enable shorthand creation and custom internal update logic.
v4.1.0 | game objects/images | Custom Image Class | Learn how to extend the Phaser Image class to create your own custom game object types and add them to the Scene.
v4.1.0 | game objects/images | Custom Image Class with ES6 | Demonstrates how to create a custom game object by extending the Image class using ES6 syntax and adding instances to the scene.
v4.1.0 | game objects/images | Destroy an Image | Demonstrates how to permanently remove an Image Game Object from a Scene using the destroy method, including how to safely check for the object's existence in the update loop.
v4.1.0 | game objects/images | Flip Image | Demonstrates how to flip a Game Object horizontally and vertically using the flipX and flipY properties.
v4.1.0 | game objects/images | Get Image Bounds | Demonstrates using the getBounds method to retrieve the axis-aligned bounding box of a Game Object as it scales and rotates.
v4.1.0 | game objects/images | Image Alpha | Demonstrates how to change the transparency of an image by setting its alpha property.
v4.1.0 | game objects/images | Image Bounds | Demonstrates how to retrieve and visualize the axis-aligned bounding box (AABB) of rotating and scaling images using the getBounds method.
v4.1.0 | game objects/images | Image Edge Points | Demonstrates how to retrieve the world coordinates of an Image's corners and center edges using methods like getTopLeft and getBottomRight, even as the object rotates and scales.
v4.1.0 | game objects/images | Image Offset | Demonstrates how to position multiple images at specific X and Y coordinates within a scene.
v4.1.0 | game objects/images | Image Rotation | Rotate an image by incrementing its rotation property inside the update loop.
v4.1.0 | game objects/images | Make Image from Configuration | Demonstrates how to create an image using a configuration object, featuring the use of random range generators (randInt, randFloat), random selection from arrays, and dynamic functions for property values.
v4.1.0 | game objects/images | Multiple Image Alpha | Demonstrates how to set different transparency levels for multiple image Game Objects using the setAlpha method.
v4.1.0 | game objects/images | Multiple Image Rotation | Learn how to rotate multiple Image Game Objects independently by updating their rotation property at different speeds and directions within the update loop.
v4.1.0 | game objects/images | Single Image Rotation | Demonstrates loading an image, displaying it on the screen, and updating its rotation property every frame.
v4.1.0 | game objects/images | Sprite Additive Blending | Demonstrates how to apply the 'ADD' blend mode to images, showing how colors combine additively as they move over a background sprite.
v4.1.0 | game objects/layer | Add Sprite to Layer | Learn how to add multiple existing Sprites to a Layer object and toggle the visibility of the entire group.
v4.1.0 | game objects/layer | Create Layer | Demonstrates how to create a Layer Game Object to group sprites and toggle their visibility collectively.
v4.1.0 | game objects/layer | Depth Sort Layer Children | Demonstrates how to use the depth property to automatically sort Game Objects within a Layer, creating a pseudo-3D effect based on their vertical position.
v4.1.0 | game objects/layer | Layer Filter | Demonstrates applying a post-processing filter to a Layer object to affect all of its children simultaneously, while leaving objects outside the layer untouched.
v4.1.0 | game objects/layer | Layer with Bitmap Mask | Demonstrates how to apply a bitmap mask to an entire Layer, ensuring all children within the layer are masked by a single external image.
v4.1.0 | game objects/layer | Layer With Geometry Mask | Demonstrates applying a geometry mask to a Layer object, allowing you to clip all of the layer's children simultaneously using a single mask shape.
v4.1.0 | game objects/layer | Move Between Layers | Demonstrates how to transfer Game Objects between different Layers dynamically. Moving an object to a new Layer updates its rendering context, allowing it to inherit different filters and display list properties.
v4.1.0 | game objects/layer | Nested Layers | Demonstrates how to nest one Layer within another to create a hierarchy, showing how visibility states propagate from parent layers to their children.
v4.1.0 | game objects/lights | Animated Sprite Sheet with Lighting | Demonstrates how to apply 2D lighting to animated spritesheets by loading and using normal maps for sprite frames.
v4.1.0 | game objects/lights | Bitmap Text with Lighting | Demonstrates how to apply dynamic 2D lighting to Bitmap Text using normal maps, allowing text to react to moving light sources and color changes.
v4.1.0 | game objects/lights | Blitter Lighting | Demonstrates how to apply the 2D lighting system to a Blitter object using normal maps and a dynamic point light that follows the cursor.
v4.1.0 | game objects/lights | Changing Maximum Lights | Learn how to configure the maximum number of concurrent lights available in a scene using the maxLights property in the Game Config object.
v4.1.0 | game objects/lights | Create Point Light | Demonstrates how to add and interactively modify 2D point lights by adjusting properties such as color, radius, and attenuation.
v4.1.0 | game objects/lights | Drawing with Point Lights | Demonstrates how to add and manipulate point lights dynamically. Move the pointer to reposition a light, and click to spawn new lights with colors pulled from a spectrum.
v4.1.0 | game objects/lights | Graveyard Lighting with Normal Maps | Demonstrates the 2D lighting system using normal maps for depth effects. It features multiple point lights, moving lights via tweens, and a flickering candle effect achieved by randomizing light positions within an ellipse.
v4.1.0 | game objects/lights | Light Culling | Demonstrates how the light system automatically culls lights that fall outside the camera's viewport to optimize performance.
v4.1.0 | game objects/lights | Light Follow Pointer | An example of Phaser's 2D lighting system using normal maps. It features a light source that follows the mouse pointer, multiple moving colored lights, and a toggle to enable or disable lighting effects.
v4.1.0 | game objects/lights | Lighting on Tilemap Layer | Demonstrates how to apply dynamic 2D lighting and normal maps to a tilemap layer, including a player-attached light source and moving colored lights.
v4.1.0 | game objects/lights | Lights and Scene Switching | Demonstrates switching between different scenes while using the 2D lighting system, showing how light sources and lighting states are specific to each scene.
v4.1.0 | game objects/lights | Particle Emitter Lighting | Demonstrates how to apply 2D lighting and normal maps to a Particle Emitter, allowing emitted particles to react to dynamic light sources.
v4.1.0 | game objects/lights | Point Light with Camera Zoom | Demonstrates how to maintain a consistent Point Light visual size during camera zooming and movement, featuring interactive color cycling, attenuation controls, and pointer tracking.
v4.1.0 | game objects/lights | Point Lights and Normal Maps | Demonstrates the dynamic lighting system using normal-mapped textures, interactive spotlights, camera zooming, and multiple Point Light game objects.
v4.1.0 | game objects/lights | Render Texture Lighting | Demonstrates how to enable the 2D lighting system on a RenderTexture, allowing drawn textures to react to scene lights using normal maps.
v4.1.0 | game objects/lights | Rotated Sprite with 2D Lighting | Demonstrates how a sprite using a normal map correctly reacts to 2D lights while it is rotating.
v4.1.0 | game objects/lights | Single Point Light | Demonstrates how to enable the 2D lighting system, use a normal-mapped texture, and add an animated point light to a scene.
v4.1.0 | game objects/lights | Spotlight | Learn how to use Phaser's 2D lighting system to create a spotlight effect that follows the pointer. This example demonstrates setting ambient light levels and applying dynamic lighting to a sprite using a normal map.
v4.1.0 | game objects/lights | Text Lighting | Apply the 2D light system to Text objects. This example demonstrates how lighting interacts with various text shadow and stroke configurations using a movable, color-changing light source.
v4.1.0 | game objects/lights | TileSprite with 2D Lighting | Demonstrates how to apply the 2D lighting system to a scrolling TileSprite using normal maps. Includes a mouse-controlled light source with adjustable colors.
v4.1.0 | game objects/nine slice | 3 Slice Button | Demonstrates using Nine Slice Game Objects to create UI buttons that can be dynamically resized horizontally while preserving their edge graphics.
v4.1.0 | game objects/nine slice | Create Nine Slice | Demonstrates how to create and display Nine Slice Game Objects using textures from an atlas, allowing for resizable UI elements with preserved corners.
v4.1.0 | game objects/nine slice | Interactive Nine Slice Button | Demonstrates how to enable interactivity on a NineSlice Game Object and handle pointer events to trigger actions like repositioning.
v4.1.0 | game objects/nine slice | Nine Slice Panel | Demonstrates creating a Nine Slice Game Object and dynamically resizing its width and height using a tween. It shows how the corners and edges are preserved while the center scales, and how to update text word wrapping to match the changing panel dimensions.
v4.1.0 | game objects/nine slice | Nine Slice Progress Bar | Demonstrates how to create an animated progress bar using Nine Slice game objects by tweening the width property while preserving texture corners.
v4.1.0 | game objects/nine slice | Nine Slice Stress Test | A performance demonstration rendering 256 Nine Slice Game Objects simultaneously, featuring randomized dimensions and real-time width and height tweening.
v4.1.0 | game objects/nine slice | Nine Slice vs Scaling | A visual comparison showing how a Nine Slice object preserves its border and corner proportions when resized, compared to the distortion of a standard scaled Image.
v4.1.0 | game objects/nine slice | Nine Slice with Texture Atlas | Demonstrates how to create Nine Slice Game Objects using frames loaded from a Texture Packer atlas.
v4.1.0 | game objects/noise | 2D Simplex Noise Iterations | Demonstrates the effect of the noiseIterations property on 2D Simplex noise, showing how multiple iterations add layers of detail and complexity to the generated texture.
v4.1.0 | game objects/noise | Animated Cellular Noise | Demonstrates how to animate and scroll 2D, 3D, and 4D cellular noise objects by modifying noise offset values over time.
v4.1.0 | game objects/noise | Basic Noise | Demonstrates how to create a Noise Game Object and modify its noiseOffset property over time to change the generated pattern.
v4.1.0 | game objects/noise | Basic Noise Colors | Demonstrates how to configure and animate colors in a Noise Game Object using hex codes, RGBA arrays for transparency, and channel randomization.
v4.1.0 | game objects/noise | Basic Normal Noise Displacement | Demonstrates how to generate a normal-distributed noise texture and use it as a displacement map to distort an image.
v4.1.0 | game objects/noise | Cellular Noise | Demonstrates how to generate and display 2D, 3D, and 4D cellular (Worley) noise patterns side-by-side using specialized noise Game Objects.
v4.1.0 | game objects/noise | Cellular Noise 4D Loop | Create a seamless, high-precision looping animation by rotating the offsets of a 4D cellular noise object over time.
v4.1.0 | game objects/noise | Cellular Noise Grid Density | Demonstrates how to create and animate 2D cellular noise patterns using different grid densities, aspect ratios, and movement offsets.
v4.1.0 | game objects/noise | Cellular Noise Iterations | This example demonstrates how varying the number of iterations affects the complexity and detail of a 4D cellular noise Game Object.
v4.1.0 | game objects/noise | Cellular Noise Normal Map | Demonstrates creating an animated water reflection effect using a 4D cellular noise normal map as a displacement filter.
v4.1.0 | game objects/noise | Cellular Noise Scroll Z | Animate 3D and 4D cellular noise by scrolling the Z-axis offset over time.
v4.1.0 | game objects/noise | Cellular Noise Smoothing | Demonstrates the difference between standard and smoothed 2D cellular noise using different render modes and smoothing values to create organic patterns.
v4.1.0 | game objects/noise | Cellular Noise Variation | Demonstrates how to create and animate 2D, 3D, and 4D cellular noise Game Objects by dynamically adjusting their noise variation properties.
v4.1.0 | game objects/noise | Cellular Noise with Gradient Map | Demonstrates creating 3D cellular noise with flat-colored cells and applying a multi-stop color gradient map filter to the output.
v4.1.0 | game objects/noise | Cellular Noise Wrap | Create and animate a seamless, wrapping 2D cellular noise texture. This example demonstrates configuring noise cells and wrapping parameters, rendering the output to a texture, and updating noise offsets over time.
v4.1.0 | game objects/noise | Clouds With Simplex Noise | Generate an atmospheric cloud scene using multiple layers of 3D Simplex noise with parallax scaling, color tinting, and animated noise flow.
v4.1.0 | game objects/noise | Fire with Simplex Noise | Create procedural fire effects using Simplex Noise textures, displacement filters, and gradient mapping. This example shows how to generate dynamic textures, apply stylized filters, and animate fire using Rope game objects.
v4.1.0 | game objects/noise | Heat Haze with Simplex Noise | Apply a displacement filter to an image using a procedural Simplex Noise texture to create an animated heat haze or liquid distortion effect.
v4.1.0 | game objects/noise | Noise Power | Demonstrates how the noisePower property affects the visual intensity and contrast of Noise Game Objects.
v4.1.0 | game objects/noise | Noise Scrolling Techniques | Demonstrates various ways to animate noise patterns, including direct offset manipulation and using a Noise object as a texture for a scrolling TileSprite.
v4.1.0 | game objects/noise | Reflections with Simplex Noise | Create dynamic animated reflections using Simplex noise as a normal map with the Image Light filter.
v4.1.0 | game objects/noise | Simplex Noise 3D Iterations | Compare the visual impact of increasing noise iterations on a 3D Simplex noise Game Object, showing how more iterations add complexity and detail.
v4.1.0 | game objects/noise | Simplex Noise 3D Warp Iterations | Compare the visual effect of increasing warp iterations on 3D Simplex noise textures.
v4.1.0 | game objects/noise | Simplex Noise Flow | Animate 2D and 3D Simplex Noise Game Objects by updating the noiseFlow property to create evolving generative patterns.
v4.1.0 | game objects/noise | Simplex Noise Game Objects | Demonstrates how to create and display 2D and 3D Simplex noise patterns as Game Objects in your scene.
v4.1.0 | game objects/noise | Simplex Noise Iteration Sculpting | Demonstrates how to sculpt multi-iteration Simplex noise using properties like detail power, contribution decay, and flow speed.
v4.1.0 | game objects/noise | Simplex Noise Normal Map | Demonstrates how to generate a normal map from 2D simplex noise by enabling the normal map property on a Simplex Noise Game Object.
v4.1.0 | game objects/noise | Simplex Noise Offset | Demonstrates creating a procedural cloud effect by layering multiple 3D Simplex noise objects and animating their X and Y offsets over time.
v4.1.0 | game objects/noise | Simplex Noise Period | A demonstration of using the noisePeriod property in 2D and 3D Simplex noise game objects to control noise repetition and frequency.
v4.1.0 | game objects/noise | Simplex Noise Warp | Demonstrates how to animate the warp amount property on 2D and 3D Simplex noise game objects to create fluid, morphing patterns.
v4.1.0 | game objects/noise | Simplex Noise Warp Iteration Sculpting | Demonstrates how to sculpt the visual appearance and animation of 2D Simplex Noise using warp iteration properties such as detail power, contribution decay, and flow power.
v4.1.0 | game objects/noise | Simplex Noise Warp Iterations 2D | Compare 2D Simplex noise textures across multiple warp iterations, demonstrating how increasing iterations adds complexity and visual detail to the noise pattern.
v4.1.0 | game objects/noise | Simplex Noise Wrap Toggle | Toggle seamless texture wrapping for Simplex noise by adjusting the noisePeriod property.
v4.1.0 | game objects/particle emitter | Direct Value Particle Emitter | Demonstrates a basic particle emitter using constant numeric values for properties like speed, lifespan, and gravity.
v4.1.0 | game objects/particle emitter | Dynamic Particle Emitter Tint | Demonstrates how to change a particle emitter's tint property in real-time, cycling through colors using an HSV color wheel.
v4.1.0 | game objects/particle emitter | Emit Particles at Pointer | Demonstrates how to manually trigger a specific number of particles at the mouse pointer's location using the emitParticleAt method.
v4.1.0 | game objects/particle emitter | Emit Zone Loop | Demonstrates how to use the particle emitter 'complete' event to manually restart emission after a specific number of particles have been released along a geometric edge.
v4.1.0 | game objects/particle emitter | Emitter Alpha Tween | Demonstrates how to apply a tween to the alpha property of a particle emitter to fade the entire effect in and out.
v4.1.0 | game objects/particle emitter | Emitter Duration | Demonstrates how to trigger a particle emitter to run for a specific duration using the start method when an interactive event occurs.
v4.1.0 | game objects/particle emitter | Fire and Smoke Particle Effects | Demonstrates how to create fire, magical wisp, and smoky flame effects using particle color arrays, easing, and the advance property.
v4.1.0 | game objects/particle emitter | Get Particle Bounds | Demonstrates how to retrieve the bounding box of individual particles using the getBounds method and iterate through active particles with forEachAlive.
v4.1.0 | game objects/particle emitter | Get Particle Emitter Bounds | Demonstrates how to calculate the bounding rectangle of a particle emitter, including both current active particle bounds and pre-calculating bounds over a specific time duration.
v4.1.0 | game objects/particle emitter | Hold Particle | Demonstrates the hold property in a particle emitter, allowing particles to remain visible for a set duration after their active lifespan has completed.
v4.1.0 | game objects/particle emitter | Move Particles to Dynamic Target | Demonstrates how to use onUpdate callbacks with particle moveTo properties to make particles track a moving target like the mouse pointer.
v4.1.0 | game objects/particle emitter | Multiple Death Zones | Learn how to define multiple geometric shapes as death zones to instantly kill particles that enter those areas.
v4.1.0 | game objects/particle emitter | Multiple Edge Emit Zones | Demonstrates using multiple geometric shapes as edge emission zones for a single particle emitter, utilizing the total and quantity properties to control point distribution.
v4.1.0 | game objects/particle emitter | Particle Bring To Top | Demonstrates how to toggle whether newly emitted particles are rendered on top of or behind older particles using the particleBringToTop property.
v4.1.0 | game objects/particle emitter | Particle Emitter Bounds | Demonstrates how to confine particles within a specific rectangular area and make them bounce off the edges using the bounds and bounce properties.
v4.1.0 | game objects/particle emitter | Particle Emitter Custom Callbacks | Demonstrates how to use custom callback functions for particle emitter properties to dynamically update the emission coordinates based on user input.
v4.1.0 | game objects/particle emitter | Particle Emitter Events | Demonstrates how to listen for and respond to particle emitter lifecycle events, including start, stop, and complete events when using timed durations.
v4.1.0 | game objects/particle emitter | Particle Emitter Explosion | Trigger a sudden burst of particles using the explode method on a non-continuous emitter when a user clicks or touches the screen.
v4.1.0 | game objects/particle emitter | Particle Emitter Move To | Demonstrates how to use the moveToX and moveToY properties to direct particles toward a specific destination coordinate.
v4.1.0 | game objects/particle emitter | Particle Emitter Overlap with Physics Body | Demonstrates how to detect overlaps between individual particles and an Arcade Physics body to trigger collisions and destruction effects.
v4.1.0 | game objects/particle emitter | Particle Emitter Property Ranges | Demonstrates how to use min and max values to assign a random range to particle emitter properties, such as the initial starting position.
v4.1.0 | game objects/particle emitter | Particle Emitter Sort Order | Demonstrates how to control the rendering depth of particles using the sortProperty and sortOrderAsc properties to draw particles based on their horizontal position.
v4.1.0 | game objects/particle emitter | Particle Emitter Start and End Properties | This example demonstrates how to animate particle properties over their lifespan by defining start and end values, including the use of easing functions for movement and scale.
v4.1.0 | game objects/particle emitter | Particle Emitter Start End Easing | Demonstrates how to apply easing functions to particle properties, such as position and rotation, as they transition from a start value to an end value over their lifespan.
v4.1.0 | game objects/particle emitter | Particle Emitter Start End Random Range | Demonstrates how to use a range with start, end, and random properties to define initial particle positions.
v4.1.0 | game objects/particle emitter | Particle Emitter View Bounds | Demonstrates how to calculate the estimated area covered by a particle emitter using getBounds and use it for visibility checking and camera culling.
v4.1.0 | game objects/particle emitter | Particle Emitter with Multiple Emit Zones | Demonstrates how to attach multiple geometric shapes as emit zones to a single particle emitter, constraining particle creation to the edges of various shapes.
v4.1.0 | game objects/particle emitter | Particle Gravity Well | Demonstrates how to use a Gravity Well to exert gravitational force on particles, attracting them toward a specific point in the scene.
v4.1.0 | game objects/particle emitter | Particle onEmit and onUpdate Callbacks | Learn how to use the onEmit and onUpdate callback functions to dynamically set and update particle properties, such as simulating custom movement effects during a particle's lifespan.
v4.1.0 | game objects/particle emitter | Particle Overlap | Demonstrates how to use the particle emitter overlap method to detect intersections between active particles and a geometric shape, such as a Rectangle, to trigger actions like killing the particles.
v4.1.0 | game objects/particle emitter | Particle Property Interpolation | Demonstrates how to use linear, bezier, and Catmull-Rom interpolation to calculate particle property values from an array of coordinates over time.
v4.1.0 | game objects/particle emitter | Random Particle Property | Demonstrates how to use the random configuration object to assign a random value from a specified range to a particle property, such as its starting X position.
v4.1.0 | game objects/particle emitter | Random Particle Tint | Demonstrates how to apply a random color to each particle by passing an array of hex colors to the emitter's tint property.
v4.1.0 | game objects/particle emitter | Random Position Array | Use an array of values to define multiple specific spawn points for a single particle emitter.
v4.1.0 | game objects/particle emitter | Set Emitter Zone By Instance | Demonstrates how to dynamically switch a particle emitter's active emission zone by passing specific EdgeZone instances during pointer events.
v4.1.0 | game objects/particle emitter | Stepped Emitter With Yoyo | Demonstrates a particle emitter where the spawn position increments in discrete steps across a horizontal range and then reverses back.
v4.1.0 | game objects/particle emitter | Stepped Particle Emitter | Use the 'steps' property in a particle emitter configuration to distribute particles across a range of discrete, incremental positions.
v4.1.0 | game objects/particle emitter | Stop After Particle Emitter | Use the stopAfter property to limit a particle emitter to release a specific number of particles before automatically stopping.
v4.1.0 | game objects/particle emitter | Switching Particle Emit Zones | Demonstrates how to define multiple emission zones and switch between them dynamically using the setEmitZone method, using interactive images to trigger the changes.
v4.1.0 | game objects/particle emitter | Tween Particle Emitter Alpha | Demonstrates how to apply a tween directly to a Particle Emitter object to animate its overall alpha transparency and position.
v4.1.0 | game objects/particle emitter | Tween Particle Emitter Speed | Demonstrates how to use a Tween to dynamically animate the speed property of a Particle Emitter over time.
v4.1.0 | game objects/particle emitter | Tween Particle Speed X | This example shows how to use a tween to dynamically animate the horizontal speed property of a particle emitter over time.
v4.1.0 | game objects/particle emitter | Tween Speed Y | Demonstrates how to animate the vertical speed of a particle emitter using a Tween, causing the emission velocity to change dynamically over time.
v4.1.0 | game objects/particle emitter | Tweening Particle Emitter Position | This example shows how to move a particle emitter using independent tweens on its X and Y coordinates to create a dynamic motion path.
v4.1.0 | game objects/render texture | Batch Drawing to a Render Texture | Demonstrates how to draw multiple instances of a sprite onto a Render Texture in a single pass using a loop.
v4.1.0 | game objects/render texture | Batch Stamp Atlas Frames to Render Texture | Demonstrates how to iterate through all frames in a texture atlas and draw them to a Render Texture using the stamp method.
v4.1.0 | game objects/render texture | Blitter to Render Texture | Demonstrates how to draw a Blitter object onto a Render Texture and apply transformations like rotation using the Render Texture's internal camera.
v4.1.0 | game objects/render texture | Capture Game Object In World | Demonstrates how to capture a specific Game Object into a Render Texture using its global world transformations, preserving its position, rotation, and scale as it appears in the scene.
v4.1.0 | game objects/render texture | Container to Render Texture | Demonstrates how to draw a hidden Container and its children onto a Render Texture, including how to manipulate the Render Texture's internal camera for rotation effects.
v4.1.0 | game objects/render texture | Destroy Game with Render Texture | Demonstrates creating a custom texture using a Render Texture, populating the scene with images based on that texture, and then properly destroying the game instance.
v4.1.0 | game objects/render texture | Destroy Render Texture | Demonstrates how to properly destroy a Render Texture and its associated texture cache entry, including cleaning up Game Objects that are referencing the texture.
v4.1.0 | game objects/render texture | Draw Atlas Frames to a Render Texture | Demonstrates how to draw specific texture atlas frames onto a Render Texture. Click different sprites to change which frame is drawn at the cursor's position.
v4.1.0 | game objects/render texture | Draw Game Objects To Render Texture | Demonstrates drawing multiple hidden Game Object types (Graphics, Text, Particles, TileSprites, and Blitters) onto a single Render Texture and rotating its internal camera.
v4.1.0 | game objects/render texture | Draw on Render Texture | Demonstrates interactive drawing onto a Render Texture using pointer events. The resulting drawing is saved as a dynamic texture and applied to a grid of animated sprites in real-time.
v4.1.0 | game objects/render texture | Draw Textures to Render Texture by Key | Learn how to draw multiple images onto a Render Texture using their loaded asset keys and specific coordinates.
v4.1.0 | game objects/render texture | Drawing a Tilemap Layer to a Render Texture | Demonstrates how to draw a hidden Tilemap Layer multiple times into a Render Texture while applying transformations like rotation through the Render Texture's internal camera.
v4.1.0 | game objects/render texture | Drawing Bitmap Text to a Render Texture | Learn how to draw a hidden BitmapText object onto a Render Texture and apply rotations using the Render Texture's internal camera.
v4.1.0 | game objects/render texture | Drawing Dynamic Bitmap Text to a Render Texture | Learn how to draw a Dynamic Bitmap Text object onto a Render Texture. This example includes a character jitter effect using a display callback and demonstrates rotating the Render Texture's internal camera.
v4.1.0 | game objects/render texture | Drawing Graphics to a Render Texture | Demonstrates how to draw a hidden Graphics object onto a Render Texture and manipulate the output using the RenderTexture's internal camera rotation.
v4.1.0 | game objects/render texture | Drawing Sprites to a Render Texture | Demonstrates how to draw multiple Game Objects into a Render Texture at specific coordinates and render the result.
v4.1.0 | game objects/render texture | Dynamic Tilemap to Render Texture | Demonstrates how to draw a hidden Tilemap Layer to a Render Texture and manipulate it using the Render Texture's internal camera rotation.
v4.1.0 | game objects/render texture | Erase Part of a Render Texture | Demonstrates how to use a brush image to erase content from a Render Texture, revealing the objects behind it.
v4.1.0 | game objects/render texture | Erase Part of Render Texture (Canvas) | Demonstrates how to use an image as a brush to erase portions of a Render Texture in Canvas mode, creating a scratch-off effect.
v4.1.0 | game objects/render texture | Group To Render Texture | Demonstrates how to draw entire Groups of Game Objects directly onto a Render Texture in a single operation.
v4.1.0 | game objects/render texture | Paint Interpolated | Demonstrates how to draw smooth, continuous strokes on a Render Texture by using pointer position interpolation to fill in gaps between mouse movement updates.
v4.1.0 | game objects/render texture | Paint Interpolated Shadow | Demonstrates smooth painting onto a Render Texture using interpolated pointer positions to prevent gaps in fast brush strokes, while applying color cycling and a black shadow effect.
v4.1.0 | game objects/render texture | Paint with Render Texture | Demonstrates how to create a simple drawing effect by drawing a brush sprite onto a Render Texture as the pointer moves.
v4.1.0 | game objects/render texture | Paint with Tinted Brush | Demonstrates how to draw onto a Render Texture using a brush sprite that cycles through a color wheel tint as the pointer moves.
v4.1.0 | game objects/render texture | Pixel Art Render Texture | Demonstrates how the pixelArt game configuration affects the rendering of scaled sprites when drawn to a RenderTexture, ensuring sharp edges without blurring.
v4.1.0 | game objects/render texture | Render Particle Emitter to Render Texture | Learn how to draw a hidden particle emitter into a Render Texture and manipulate the output using the Render Texture camera's rotation.
v4.1.0 | game objects/render texture | Render Scene to Texture | Captures a Container and its contents into a RenderTexture, saves it as a named texture, and displays it back on screen to create a recursive visual effect.
v4.1.0 | game objects/render texture | Render Texture As A Mask | Learn how to use a Render Texture as a dynamic mask for a Game Object. This example demonstrates drawing onto a Render Texture with the mouse to reveal an underlying image.
v4.1.0 | game objects/render texture | Render Texture as Viewport | Use RenderTextures as secondary cameras to display scene content with unique transformations, tints, rotations, and post-processing filters applied to each view.
v4.1.0 | game objects/render texture | Render Texture Brute Force | Demonstrates high-volume drawing by stamping numerous sprite frames onto a single Render Texture every frame.
v4.1.0 | game objects/render texture | Render Texture Camera Transformations | Demonstrates how to use the internal camera property of a Render Texture to apply rotation, zoom, and positioning when stamping textures.
v4.1.0 | game objects/render texture | Render Texture Drawing Trail | Demonstrates how to create a persistent motion trail by drawing a sprite to a Render Texture every frame without clearing it.
v4.1.0 | game objects/render texture | Render Texture Frame Fill | Demonstrates how to fill a Render Texture with a repeating texture pattern using the repeat method.
v4.1.0 | game objects/render texture | Render Texture Larger Than Camera | Create a large Render Texture that exceeds the game's dimensions and navigate it using camera controls.
v4.1.0 | game objects/render texture | Render Texture Scratch-off Mask | Demonstrates how to use a RenderTexture as an inverted alpha mask to create a scratch-off reveal effect by drawing onto the texture with the pointer.
v4.1.0 | game objects/render texture | Render Texture to Render Texture | Demonstrates how to draw the contents of one Render Texture into another Render Texture.
v4.1.0 | game objects/render texture | Render Texture Trail Effect | Demonstrates how to create a persistent visual trail behind a moving object by drawing sprites into a Render Texture with dynamic tween updates.
v4.1.0 | game objects/render texture | Rendering a Scene to a Render Texture | Demonstrates how to capture the entire display list of one scene and draw it into a tinted Render Texture in a separate scene.
v4.1.0 | game objects/render texture | Resize a RenderTexture | Demonstrates how to dynamically change the dimensions of a RenderTexture and redraw Game Objects including Text, Particles, and Graphics onto it after a resize.
v4.1.0 | game objects/render texture | Resize Render Texture | Learn how to dynamically change the dimensions of a Render Texture at runtime using setSize.
v4.1.0 | game objects/render texture | Save Render Texture | Demonstrates how to save a Render Texture into the global Texture Manager, allowing it to be used as a static source texture for other Game Objects.
v4.1.0 | game objects/render texture | Scene to Render Texture with Dynamic Crop | Render the contents of an entire Scene into a Render Texture, applying a color tint and a dynamic crop area that follows the pointer.
v4.1.0 | game objects/render texture | Shape to Render Texture | Demonstrates how to draw Shape Game Objects, such as circles and rectangles, onto a Render Texture.
v4.1.0 | game objects/render texture | Stamping Atlas Frames to a Render Texture | Demonstrates how to draw individual frames from a loaded texture atlas onto a Render Texture using the stamp method.
v4.1.0 | game objects/render texture | Text to Render Texture | Demonstrates how to draw an invisible Text object onto a Render Texture and apply transformations using the Render Texture's internal camera rotation.
v4.1.0 | game objects/rope | Animated Rope | Learn how to apply sprite animations to a Rope object and programmatically manipulate its points in the update loop to create organic, wavy movement.
v4.1.0 | game objects/rope | Draw Rope | Create dynamic Rope Game Objects by drawing paths with the mouse. The example captures pointer coordinates to define rope segments and animates them using a sine wave in the update loop.
v4.1.0 | game objects/rope | Draw Rope Gradient | Create custom Rope Game Objects by drawing with the mouse, applying a color gradient to the vertices and animating the points in real-time.
v4.1.0 | game objects/rope | Horizontal Rope | Demonstrates how to create a horizontal Rope Game Object split into multiple segments and animate its individual vertices using a sine wave for a rippling movement effect.
v4.1.0 | game objects/rope | Rope As A Mask | Demonstrates using a dynamic Rope Game Object as a mask for an image. The rope vertices are manipulated in the update loop to create a waving deformation effect that clips the underlying texture.
v4.1.0 | game objects/rope | Rope Flipping | Demonstrates how to toggle horizontal and vertical flipping on a Rope Game Object while its points are being animated.
v4.1.0 | game objects/rope | Rope with a Mask | This example demonstrates how to apply an image-based mask to a Rope Game Object while it is deforming, using the filters system.
v4.1.0 | game objects/rope | Rope with Alpha Gradient | Demonstrates how to apply a vertical alpha gradient to a Rope Game Object using the setAlphas method, creating a transparency transition from top to bottom.
v4.1.0 | game objects/rope | Rope with Shader Texture | Demonstrates using a Shader rendered to a texture as the source for a Rope game object, while dynamically deforming the rope points.
v4.1.0 | game objects/rope | Rope with Single Alpha | Demonstrates how to apply and animate the global alpha property of a Rope Game Object while its vertices are being updated in real-time.
v4.1.0 | game objects/rope | Vertex Tint Rope | Demonstrates how to apply and animate colors to individual vertices of a Rope Game Object using the colors array to create gradients and cycling effects.
v4.1.0 | game objects/rope | Vertical Rope | Learn how to create a vertically aligned Rope Game Object divided into segments and animate its points to create a swaying effect.
v4.1.0 | game objects/shader | Custom Shader Texture Coordinates | Demonstrates how to apply a custom shader to a specific frame from a texture atlas using setTextureCoordinatesFromFrame and building shaders using modular additions.
v4.1.0 | game objects/shader | Gradient Circle Wipe Mask | Demonstrates creating a radial transition between two images by using a dynamic shader as a mask, with the circle's radius controlled by the distance of the pointer from the center.
v4.1.0 | game objects/shader | Gradient Linear Wipe Mask | Demonstrates how to use a shader-generated linear gradient as a dynamic mask to create a smooth transition between two images controlled by the pointer.
v4.1.0 | game objects/shader | Gradient Ripple Reflection | Demonstrates how to use a procedurally generated gradient shader as a displacement map to create a dynamic water ripple effect on a reflected scene.
v4.1.0 | game objects/shader | Gradient Shine | Create an animated gradient shine effect by combining modular shader additions with normal map displacement and additive blending.
v4.1.0 | game objects/shader | Linear Gradient Shader | Demonstrates creating a linear gradient using the Shader Game Object by composing multiple GLSL fragments and configuring uniforms for positions, colors, and step counts.
v4.1.0 | game objects/shader | Perlin Noise Custom Shader Displacement | Demonstrates how to inject custom GLSL code into a shader using shader additions to generate Perlin noise. The resulting shader is rendered to a texture and applied as a real-time displacement filter to an image.
v4.1.0 | game objects/shader | Random Noise Shader Additions | Demonstrates how to use the shaderAdditions property to inject custom GLSL code into the default fragment shader, creating dynamic noise effects with time-based uniforms.
v4.1.0 | game objects/shader | Shader Bilinear Gradient Displacement | Create complex background effects by combining modular shader additions, render-to-texture, and displacement filters using bilinear and linear gradients.
v4.1.0 | game objects/shaders | Basic Texture Shader | Demonstrates how to create a custom shader that accepts an image texture as a uniform and applies it using texture coordinates.
v4.1.0 | game objects/shaders | Change Shader Texture | Demonstrates how to dynamically swap textures used by a shader at runtime using the setTextures method.
v4.1.0 | game objects/shaders | Load Shader | Learn how to load an external GLSL fragment shader file and display it in your scene using a Shader Game Object.
v4.1.0 | game objects/shaders | Render Shader to Texture | Demonstrates how to render a fragment shader directly to a texture, which can then be used by standard Game Objects like Images and Sprites throughout your scene.
v4.1.0 | game objects/shaders | Setting Shader Uniforms | Demonstrates how to define custom uniform variables within a BaseShader and update their values at runtime using the setUniform method.
v4.1.0 | game objects/shaders | Shader Arcade Physics | This example demonstrates how to apply Arcade Physics to Shader Game Objects, including dynamic bodies with velocity and bounce, as well as static body collisions.
v4.1.0 | game objects/shaders | Shader as a Mask | Demonstrates how to use a custom GLSL shader as a dynamic mask for an image. It shows how to create a shader object and apply it to a Game Object through the filters system to create animated masking effects.
v4.1.0 | game objects/shaders | Shader Feedback Buffers | Demonstrates how to create a shader feedback loop by rendering multiple shaders to textures and using the output of one as the input for another.
v4.1.0 | game objects/shaders | Shader Render to Texture | Demonstrates how to render a GLSL shader to a texture and then use that texture across multiple Game Objects simultaneously.
v4.1.0 | game objects/shaders | Shader Render-to-Texture Feedback | Demonstrates how to create a feedback loop between multiple shaders by rendering each to a texture and passing those textures as sampler inputs to one another.
v4.1.0 | game objects/shaders | Shader Sandbox | Demonstrates layering multiple shaders with standard images and animating shader uniforms using the Tween Manager.
v4.1.0 | game objects/shaders | Shader Transforms | Learn how to manipulate a Shader Game Object using standard properties such as scale, rotation, and position, including how to apply tweens to them.
v4.1.0 | game objects/shaders | Shader Using an Updating Dynamic Texture | This example demonstrates how to use a Dynamic Texture as a sampler input for a fragment shader, allowing you to feed live-rendered graphics directly into a shader effect.
v4.1.0 | game objects/shaders | Shader with Dynamic Texture Input | This example demonstrates how to create a Dynamic Texture, draw images onto it, and then use that texture as a sampler input for a fragment shader.
v4.1.0 | game objects/shaders | Using a Shader as a Buffer | Demonstrates how to render a shader's output directly to a texture and use that texture as a sampler input for another shader.
v4.1.0 | game objects/shapes | Arc Shape Game Object | Demonstrates creating Arc shape game objects with various start and end angles, fill colors, strokes, and rendering iterations.
v4.1.0 | game objects/shapes | Circle Shape Game Object | Demonstrates how to create and style Circle Shape Game Objects with fill colors, stroke styles, and animations.
v4.1.0 | game objects/shapes | Curve Shape | Demonstrates how to create a Shape Game Object using a Cubic Bezier curve, including how to define control points, apply fill and stroke styles, and manipulate its position.
v4.1.0 | game objects/shapes | Grid Shape | Demonstrates creating Grid Shape Game Objects with custom cell sizes, alternating fill colors, and outlines, as well as animating their dimensions and rotation.
v4.1.0 | game objects/shapes | Interactive Shape Drawing Tool | Demonstrates how to dynamically create and resize Shape Game Objects (Circles, Rectangles, Ellipses, Stars, and Lines) using pointer input and color picking from a texture palette.
v4.1.0 | game objects/shapes | Isometric Birdie | Build a pseudo-3D character by composing multiple IsoBox shapes into a single Container. Demonstrates how to use face coloring and face visibility to create isometric art.
v4.1.0 | game objects/shapes | Isometric Box Drawing | Learn how to draw and position IsoBox shapes on an isometric grid, featuring face-specific color shading and coordinate conversion between screen and isometric space.
v4.1.0 | game objects/shapes | Isometric Box Shape | Demonstrates creating and animating isometric box shapes with customizable face colors and adjustable projection angles.
v4.1.0 | game objects/shapes | Isometric Heightmap Landscape | Generate a scrollable isometric terrain using IsoBox shapes and a noise texture to determine block heights and colors.
v4.1.0 | game objects/shapes | Isometric Image Heightmap | Render a dynamic isometric terrain using a grid of Isobox shapes whose height and color are driven by pixel data from a source image heightmap.
v4.1.0 | game objects/shapes | Isometric Triangle Shape | Create and animate 2.5D isometric triangle shapes, showcasing face coloring, reversing the orientation, and tweening the height and projection properties.
v4.1.0 | game objects/shapes | Line Shape | Demonstrates creating line shapes, including setting varying start and end widths for tapered effects and applying tweens for rotation, scaling, and transparency.
v4.1.0 | game objects/shapes | Polygon Contains Check | Demonstrates how to check if a specific coordinate point lies within the boundaries of a Polygon shape.
v4.1.0 | game objects/shapes | Polygon Shape | Create Polygon Shape game objects using coordinate arrays. Demonstrates setting fill colors, stroke styles, and animating properties like scale, alpha, and rotation.
v4.1.0 | game objects/shapes | Polygon with Matter Physics | This example shows how to create custom polygon shapes and convert them into active Matter.js physics bodies using vertex data.
v4.1.0 | game objects/shapes | Rectangle Shape | Demonstrates creating and styling Rectangle Shape Game Objects, including using fill colors, stroke styles, and applying tweens for scaling, alpha, and rotation.
v4.1.0 | game objects/shapes | Rectangle with Arcade Physics | This example demonstrates how to apply Arcade Physics to Rectangle Shape Game Objects, including setting velocity, bounce, and world boundary collisions.
v4.1.0 | game objects/shapes | Shape Blend Modes | Demonstrates how to apply blend modes to Shape Game Objects to create color mixing effects between overlapping circles.
v4.1.0 | game objects/shapes | Shape Game Object: Ellipse | Learn how to create and customize Ellipse shape objects, featuring examples of solid fills, stroke styles, smoothness settings, and property animations using tweens.
v4.1.0 | game objects/shapes | Spline Curve Shape | Create a Spline curve from an array of points and render it as a shape Game Object that follows the movement of the pointer.
v4.1.0 | game objects/shapes | Stacker | A complete implementation of a classic arcade-style stacking game using Shape Game Objects, a background grid, and timed events for movement logic.
v4.1.0 | game objects/shapes | Stacker Game | A full arcade game implementation featuring multi-scene navigation, grid-based block positioning, custom font integration, and progressive difficulty logic.
v4.1.0 | game objects/shapes | Star Shape | Learn how to create and style Star game objects by defining the number of points, inner and outer radii, fill colors, and stroke styles.
v4.1.0 | game objects/shapes | Triangle Shape | Create and customize Triangle Shape objects using specific coordinates, including how to apply fill colors, strokes, and tweens for scaling, rotation, and alpha transparency.
v4.1.0 | game objects/sprite gpu layer | Big Forest | Demonstrates the SpriteGPULayer for high-performance rendering of massive sprite counts. It features a procedurally generated environment with parallax layers, weather-based color interpolation, and individual animations for environmental elements like wind-blown leaves, lake sparkles, and rain.
v4.1.0 | game objects/sprite gpu layer | Direct GPU Buffer Manipulation | Manually update the underlying Float32 buffer of a SpriteGPULayer to manipulate thousands of sprites simultaneously for high-performance animation and interaction.
v4.1.0 | game objects/sprite gpu layer | Dynamic Sprite GPU Layer Particles | Create a high-performance particle effect by dynamically editing members of a Sprite GPU Layer to follow the mouse pointer with smooth interpolation and animations.
v4.1.0 | game objects/sprite gpu layer | GPU Animated Sprites | Demonstrates using a Sprite GPU Layer to efficiently render and animate a large number of sprites using shared animation data and individual property templates.
v4.1.0 | game objects/sprite gpu layer | GPU Animated Spritesheet from Atlas | Demonstrates how to create a high-performance GPU sprite layer using animation frames extracted from a texture atlas spritesheet.
v4.1.0 | game objects/sprite gpu layer | GPU Layer Easing Types | Demonstrates applying various easing functions like Linear, Quad, and Smoothstep to members within a Sprite GPU Layer.
v4.1.0 | game objects/sprite gpu layer | GPU Sprite Layer | Demonstrates how to use Sprite GPU Layers to render and animate hundreds of thousands of sprites simultaneously using high-performance GPU-based property templates.
v4.1.0 | game objects/sprite gpu layer | Incremental Sprite GPU Layer | Demonstrates how to add and manage massive amounts of sprites—up to one million—by incrementally populating a Sprite GPU Layer to ensure smooth performance during large buffer updates.
v4.1.0 | game objects/sprite gpu layer | One Million Pixel Sprites | Efficiently renders one million sprites using the Sprite GPU Layer, demonstrating high-performance handling of massive sprite counts where each sprite represents a single pixel from a source texture.
v4.1.0 | game objects/sprite gpu layer | Sprite GPU Layer Animation Data | Demonstrates how to manually define sprite properties and animation frame data using ArrayBuffers for high-performance rendering with the Sprite GPU Layer.
v4.1.0 | game objects/sprite gpu layer | Sprite GPU Layer Buffer Updates | Demonstrates high-performance updates for hundreds of thousands of sprites by directly manipulating the instance buffer within a Sprite GPU Layer.
v4.1.0 | game objects/sprite gpu layer | Sprite GPU Layer Bunny Dance | Learn how to use the Sprite GPU Layer to animate thousands of sprites simultaneously using property templates for high-performance hardware acceleration.
v4.1.0 | game objects/sprite gpu layer | Sprite GPU Layer Insert Members | Demonstrates how to dynamically add new elements to a Sprite GPU Layer at a specific index, used here to create an infinite scrolling field of sprites.
v4.1.0 | game objects/sprite gpu layer | Sprite GPU Layer Lighting | Demonstrates applying dynamic lighting and normal maps to thousands of sprites within a Sprite GPU Layer.
v4.1.0 | game objects/sprite gpu layer | Sprite GPU Layer Particle Fountain | Demonstrates rendering thousands of animated particles using the Sprite GPU Layer with additive blending and hardware-accelerated movement patterns like Gravity.
v4.1.0 | game objects/sprite gpu layer | Sprite GPU Layer with Multiple Atlas Frames | Demonstrates using a Sprite GPU Layer to efficiently render many sprites using various frames from a single texture atlas.
v4.1.0 | game objects/sprites | Create Sprites from Config | Demonstrates creating sprites using configuration objects, featuring dynamic value assignment through random integers, floats, arrays, and custom functions.
v4.1.0 | game objects/sprites | Custom Sprite Class | Demonstrates how to extend the Sprite class using ES6 syntax to create custom game objects with their own internal logic and preUpdate lifecycle methods.
v4.1.0 | game objects/sprites | Export Sprite to JSON | Demonstrates how to use the toJSON method to export a Sprite's current state—including position, rotation, scale, and alpha—into a serializable JSON object.
v4.1.0 | game objects/sprites | Moving a Sprite | Demonstrates how to move a Sprite across the screen by manually updating its position within the scene update loop.
v4.1.0 | game objects/sprites | Multiple Sprites | Load and display multiple independent Sprite objects at different coordinates within a single scene.
v4.1.0 | game objects/sprites | Rotate Around A Sprite | Demonstrates using Phaser.Math.RotateAroundDistance to create orbital motion where sprites rotate around the positions of other moving sprites.
v4.1.0 | game objects/sprites | Single Sprite | A basic example showing how to load an image and display it as a Sprite game object at a specific coordinate.
v4.1.0 | game objects/sprites | Sprite Alpha | Set the transparency of a Sprite using the alpha property.
v4.1.0 | game objects/sprites | Sprite Rotation | Demonstrates the difference between the angle (degrees) and rotation (radians) properties of a Sprite, featuring a visual guide of Phaser's circular coordinate system.
v4.1.0 | game objects/stamp | Stamp Across Multiple Cameras | Demonstrates how a Stamp Game Object is rendered across multiple cameras simultaneously, including how to hide it from specific viewports using camera.ignore.
v4.1.0 | game objects/stamp | Stamp HUD | Learn how to use Stamp Game Objects to create UI elements that remain fixed on the screen, ignoring camera movement, rotation, and zoom levels.
v4.1.0 | game objects/stamp | Stamp With Lighting | Demonstrates using the Stamp Game Object with the 2D lighting system and normal maps. It shows how a Stamp can receive dynamic lighting from multiple light sources as they move across the screen.
v4.1.0 | game objects/tests | Bitmap Text Properties | Learn how to manipulate Bitmap Text objects using origin, scale, rotation, alpha transparency, and blend modes.
v4.1.0 | game objects/tests | Dynamic Bitmap Text Properties | Demonstrates the creation and manipulation of Dynamic Bitmap Text objects, including properties like origin, scale, rotation, alpha, and blend modes.
v4.1.0 | game objects/tests | Image Positioning and Properties | Demonstrates basic image manipulation in Phaser including origin points, scaling, rotation, alpha transparency, and blend modes.
v4.1.0 | game objects/tests | Single TileSprite | A basic example showing how to create, scale, and rotate a single TileSprite game object in Phaser.
v4.1.0 | game objects/tests | Text Game Object Properties | Demonstrates core properties of the Text Game Object, including origin alignment, scaling, rotation, alpha transparency, and blend modes.
v4.1.0 | game objects/tests | TileSprite Properties | Demonstrates creating and manipulating TileSprites, including settings for positioning, origin, scale, rotation, alpha, and blend modes.
v4.1.0 | game objects/text | Basic Text | Create text objects using default settings, style configuration objects, or method chaining to set font properties like family, size, and color.
v4.1.0 | game objects/text | Basic Text Creation | Demonstrates the simplest way to add and display a text string at specific coordinates in a scene.
v4.1.0 | game objects/text | Change Text | Demonstrates how to update the string content of a Text object dynamically using both the text property and the setText method.
v4.1.0 | game objects/text | Create Text from Configuration | Demonstrates how to create and style a Text Game Object by passing a configuration object to the Scene Maker.
v4.1.0 | game objects/text | Custom Webfonts via WebFont Loader | Demonstrates how to dynamically inject CSS @font-face rules into the document and use the WebFont Loader to ensure custom fonts are ready before rendering Text objects.
v4.1.0 | game objects/text | Emojis in Text | Demonstrates how to render emojis within a Text Game Object using emoji characters directly or Unicode escape sequences.
v4.1.0 | game objects/text | Google Webfont | This example demonstrates how to use the WebFont Loader to import and apply Google Fonts to Text objects, ensuring fonts are loaded before they are rendered.
v4.1.0 | game objects/text | Italic Text and Padding | Demonstrates how to apply italic font styles to Text objects and use padding to prevent character clipping on the right edge.
v4.1.0 | game objects/text | Multi-Line Text | Demonstrates how to display multiple lines of text within a single Text Game Object by providing an array of strings.
v4.1.0 | game objects/text | Multi-Line Text Alignment | Demonstrates how to display multi-line text using an array of strings and apply horizontal alignment.
v4.1.0 | game objects/text | Right To Left Text | This example demonstrates how to render right-to-left (RTL) text scripts using the rtl property, showcasing how to handle punctuation, numerals, and bidirectional text marks.
v4.1.0 | game objects/text | Right-Aligned Text Origin | Demonstrates how to right-align a single line of text relative to its position by setting the horizontal origin to 1.
v4.1.0 | game objects/text | Simple Text Button | Demonstrates how to create an interactive UI button using a Text Game Object with background colors and hover state pointer events.
v4.1.0 | game objects/text | Speech Bubble | Demonstrates how to create a stylized speech bubble using Graphics for the bubble shape and arrow, combined with a Text object featuring word wrapping and alignment.
v4.1.0 | game objects/text | Text Alignment | Demonstrates how to align multiple lines of text within a Text Game Object using the left, center, and right alignment properties.
v4.1.0 | game objects/text | Text Bounds | Demonstrates how to retrieve and visualize the rectangular bounds of Text objects. See how the bounding box dynamically updates as content changes and how it accounts for styles like stroke and shadow.
v4.1.0 | game objects/text | Text Gradient | Apply a linear color gradient to a Text object using the native Canvas context API.
v4.1.0 | game objects/text | Text Line Spacing | Demonstrates how to adjust the vertical distance between multiple lines of text in a Text Game Object using the lineSpacing property.
v4.1.0 | game objects/text | Text Metrics | Provide pre-defined text metrics in the configuration object to bypass internal canvas scanning and improve initialization performance.
v4.1.0 | game objects/text | Text Object Test String | Demonstrates how to use the testString property to influence the calculation of font metrics and vertical text alignment.
v4.1.0 | game objects/text | Text Origin | Demonstrates how to set the origin of a Text object to center it on its position coordinates, allowing it to rotate around its own center point.
v4.1.0 | game objects/text | Text Padding | Demonstrates how to apply internal padding to Text objects using uniform values, axis-specific values, or individual settings for each side.
v4.1.0 | game objects/text | Text Padding from Config | Demonstrates how to apply uniform, axis-based, or per-side padding to Text objects using a configuration object.
v4.1.0 | game objects/text | Text Shadow and Stroke Styles | Demonstrates how to control drop shadows on Text objects, specifically applying them to the fill, the stroke, or both.
v4.1.0 | game objects/text | Text to JSON | Demonstrates how to export a Text game object's properties and style configuration into a JSON-compatible object using the toJSON method.
v4.1.0 | game objects/text | Text with Fallback Font | This example demonstrates how to specify a comma-separated list of fallback fonts for a Text object to ensure it renders correctly if the primary font is missing.
v4.1.0 | game objects/text | Word Wrap by Callback | Demonstrates how to use a custom callback function to define your own logic for word-wrapping text.
v4.1.0 | game objects/text | Word Wrap By Width | Demonstrates how to wrap text by a specified pixel width, highlighting the differences between basic wrapping and advanced wrapping for whitespace handling and long words.
v4.1.0 | game objects/text/tests | Word Wrap | Demonstrates various word wrapping techniques for Text objects, including basic width-based wrapping, advanced wrapping with whitespace trimming, and custom wrapping callbacks for manual control.
v4.1.0 | game objects/tile sprite | Change TileSprite Frame | Demonstrates how to dynamically update the texture frame of a TileSprite using the setFrame method with frames from a texture atlas.
v4.1.0 | game objects/tile sprite | Change TileSprite Frame | Demonstrates how to dynamically update the texture frame of a TileSprite at runtime using frames from a texture atlas.
v4.1.0 | game objects/tile sprite | Change TileSprite Frame and Size | Demonstrates how to dynamically update a TileSprite's dimensions and change its texture frame from an atlas while it is scrolling.
v4.1.0 | game objects/tile sprite | Create TileSprite from Frame Size | Demonstrates how to create a TileSprite that automatically matches the dimensions of its source texture frame by passing zero as the width and height.
v4.1.0 | game objects/tile sprite | Flipped Tile Sprites | A demonstration of how to create Tile Sprites and apply horizontal and vertical flipping to their display.
v4.1.0 | game objects/tile sprite | Tile Sprite from Texture Atlas (Canvas) | Demonstrates how to create and scroll multiple Tile Sprites using specific frames from a loaded texture atlas within the Canvas renderer.
v4.1.0 | game objects/tile sprite | Tile Sprite Movement | Demonstrates how to animate the texture offset of multiple Tile Sprites using tilePositionX and tilePositionY to create scrolling effects.
v4.1.0 | game objects/tile sprite | Tile Sprite Position and Scale | Demonstrates how to animate the internal texture position and scale of a Tile Sprite independently of the sprite's physical dimensions.
v4.1.0 | game objects/tile sprite | Tile Sprite Scrolling | Demonstrates how to create and animate scrolling textures using Tile Sprites, including the use of rotation, scaling, and tile position offsets.
v4.1.0 | game objects/tile sprite | TileSprite Canvas Rendering | Demonstrates how to use and animate TileSprites in Canvas mode, including updating tile positions to create scrolling effects alongside other game objects.
v4.1.0 | game objects/tile sprite | TileSprite from Texture Atlas | Demonstrates how to create multiple TileSprites using individual frames from a Texture Atlas and animate their tile positions.
v4.1.0 | game objects/tile sprite | TileSprite Pixel Art Scaling | Demonstrates dynamic tile scaling and rotation of a TileSprite using pixel art textures, while maintaining crisp rendering with the pixelArt configuration enabled.
v4.1.0 | game objects/video | Change Video Source | Demonstrates how to dynamically switch the source of a Video Game Object between different preloaded video assets during runtime.
v4.1.0 | game objects/video | Get First Video Frame | Demonstrates how to use the getFirstFrame method to display the initial frame of a video as a static preview before playback starts.
v4.1.0 | game objects/video | Load Video From URL | Demonstrates how to create a Video Game Object and load a video file directly via a URL at runtime instead of using the preloader.
v4.1.0 | game objects/video | Loop Video | This example demonstrates how to play a video on a continuous loop, handle browser autoplay restrictions, and listen for the 'loop' event to track repetitions.
v4.1.0 | game objects/video | Multiple Video Instances | Learn how to display multiple video Game Objects using the same video asset, each playing independently with a different start time offset.
v4.1.0 | game objects/video | Multiple Videos | This example demonstrates how to load, display, and play multiple video files simultaneously in a grid layout.
v4.1.0 | game objects/video | Play Video with Interaction | Demonstrates how to load and play a video file, including handling browser autoplay restrictions and toggling play/pause states via user input.
v4.1.0 | game objects/video | Stream Video From Webcam | Demonstrates how to capture a user's webcam stream using the browser MediaDevices API and display it within a Phaser Video Game Object.
v4.1.0 | game objects/video | Transparent Video | Demonstrates playing a transparent WebM video over a background shader and an audio-reactive waveform visualization.
v4.1.0 | game objects/video | Video as Shader Texture | Demonstrates how to use a playing video as a dynamic input texture for a GLSL shader. It shows how to register a video stream as a texture and pass it as a uniform into a shader object for real-time visual effects.
v4.1.0 | game objects/video | Video as Sprite Texture | Demonstrates how to use a single playing video as a dynamic texture source for multiple Image Game Objects and multi-pass shaders simultaneously.
v4.1.0 | game objects/video | Video Controls | Demonstrates how to control video playback in Phaser, including play, pause, and resume functions, as well as tracking progress and seeking to specific timestamps using a slider.
v4.1.0 | game objects/video | Video On Complete Event | Listen for the 'complete' event on a Video Game Object to trigger actions, such as displaying UI or restarting playback, once a video finishes playing.
v4.1.0 | game objects/video | Video Seek and Current Time | Demonstrates how to seek forward or backward in a video using relative time values and monitor playback progress.
v4.1.0 | game objects/video | Video Snapshot | Capture a snapshot of a playing video at its current frame and use it as a texture for an Image game object. This example also demonstrates how to adjust video playback speed.
v4.1.0 | game objects/video | Video Snapshot Area | Demonstrates how to capture a specific rectangular region of a playing video and apply it as a texture to another Game Object.
v4.1.0 | game objects/video | Video Transition | Demonstrates how to use a transparent WebM video as a transition layer to swap visibility between two game objects (a shader and another video) at a specific point in the playback.
v4.1.0 | games/avoid the germs | Avoid the Germs | A complete game template featuring pointer-based movement, Arcade Physics, and enemy object pooling. It demonstrates scene management, custom sprite classes, and using moveToObject for chasing AI logic.
v4.1.0 | games/bank panic | Bank Panic | A complete arcade-style shooter demonstrating custom Container classes for complex game entities, managing randomized character states, and coordinating global game logic across multiple interactive objects.
v4.1.0 | games/breakout | Breakout | A complete Breakout game example featuring Arcade Physics, grid-based brick alignment using a static group, and custom collision logic to control ball trajectory based on paddle impact.
v4.1.0 | games/card memory | Card Memory Game | A complete memory match game featuring 3D card flip animations created using Plane Game Objects. Demonstrates game state management, grid shuffling, pair-matching logic, and tween-based UI transitions.
v4.1.0 | games/coin clicker | Coin Clicker | A fast-paced mini-game demonstrating Arcade Physics for falling objects, timed events, high-score tracking via the Registry, and scene transitions.
v4.1.0 | games/emoji match | Emoji Match | A speed-matching game demonstrating how to align objects in a grid, manage texture atlas frames, and implement pair-matching logic using random array selection and staggered tweens.
v4.1.0 | games/firstgame | Complete Arcade Physics Platformer | The final version of the introductory tutorial game, featuring platform physics, star collection, scoring, and hazardous bombs that end the game.
v4.1.0 | games/firstgame | First Game Part 2: Loading Assets | Demonstrates how to preload static images and a spritesheet with specific frame dimensions into a Scene.
v4.1.0 | games/firstgame | First Game: Part 3 - Loading Assets | Demonstrates how to load image and spritesheet assets into a Scene and add a background image to the display list.
v4.1.0 | games/firstgame | First Game: Part 4 - Static Platforms | Learn how to use Arcade Physics static groups to create platforms and level geometry, including how to scale static bodies.
v4.1.0 | games/firstgame | Keyboard Controls and Movement | Learn how to move a player character using keyboard input, apply animations based on velocity, and implement jumping with Arcade Physics.
v4.1.0 | games/firstgame | Making Your First Game: Part 1 | The initial setup for a Phaser project, featuring the basic Game configuration and an empty Scene template.
v4.1.0 | games/firstgame | Making your First Game: Part 5 | Learn how to add a physics-enabled player sprite and define animations for walking left, right, and turning using a spritesheet.
v4.1.0 | games/firstgame | Making your first Phaser Game: Part 8 | Demonstrates how to collect items using physics overlaps. It features a callback function that disables star objects when they come into contact with the player.
v4.1.0 | games/firstgame | Player Animations and Collision | Demonstrates how to add a physics-enabled player sprite, set its bounce and world boundaries, define animations using a spritesheet, and handle collisions with static platform groups.
v4.1.0 | games/firstgame | Score and Collecting Items | Learn how to detect overlaps between physics bodies to collect items and update a score display using Text objects.
v4.1.0 | games/flood fill | Flood Fill Game | A complete color-matching puzzle game featuring a recursive flood-fill algorithm. It demonstrates staggered grid animations, particle effects for tile updates, and state-based game logic including move counters and win/loss conditions.
v4.1.0 | games/minesweeper | Minesweeper | A complete Minesweeper clone featuring dynamic bomb placement, recursive flood-fill for clearing empty areas, right-click flagging, and a retro UI with animated digit counters.
v4.1.0 | games/my first game | Animation Key Constants | Demonstrates organizing animation keys into a central constant object to manage asset strings safely and avoid typos throughout a project.
v4.1.0 | games/my first game | Audio Key Constants | Demonstrates organizing sound effect asset keys into a central constant object to ensure consistency and maintainability when referencing audio throughout a game.
v4.1.0 | games/my first game | Complete Multi-Scene Game Template | A comprehensive example showing how to structure a Phaser game with multiple scenes, including a boot sequence, preloader, main menu, arcade physics gameplay, a UI overlay, and a game over screen.
v4.1.0 | games/my first game | Sprite Keys Mapping | Demonstrates centralizing asset keys within a single object to avoid hard-coded strings and ensure consistency across the game logic.
v4.1.0 | games/my first game/gameObjects | Animated Coin Collection Effect | Demonstrates a custom Sprite class that manages its own spin animation, yoyo tween movement, sound effects, and self-destruction upon completion.
v4.1.0 | games/my first game/gameObjects | Automated Sprite AI (Chick) | A custom Arcade Physics Sprite class demonstrating automated movement, jumping on a timer, and collision-based direction switching.
v4.1.0 | games/my first game/gameObjects | Bomb Sprite Class | An example of extending the Arcade Physics Sprite class to create a custom bomb object with randomized velocity, angular rotation, and world bounds collision.
v4.1.0 | games/my first game/gameObjects | Collectible Physics Sprite | Demonstrates creating a custom Sprite class with Arcade Physics, featuring randomized bounce properties, collection logic, and physics body resetting.
v4.1.0 | games/my first game/gameObjects | Custom Player Sprite Class | An example of encapsulating player logic, such as movement, animations, and jumping, within a class that extends the Arcade Physics Sprite.
v4.1.0 | games/my first game/gameObjects | Dynamic Texture Platforms | Demonstrates creating custom-sized platform sprites by stamping tile textures onto a Dynamic Texture and configuring them as static Arcade Physics bodies.
v4.1.0 | games/my first game/gameObjects | Floating Score Text | Demonstrates a custom BitmapText class that animates upwards and automatically destroys itself using a Tween, creating a classic floating score effect for points.
v4.1.0 | games/my first game/gameObjects | Hamster Player Class | A demonstration of extending the Arcade Physics Sprite class to create a controllable character with encapsulated movement, jumping, and animation logic.
v4.1.0 | games/my first game/gameObjects | Key Sprite Class | A custom Sprite class for a collectible item that demonstrates a floating tween animation, cross-scene audio triggering, and self-destruction.
v4.1.0 | games/my first game/gameObjects | Mystery Box Platformer Mechanic | A custom Arcade Physics Sprite that reacts to being hit from below, triggering a bump animation and spawning an item.
v4.1.0 | games/my first game/gameObjects | Platformer Enemy Edge Detection | A sprite that uses an Arcade Physics sensor to detect the edges of platforms and automatically change direction.
v4.1.0 | games/my first game/gameObjects | Static Physics Sprite Class | Demonstrates creating a custom class that extends an Arcade Physics Sprite to define a static level exit with a specific texture frame and origin.
v4.1.0 | games/my first game/gameObjects | Treasure Box Game Object | A custom Arcade Physics Sprite class representing a treasure box that changes its animation frame and triggers a key spawn when activated.
v4.1.0 | games/my first game/scenes | Multi-Scene Game Architecture | A complete game structure demonstrating scene transitions, a preloader with a progress bar, and a parallel UI overlay scene for managing HUD elements and audio independently from the main game logic.
v4.1.0 | games/sliding puzzle | Sliding Puzzle Game | A complete sliding tile puzzle demonstrating dynamic texture slicing, interactive tile movement, a custom shuffle algorithm to ensure solvability, and WebGL shader effects for transitions.
v4.1.0 | games/snake | Snake Game - Part 7 | A complete Snake game implementation featuring grid-based movement, screen wrapping, body growth, self-collision detection, and a system to spawn food only on unoccupied grid tiles.
v4.1.0 | games/snake | Snake Game: Growth and Food Spawning | A comprehensive example of a Snake game featuring grid-based movement, body growth using ShiftPosition, and a system to spawn food only in valid empty grid locations.
v4.1.0 | games/snake | Snake Game: Part 1 - Asset Loading | Initial setup for a Snake game, including game configuration and preloading image assets for the food and snake body.
v4.1.0 | games/snake | Snake Part 2 - Movement and Wrapping | Implement grid-based movement with timed updates, screen wrapping, and directional controls that prevent reversing direction.
v4.1.0 | games/snake | Snake Part 3: Movement and Screen Wrapping | Demonstrates grid-based snake movement with input validation to prevent 180-degree turns, screen wrapping via Phaser.Math.Wrap, and body segment tracking using Phaser.Actions.ShiftPosition.
v4.1.0 | games/snake | Snake Part 4: Growth and Food Collision | Implementation of snake movement with grid-based screen wrapping, food collection, and growing the snake body using group actions.
v4.1.0 | games/snake | Snake Part 5: Food and Growth | This example demonstrates implementing food consumption and snake growth mechanics, including speed increases and tail management using Phaser.Actions.ShiftPosition.
v4.1.0 | games/snowmen attack | Snowmen Attack | A lane-based defense game featuring track-based movement, enemy AI state management, and projectile physics. Demonstrates horizontal lane switching, weighted random enemy behaviors, custom animation event callbacks, and collision handling within specific track groups.
v4.1.0 | games/stacker | Stacker | A complete recreation of the classic arcade stacking game. It demonstrates grid-based block movement, timing-dependent input handling, and row-by-row stacking logic where misaligned blocks are removed. Key features include difficulty scaling, scene management, and using the Registry for score tracking across Scenes.
v4.1.0 | games/tom | Tom | A complete pixel-art mini-game demonstrating scene management, Arcade Physics, and communication between a UI overlay and the game scene via the Registry event bus. Includes keyboard controls, animated sprites, local storage for high scores, and RetroFont parsing.
v4.1.0 | geom/circle | Circle Area | Demonstrates how to calculate and use the area of a Circle geometry object.
v4.1.0 | geom/circle | Circle Circumference | Calculate the circumference of a circle geometry object and visualize it as a vertical line.
v4.1.0 | geom/circle | Circle Circumference Point | Calculates and returns a point on the perimeter of a circle at a specific angle.
v4.1.0 | geom/circle | Circle Clone | Demonstrates how to create multiple independent copies of a Circle geometry object using the Clone method to build and animate a complex pattern.
v4.1.0 | geom/circle | Circle Contains Point | Demonstrates how to use the Circle.ContainsPoint geometric test to check if a moving point is located inside a circle's area.
v4.1.0 | geom/circle | Circle Contains Point | Demonstrates how to use the circle's contains method to detect if a point, such as the mouse pointer, is inside its boundary.
v4.1.0 | geom/circle | Circle Contains Rectangle | Demonstrates how to check if a Rectangle is fully contained within the bounds of a Circle using Phaser.Geom.Circle.ContainsRect.
v4.1.0 | geom/circle | Circle Copy From | Demonstrates how to use Phaser.Geom.Circle.CopyFrom to copy the position and radius of one circle geometry object into another.
v4.1.0 | geom/circle | Circle Equality | Demonstrates how to use Phaser.Geom.Circle.Equals to check if two circle shapes have the exact same position and radius.
v4.1.0 | geom/circle | Circle Get Point | Calculate a specific point along the circumference of a circle using a normalized value between 0 and 1.
v4.1.0 | geom/circle | Circle Get Random Point | Demonstrates how to generate random coordinates within a Circle geometry object, either by creating new point instances or updating existing ones.
v4.1.0 | geom/circle | Circle isEmpty | Demonstrates how to use the isEmpty method to check if a Circle geometry object has a radius of zero or less.
v4.1.0 | geom/circle | Circle Offset | Demonstrates how to translate a Circle geometry object by adding x and y offsets to its position.
v4.1.0 | geom/circle | Circle Offset Point | Demonstrates how to shift a circle's position by the coordinates of a point or vector using the OffsetPoint method.
v4.1.0 | geom/circle | Circle Properties | Demonstrates how to access and use the basic properties of a Circle geometry object, including its radius, diameter, and bounding box coordinates.
v4.1.0 | geom/circle | Circle Radius and Diameter | Demonstrates how to change the size of a geometry Circle by modifying its radius and diameter properties.
v4.1.0 | geom/circle | Circle Set Empty | Demonstrates how to use the setEmpty method to reset a Circle geometry object's dimensions to zero upon interaction.
v4.1.0 | geom/circle | Circle Set To | Use the setTo method to redefine the position and radius of a Circle geometry object.
v4.1.0 | geom/circle | Create Circle Geometry | Demonstrates how to create a geometric Circle object and render it using a Graphics object.
v4.1.0 | geom/circle | Get Circle Bounds | Demonstrates how to use Phaser.Geom.Circle.GetBounds to calculate and update the axis-aligned bounding box of a moving and resizing circle.
v4.1.0 | geom/circle | Get Points on a Circle | Demonstrates how to distribute a specific number of points evenly around the circumference of a Circle geometry object using the getPoints method.
v4.1.0 | geom/circle | Set Circle Position | Demonstrates various ways to position a Circle geometry object using setPosition, direct property updates, and edge-alignment properties like top, bottom, left, and right.
v4.1.0 | geom/ellipse | Adjust Ellipse Size | Demonstrates how to dynamically update the width and height of a geometric ellipse based on pointer movement and redraw it using a Graphics object.
v4.1.0 | geom/ellipse | Create Ellipse | Create a geometric ellipse object and draw its outline to the screen using a Graphics object.
v4.1.0 | geom/ellipse | Ellipse Area | Calculate the area of an ellipse and visualize it using a square of equivalent size as the ellipse dimensions change.
v4.1.0 | geom/ellipse | Ellipse Circumference | Calculate the circumference of an ellipse and compare it to a square and a circle with the same perimeter length.
v4.1.0 | geom/ellipse | Ellipse Circumference Point | Demonstrates how to calculate a specific coordinate on the perimeter of an ellipse based on a given angle using the CircumferencePoint method.
v4.1.0 | geom/ellipse | Ellipse Clone | Create copies of a geometric ellipse using the Clone method to generate a sequence of expanding shapes.
v4.1.0 | geom/ellipse | Ellipse Contains Point | Demonstrates how to check if a specific coordinate, such as the mouse pointer, is located inside the area of an ellipse.
v4.1.0 | geom/ellipse | Ellipse Contains Point | Demonstrates using the Ellipse.ContainsPoint function to detect if a moving coordinate is located within the bounds of an ellipse shape.
v4.1.0 | geom/ellipse | Ellipse Contains Rectangle | Demonstrates how to check if a Rectangle shape is entirely contained within the bounds of an Ellipse.
v4.1.0 | geom/ellipse | Ellipse Copy From | Demonstrates using Phaser.Geom.Ellipse.CopyFrom to duplicate the properties of one ellipse geometry object into another.
v4.1.0 | geom/ellipse | Ellipse Equals | Demonstrates how to use the Ellipse Equals method to determine if two ellipse geometry objects share the exact same position and dimensions.
v4.1.0 | geom/ellipse | Ellipse Get Bounds | Demonstrates how to calculate and update the axis-aligned bounding rectangle of a geometric ellipse as it moves and changes size.
v4.1.0 | geom/ellipse | Ellipse Get Points | Demonstrates how to extract a specific number of evenly spaced points from the perimeter of an Ellipse geometry object.
v4.1.0 | geom/ellipse | Ellipse Is Empty | Demonstrates using the isEmpty method to check if an Ellipse geometry object has a width or height less than or equal to zero.
v4.1.0 | geom/ellipse | Ellipse Major Radius | Calculates the major radius of an ellipse and visualizes it as a circle that matches the ellipse's longest axis.
v4.1.0 | geom/ellipse | Ellipse Offset | Shift the position of an ellipse geometry object by a specific amount using the static Offset function.
v4.1.0 | geom/ellipse | Ellipse Properties | Learn how to access geometric properties of an Ellipse, including its position, dimensions, and bounding box coordinates like left, right, top, and bottom.
v4.1.0 | geom/ellipse | Ellipse Set To | Demonstrates how to use the setTo method to update the position and dimensions of an Ellipse geometry object.
v4.1.0 | geom/ellipse | Get Minor Radius | Demonstrates how to calculate and retrieve the minor radius of an Ellipse geometry object, which represents half of its shortest diameter.
v4.1.0 | geom/ellipse | Get Point on Ellipse | Calculate a position along the perimeter of an ellipse using a normalized value between 0 and 1.
v4.1.0 | geom/ellipse | Get Random Point on Ellipse | Demonstrates how to generate and update random coordinates within the area of a geometric ellipse.
v4.1.0 | geom/ellipse | Move Ellipse | Demonstrates how to update the position of a geometry Ellipse object based on pointer movement and redraw it using a Graphics object.
v4.1.0 | geom/ellipse | Offset Ellipse by Point | Demonstrates how to translate an ellipse's position by adding the coordinates of a Vector2 using the OffsetPoint method.
v4.1.0 | geom/ellipse | Set Ellipse Empty | Demonstrates using the setEmpty method to reset a Phaser.Geom.Ellipse's dimensions to zero.
v4.1.0 | geom/ellipse | Set Ellipse Position | Demonstrates how to position a geometric Ellipse using setPosition, direct coordinate modification, and boundary properties such as top, bottom, left, and right.
v4.1.0 | geom/ellipse | Set Ellipse Size | Demonstrates how to update the width and height of a geometric ellipse using the setSize method.
v4.1.0 | geom/intersects | Circle to Circle Intersection | Demonstrates how to check for overlaps between two circles using the CircleToCircle intersection test.
v4.1.0 | geom/intersects | Line to Circle Intersection | Demonstrates intersection testing between a rotating line and a circle that follows the pointer.
v4.1.0 | geom/intersects | Line to Line Intersection | Demonstrates how to check for an intersection point between two geometric lines. One line rotates continuously while the other follows the mouse pointer.
v4.1.0 | geom/intersects | Line to Rectangle Intersection | Demonstrates how to detect if a rotating line segment intersects with a rectangle using Phaser.Geom.Intersects.LineToRectangle.
v4.1.0 | geom/intersects | Point to Line Intersection | Demonstrates checking if a point lies exactly on a line segment using the PointToLine intersection test.
v4.1.0 | geom/intersects | Point To Line Segment | Demonstrates checking if a point lies exactly on a specific line segment using the PointToLineSegment intersection test.
v4.1.0 | geom/intersects | Rectangle Intersection Area | Calculates and renders a new rectangle representing the overlapping intersection area of two rectangles.
v4.1.0 | geom/intersects | Rectangle to Circle Intersection | Demonstrates checking for an intersection between a Circle and a Rectangle geometry object. The shapes change color when they overlap.
v4.1.0 | geom/intersects | Rectangle to Rectangle Intersection | Demonstrates how to check for intersection between two Rectangle geometry objects using the RectangleToRectangle function.
v4.1.0 | geom/intersects | Rectangle to Triangle Intersection | Demonstrates checking for intersection between a static Rectangle and a rotating Triangle that follows the pointer.
v4.1.0 | geom/intersects | Rectangle to Values Intersection | Demonstrates checking for an intersection between a Rectangle and a set of boundary values (left, right, top, and bottom) representing other shapes.
v4.1.0 | geom/intersects | Triangle To Circle Intersection | Demonstrates intersection detection between a rotating triangle and a movable circle using Phaser.Geom.Intersects.TriangleToCircle.
v4.1.0 | geom/intersects | Triangle to Line Intersection | Demonstrates intersection testing between a rotating triangle and a line segment controlled by the pointer.
v4.1.0 | geom/intersects | Triangle to Triangle Intersection | Demonstrates detecting whether two triangle shapes are overlapping, using a mouse-controlled triangle and a rotating triangle.
v4.1.0 | geom/line | Bresenham Points | Calculate and visualize an array of points along a line using the Bresenham algorithm, with the line endpoints updated dynamically by mouse movement.
v4.1.0 | geom/line | Clone a Line | Demonstrates how to create independent copies of a Line geometry object using the Clone method.
v4.1.0 | geom/line | Create a Line Geometry | How to define a line geometry object using start and end coordinates and render it to the screen using a Graphics object.
v4.1.0 | geom/line | Get Line Endpoints | Demonstrates how to use getPointA and getPointB to retrieve the start and end coordinates of a rotating Line geometry object.
v4.1.0 | geom/line | Get Line Normal | Demonstrates how to calculate and use the perpendicular normal vector of a line to manipulate its geometry.
v4.1.0 | geom/line | Get Point on a Line | Calculate the coordinates of a point at a specific distance along a Line geometry using a normalized value between 0 and 1.
v4.1.0 | geom/line | Get Points along a Line | Demonstrates how to extract an array of evenly spaced points from a Line geometry object.
v4.1.0 | geom/line | Get Random Point on a Line | Demonstrates how to use the getRandomPoint method to retrieve random coordinates along a Line geometry object, either by creating new Point instances or updating existing ones.
v4.1.0 | geom/line | Inverse Line Geometry | Demonstrates how to flip a line's direction by rotating it 180 degrees around its starting point using the RotateAroundPoint method.
v4.1.0 | geom/line | Line Angle | Calculate and display the angle of a rotating Line geometry object using the Line.Angle method.
v4.1.0 | geom/line | Line Center On | Demonstrates how to reposition a Line geometry so that its midpoint is at specific coordinates, while the line is continuously rotating.
v4.1.0 | geom/line | Line Copy From | Demonstrates how to duplicate properties from one Line geometry object to another using the CopyFrom method to create a trailing line effect.
v4.1.0 | geom/line | Line Equals | Demonstrates using Phaser.Geom.Line.Equals to check if two line segments share the same start and end coordinates.
v4.1.0 | geom/line | Line Get Eased Points | Demonstrates how to generate a specific number of points along a line using an easing function to control their distribution.
v4.1.0 | geom/line | Line Height | Demonstrates how to calculate the vertical distance between the start and end points of a line using the Line.Height method.
v4.1.0 | geom/line | Line Length | Calculate the length of a Line geometry object and use the value to dynamically update a circle's radius.
v4.1.0 | geom/line | Line Mid Point | Calculate and visualize the middle point of a line geometry object as it is updated dynamically by the pointer.
v4.1.0 | geom/line | Line Normal Angle | Calculate and visualize the angle of the normal vector perpendicular to a line segment as it moves.
v4.1.0 | geom/line | Line Normal X and Y | Calculate and visualize the X and Y components of a line's normal vector using Phaser.Geom.Line.NormalX and NormalY.
v4.1.0 | geom/line | Line Offset | This example demonstrates how to use the Offset function to shift the position of a Line geometry object by specific x and y amounts.
v4.1.0 | geom/line | Line Perpendicular Slope | Demonstrates how to calculate the perpendicular slope and normal vector of a Line geometry object as it follows the mouse pointer.
v4.1.0 | geom/line | Line Properties | Demonstrates how to access and use the geometric properties of a Line object, including its bounding box edges (top, bottom, left, right) and start/end coordinates.
v4.1.0 | geom/line | Line Reflect Angle | Demonstrates how to calculate and visualize the angle of reflection between two lines using Phaser.Geom.Line.ReflectAngle.
v4.1.0 | geom/line | Line Set To | Demonstrates how to use the setTo method to update the start and end coordinates of a Line geometry object.
v4.1.0 | geom/line | Line Slope | Demonstrates how to calculate the slope of a line segment and use that value to influence movement along the line.
v4.1.0 | geom/line | Line Width | Demonstrates calculating the horizontal width (the bounding box width) of a line geometry object based on its start and end points.
v4.1.0 | geom/line | Point On Line | Demonstrates how to manually calculate and render a specific point at a fixed ratio along the length of a geometric line.
v4.1.0 | geom/line | Rotate a Line | Demonstrates how to continuously rotate a Line geometry object around its center point using the Line.Rotate function.
v4.1.0 | geom/line | Rotate Around Point | Demonstrates how to rotate a geometric line around a specific pivot point, such as an endpoint, its midpoint, or an arbitrary coordinate.
v4.1.0 | geom/line | Rotate Line Around a Point | Demonstrates how to rotate a geometric line around a specific x and y coordinate point.
v4.1.0 | geom/line | Set Line to Angle | Demonstrates how to use Phaser.Geom.Line.SetToAngle to position a line from a starting point using an angle and length, creating a geometric pattern by chaining lines together.
v4.1.0 | geom/point | Creating and Drawing Points | Demonstrates how to initialize Vector2 objects using various constructor arguments and render them as filled shapes using a Graphics object.
v4.1.0 | geom/point | Get Bounding Rectangle from Points | Demonstrates how to calculate a bounding box that encompasses a dynamic set of points using Phaser.Math.GetVec2Bounds.
v4.1.0 | geom/point | Get Centroid | Demonstrates how to use Phaser.Math.GetCentroid to calculate and visualize the geometric center of a dynamic set of points.
v4.1.0 | geom/point | Get Magnitude Squared | Demonstrates using Vector2.lengthSq to efficiently check distances between points by avoiding expensive square root calculations.
v4.1.0 | geom/point | Invert Point | Demonstrates using the invert method to negate the x and y components of a Vector2 point.
v4.1.0 | geom/point | Negate a Point | Demonstrates how to use the negate method to invert the coordinates of a Vector2, reflecting it across a central origin.
v4.1.0 | geom/point | Point Ceil | Demonstrates rounding a point's coordinates up to the nearest integer using the ceil method.
v4.1.0 | geom/point | Point Floor | Demonstrates how to use the floor method to round a point's coordinates down to the nearest integer value.
v4.1.0 | geom/point | Point Magnitude | Calculates and displays the magnitude (length) of a Vector2 relative to the origin as it follows the mouse pointer.
v4.1.0 | geom/point | Point Negation Pattern | Demonstrates creating symmetrical geometric patterns by using the negate method on vectors to flip their coordinates relative to an origin.
v4.1.0 | geom/point | Project onto Unit Vector | Demonstrates projecting a vector onto a normalized (unit) vector using the projectUnit method.
v4.1.0 | geom/point | Vector Cross Product | Demonstrates how to use the cross product of two 2D vectors to calculate the angle between them and determine their relative orientation.
v4.1.0 | geom/point | Vector Interpolation | Calculates a point between two Vector2 objects using the lerp method, visualizing the movement along a line connecting a fixed point and the mouse pointer.
v4.1.0 | geom/point | Vector Projection | Demonstrates how to project one vector onto another using the project method, visualizing the resulting point on a rotating line.
v4.1.0 | geom/point | Vector2 Clone | Demonstrates how to use the clone method to create copies of a Vector2 object, generating a sequence of unique points to define a path.
v4.1.0 | geom/point | Vector2 Copy From | Demonstrates how to use the copy method to transfer coordinates from the pointer to a Vector2 object, creating a motion trail effect.
v4.1.0 | geom/point | Vector2 Equality Check | Demonstrates how to use the equals method to compare if two Vector2 objects share the same x and y coordinates.
v4.1.0 | geom/point | Vector2 Set To | Demonstrates using the setTo method to update the coordinates of a Vector2 object with various argument combinations.
v4.1.0 | geom/polygon | Basic Polygon | How to create a Polygon geometry object from an array of coordinates and render it using Graphics.
v4.1.0 | geom/polygon | Clone a Polygon | Demonstrates how to create independent copies of a Polygon object using the Clone method, allowing multiple instances to be updated and rendered separately.
v4.1.0 | geom/polygon | Complex Polygon | How to define a complex shape using the Phaser Polygon geometry object and render it manually with a Graphics object.
v4.1.0 | geom/polygon | Get Polygon Points | Sample a specific number of coordinates along the edges of a Polygon geometry object.
v4.1.0 | geom/polygon | Polygon Area | Demonstrates how to calculate the area of a polygon dynamically. You can add new points with a click and move the final point with the pointer to see the area update in real-time.
v4.1.0 | geom/polygon | Polygon Contains | Demonstrates how to check if a specific point is located within the boundaries of a Polygon geometry object.
v4.1.0 | geom/polygon | Polygon Contains Point | Check if a specific point, such as the mouse cursor, is located within the bounds of a Polygon geometry object.
v4.1.0 | geom/polygon | Polygon Edge Rays | Demonstrates casting rays from a point to the vertices of multiple polygons using the GetRaysFromPointToPolygon intersection utility.
v4.1.0 | geom/polygon | Polygon Get AABB | Calculate and visualize the Axis-Aligned Bounding Box (AABB) of a polygon as its points are modified dynamically.
v4.1.0 | geom/polygon | Polygon Get Number Array | Demonstrates how to extract a flat array of coordinate numbers from a Polygon geometry object.
v4.1.0 | geom/polygon | Set Polygon Points Dynamically | Demonstrates how to update a Polygon's shape over time by using the setTo method with a growing array of coordinates.
v4.1.0 | geom/rectangle | Clone a Rectangle | Demonstrates using the Rectangle Clone method to create independent copies of a source rectangle.
v4.1.0 | geom/rectangle | Copy From Rectangle | Demonstrates how to use the Rectangle.CopyFrom method to copy the position and dimensions of one rectangle geometry object to another.
v4.1.0 | geom/rectangle | Create Rectangle Geometry | Demonstrates how to define a basic rectangle geometry object and render it filled with color using a Graphics object.
v4.1.0 | geom/rectangle | Decompose Rectangle into Points | Demonstrates how to use the Rectangle.Decompose method to extract the four corner coordinates of a Rectangle geometry object into an array of points.
v4.1.0 | geom/rectangle | Floor Rectangle | Demonstrates the effect of rounding a rectangle's coordinates down to the nearest integer using the Floor utility method.
v4.1.0 | geom/rectangle | Get Points along Rectangle | Demonstrates how to extract an array of points from a rectangle's perimeter using a specific step distance between each point.
v4.1.0 | geom/rectangle | Get Rectangle Center | Demonstrates how to use the GetCenter method to calculate and retrieve the center point of multiple Rectangle geometry objects.
v4.1.0 | geom/rectangle | Marching Ants Rectangle | Demonstrates how to use the Marching Ants function to distribute a specific number of points or sprites evenly along the perimeter of a Rectangle geometry object.
v4.1.0 | geom/rectangle | Merge Rectangle with XY Point | Demonstrates how to expand a rectangle's dimensions to encompass a new set of X and Y coordinates using the MergeXY method.
v4.1.0 | geom/rectangle | Random Point Outside Rectangle | Demonstrates how to generate random points that lie within an outer rectangle but outside of an inner rectangle.
v4.1.0 | geom/rectangle | Rectangle Area | Calculate the area of a Rectangle based on pointer movement and use the result to resize a secondary square.
v4.1.0 | geom/rectangle | Rectangle Aspect Ratio | Calculate and display the aspect ratio of a rectangle as its width and height change dynamically based on pointer movement.
v4.1.0 | geom/rectangle | Rectangle Ceil | Demonstrates how to use the Ceil method to round a rectangle's coordinates and dimensions up to the nearest integer, effectively snapping it to a pixel grid.
v4.1.0 | geom/rectangle | Rectangle Ceil All | Demonstrates using the CeilAll method to round up the position and dimensions of a Rectangle to the nearest integer values.
v4.1.0 | geom/rectangle | Rectangle Center On | Demonstrates how to use the CenterOn method to position a Phaser.Geom.Rectangle based on its center point coordinates.
v4.1.0 | geom/rectangle | Rectangle Contains Point | Demonstrates using Phaser.Geom.Rectangle.ContainsPoint to detect if a specific coordinate is within the boundaries of a rectangle.
v4.1.0 | geom/rectangle | Rectangle Contains Point | Demonstrates how to check if a specific point, such as the mouse pointer, is located within the bounds of a Rectangle geometry object.
v4.1.0 | geom/rectangle | Rectangle Contains Rectangle | Demonstrates how to check if one rectangle is fully contained within the boundaries of another using Phaser.Geom.Rectangle.ContainsRect.
v4.1.0 | geom/rectangle | Rectangle Deflate | Demonstrates how to shrink a rectangle from its center by using negative values with the Inflate method.
v4.1.0 | geom/rectangle | Rectangle Edges as Lines | Extract the four individual boundary edges of a Rectangle as Line objects using getLineA, getLineB, getLineC, and getLineD.
v4.1.0 | geom/rectangle | Rectangle Equality | Demonstrates how to use Phaser.Geom.Rectangle.Equals to check if two rectangle objects have the exact same position and dimensions.
v4.1.0 | geom/rectangle | Rectangle Fit Inside | Demonstrates how to scale and position a Rectangle to fit entirely within the bounds of another Rectangle using Phaser.Geom.Rectangle.FitInside.
v4.1.0 | geom/rectangle | Rectangle Fit Outside | Demonstrates using Phaser.Geom.Rectangle.FitOutside to scale a rectangle so that it fully encloses a target rectangle while maintaining its original aspect ratio.
v4.1.0 | geom/rectangle | Rectangle Floor All | Demonstrates using FloorAll to snap a rectangle's position and size to integer values, compared against a rectangle using sub-pixel floating point values.
v4.1.0 | geom/rectangle | Rectangle From Points | Demonstrates how to create and update a bounding rectangle that automatically encompasses a collection of points provided as either objects or arrays.
v4.1.0 | geom/rectangle | Rectangle Get Point | Demonstrates how to calculate coordinates along the perimeter of a rectangle using a normalized value between 0 and 1.
v4.1.0 | geom/rectangle | Rectangle Get Random Point | Demonstrates how to generate random coordinates within a Rectangle geometry object, either by creating new Point instances or updating existing ones.
v4.1.0 | geom/rectangle | Rectangle Get Size | Demonstrates how to use Phaser.Geom.Rectangle.GetSize to retrieve the width and height of a rectangle as a Point object.
v4.1.0 | geom/rectangle | Rectangle Inflate | Demonstrates how to expand the size of a Rectangle while maintaining its center position using the Inflate method.
v4.1.0 | geom/rectangle | Rectangle Intersection | Calculate the area of overlap between two rectangles and render the resulting intersection rectangle.
v4.1.0 | geom/rectangle | Rectangle Is Empty | This example shows how to use the isEmpty method to check if a Rectangle geometry object has a width or height of zero.
v4.1.0 | geom/rectangle | Rectangle Merge | Learn how to expand a base rectangle to encompass the area of another rectangle using the MergeRect geometry function.
v4.1.0 | geom/rectangle | Rectangle Merge Points | Demonstrates how to use Phaser.Geom.Rectangle.MergePoints to expand a rectangle's dimensions and position to encompass an array of point coordinates.
v4.1.0 | geom/rectangle | Rectangle Offset | Demonstrates how to use the Offset function to shift the position of a Rectangle geometry object by specific x and y amounts.
v4.1.0 | geom/rectangle | Rectangle Offset Point | Demonstrates how to shift a rectangle's position by applying the coordinates of a Point or Vector2 object.
v4.1.0 | geom/rectangle | Rectangle Overlaps | Demonstrates how to check for overlaps between two Rectangle objects using the Phaser.Geom.Rectangle.Overlaps function.
v4.1.0 | geom/rectangle | Rectangle Perimeter | Calculate and display the perimeter of a Rectangle geometry object as it is resized dynamically via pointer input.
v4.1.0 | geom/rectangle | Rectangle Perimeter Point | Calculates and visualizes a point moving along the perimeter of a rectangle based on a specific angle.
v4.1.0 | geom/rectangle | Rectangle Properties | Demonstrates how to access and use various properties of a Rectangle geometry object, such as its edges and center coordinates.
v4.1.0 | geom/rectangle | Rectangle Set Empty | Learn how to reset a Rectangle geometry object to zero position and dimensions using the setEmpty method.
v4.1.0 | geom/rectangle | Rectangle Set Size | Demonstrates how to modify the width and height of a Rectangle geometry object using the setSize method.
v4.1.0 | geom/rectangle | Rectangle Set To | Demonstrates how to update a rectangle's position and dimensions in a single call using the setTo method.
v4.1.0 | geom/rectangle | Rectangle Union | Demonstrates how to use the Rectangle Union function to calculate the smallest rectangle that encompasses two other rectangles.
v4.1.0 | geom/rectangle | Scale a Rectangle | Demonstrates how to use the Scale function to iteratively increase the dimensions of a geometry Rectangle object based on pointer input.
v4.1.0 | geom/rectangle | Set Rectangle Position | Demonstrates how to position a geometric Rectangle using the setPosition method and by directly modifying its x and y properties.
v4.1.0 | geom/rectangle | Sprite to Rectangle Perimeter | Calculates the point on a rectangle's perimeter that intersects with a line drawn from its center towards a moving sprite using an angle.
v4.1.0 | geom/triangle | Build Equilateral Triangle | Demonstrates how to create a geometrically perfect equilateral triangle by specifying a starting point and the length of its sides.
v4.1.0 | geom/triangle | Clone a Triangle | Demonstrates how to use the Clone method to create duplicates of a Triangle geometry object.
v4.1.0 | geom/triangle | Create Triangle | Learn how to define a geometric triangle and render it as a filled shape using the Graphics object.
v4.1.0 | geom/triangle | Right-Angled Triangle | Demonstrates how to create a right-angled triangle geometry object by specifying its position, width, and height.
v4.1.0 | geom/triangle | Rotate Triangle Around a Point | Demonstrates how to rotate a triangle geometry object around a specific X and Y coordinate.
v4.1.0 | geom/triangle | Rotate Triangle Around Center | Demonstrates how to rotate a Triangle geometry object around its own center point and render the results using Graphics.
v4.1.0 | geom/triangle | Rotate Triangle Around Point | Demonstrates how to rotate a triangle shape around various geometric anchor points, including the centroid, circumcenter, incenter, and specific vertices.
v4.1.0 | geom/triangle | Triangle Area | Calculate and display the area of a Triangle geometry object as its vertices are modified by the mouse pointer.
v4.1.0 | geom/triangle | Triangle Bottom | Demonstrates using the bottom property to get or set the vertical position of the lowest point of a Triangle geometry object.
v4.1.0 | geom/triangle | Triangle Center On | Demonstrates using the CenterOn function to position a geometric triangle by its center point as it follows the mouse pointer.
v4.1.0 | geom/triangle | Triangle Centroid | Calculate and visualize the geometric center (centroid) of a triangle by drawing lines from each vertex to the center point.
v4.1.0 | geom/triangle | Triangle Circumcenter | Calculate and visualize the circumcenter and circumcircle of a triangle geometry object.
v4.1.0 | geom/triangle | Triangle Circumcircle | Calculate and render a circle that passes through all three vertices of a Phaser Triangle geometry object.
v4.1.0 | geom/triangle | Triangle Contains Array | Demonstrates how to use the Triangle.ContainsArray method to filter an array of points and identify which ones fall within the area of a specific Triangle geometry.
v4.1.0 | geom/triangle | Triangle Contains Point | Demonstrates using the Triangle Contains function to check if a moving point is located within the area of a rotating triangle.
v4.1.0 | geom/triangle | Triangle Contains Point | Checks if the mouse pointer is inside a geometric triangle and changes the shape's color based on the result.
v4.1.0 | geom/triangle | Triangle Copy From | Learn how to duplicate geometry data between triangles using the CopyFrom method to create a trail of shapes that follow the pointer.
v4.1.0 | geom/triangle | Triangle Decompose | Extract the vertices of a triangle into an array of points to create complex visual patterns or path data.
v4.1.0 | geom/triangle | Triangle Edges | Learn how to retrieve the individual line segments that form the three sides of a Triangle geometry object using getLine methods.
v4.1.0 | geom/triangle | Triangle Equals | Demonstrates how to use the Triangle.Equals method to check if two triangle shapes have identical vertex coordinates.
v4.1.0 | geom/triangle | Triangle Get Point | Demonstrates how to use the getPoint method to calculate a specific coordinate along the perimeter of a Triangle shape.
v4.1.0 | geom/triangle | Triangle Get Points | Demonstrates how to retrieve an array of points evenly distributed along the perimeter of a triangle shape.
v4.1.0 | geom/triangle | Triangle Get Random Point | Demonstrates how to use the getRandomPoint method to pick random coordinates located within the area of a Triangle geometry shape.
v4.1.0 | geom/triangle | Triangle Incenter | Calculates the incenter of a triangle and visualizes it by drawing lines from each vertex to the center point.
v4.1.0 | geom/triangle | Triangle Left Property | Demonstrates moving a triangle geometry object horizontally by modifying its left property.
v4.1.0 | geom/triangle | Triangle Offset | Demonstrates how to move a Triangle shape by specific x and y values using the Offset function to create geometric patterns.
v4.1.0 | geom/triangle | Triangle Perimeter | Calculate and display the perimeter of a Triangle shape as one of its points moves with the pointer.
v4.1.0 | geom/triangle | Triangle Random Points | Demonstrates how to generate and plot random points inside the area of a Triangle geometry object.
v4.1.0 | geom/triangle | Triangle Right Property | Demonstrates how to use and modify the right property of a Triangle geometry object to reposition it based on its rightmost bounds.
v4.1.0 | geom/triangle | Triangle Set To | How to update all six coordinates of a Triangle geometry object simultaneously using the setTo method.
v4.1.0 | geom/triangle | Triangle Top Property | Demonstrates how to use the top property of a Triangle geometry object to adjust its vertical position.
v4.1.0 | geom/triangle | Triangulate Polygon | Decompose an array of polygon coordinates into a series of triangle objects using the BuildFromPolygon utility.
v4.1.0 | input/camera | Camera Ignore | Demonstrates how to use the camera ignore method to hide specific Game Objects from being rendered while keeping them active in the scene.
v4.1.0 | input/camera | Camera Ignore Container | Demonstrates how to use the camera ignore method to prevent a specific Container and its children from being rendered by a camera.
v4.1.0 | input/camera | Graphics Hit Testing with Camera | Demonstrates how to use getWorldPoint to map screen coordinates into world space for accurate hit testing against geometric shapes, even when the camera is zoomed or rotated.
v4.1.0 | input/camera | Large World Camera with Smoothed Controls | Navigate a massive 10,000x10,000 pixel world using SmoothedKeyControl and interactive sprites, featuring high-resolution support and camera boundaries.
v4.1.0 | input/camera | Multi-Camera Sprite Input | Demonstrates how interactive sprites correctly handle pointer events across four independent cameras, each with unique viewports, scroll positions, zoom levels, and rotations.
v4.1.0 | input/camera | Stacked Camera Input | Demonstrates how pointer input interacts with multiple layered cameras, showing how to detect which specific camera triggered an object interaction.
v4.1.0 | input/camera | World Coordinates | Learn how to track the mouse pointer's position relative to the game world versus the screen viewport while a camera is scrolling.
v4.1.0 | input/cursors | Custom Cursor | Demonstrates how to set custom hardware cursors using CSS cursor strings for both the global game canvas and specific interactive objects.
v4.1.0 | input/cursors | Custom Image Cursors | Learn how to use external .cur files to set a default game cursor and unique cursors for specific interactive sprites.
v4.1.0 | input/cursors | StarCraft 2 Custom Cursors | Demonstrates how to apply custom .cur file cursors globally to the game and to specific interactive Game Objects.
v4.1.0 | input/dom events | Detect Canvas Focus | Listen for gameout and gameover input events to trigger actions when the mouse leaves or enters the game canvas.
v4.1.0 | input/dom events | Pointer Button Status | Demonstrates how to track pointer coordinates and check the status of specific mouse buttons, including detection of the right mouse button.
v4.1.0 | input/dragging | Basic Sprite Dragging | Demonstrates how to make a sprite draggable by setting the interactive draggable property and updating its position during the drag event.
v4.1.0 | input/dragging | Bring Dragged Item to Top | Learn how to use the Display List bringToTop method to move a Game Object to the front of the scene when a drag operation begins.
v4.1.0 | input/dragging | Camera Movement and Object Dragging | Demonstrates dragging interactive objects while navigating a large world using camera keyboard controls, featuring parallax effects and automatic group rotation.
v4.1.0 | input/dragging | Drag Distance Threshold | Demonstrates how to use the dragDistanceThreshold property to require the pointer to move a minimum number of pixels before an object starts being dragged.
v4.1.0 | input/dragging | Drag Horizontally | Demonstrates how to restrict sprite movement to the horizontal axis and apply boundary constraints using the drag event and Phaser.Math.Clamp.
v4.1.0 | input/dragging | Drag on a Fixed Axis | Demonstrates how to lock a sprite's movement to either the horizontal or vertical axis based on the direction of the initial drag gesture.
v4.1.0 | input/dragging | Drag Time Threshold | Demonstrates how to set a time delay in milliseconds that must pass before an object is considered being dragged.
v4.1.0 | input/dragging | Drag Vertically | Demonstrates how to restrict sprite movement to the vertical axis during a drag operation and clamp the movement within a specific coordinate range.
v4.1.0 | input/dragging | Drag With Multiple Scenes | Demonstrates how to handle interactive objects and drag events across multiple simultaneously active scenes.
v4.1.0 | input/dragging | Dragging a Container | Demonstrates how to make a Container interactive and draggable. Shows that a Container must have a defined size to receive input and move all its child objects together.
v4.1.0 | input/dragging | Dragging Rotated and Scaled Objects | Demonstrates how to drag a Game Object that has been rotated and scaled, showing that hit detection remains accurate despite the transformations.
v4.1.0 | input/dragging | Dragging with Scroll Factor | Demonstrates how to drag Game Objects that have different scroll factor values. The input system automatically accounts for the scroll factor, ensuring the object tracks the pointer correctly even when configured for parallax movement.
v4.1.0 | input/dragging | Multi Camera Stack of Cards | Demonstrates dragging interactive objects across multiple viewports, each with different zoom levels and rotations.
v4.1.0 | input/dragging | Multiple Draggables | Demonstrates how to drag multiple overlapping Game Objects simultaneously by setting the input topOnly property to false.
v4.1.0 | input/dragging | Multiple Rotated and Scaled Draggable Objects | Demonstrates dragging multiple Game Objects that have been randomly scaled and rotated. It includes bringing the active object to the top of the display list upon dragging.
v4.1.0 | input/dragging | Multiple Scene Drag | Learn how to implement independent drag-and-drop interactions for game objects across multiple concurrently active scenes.
v4.1.0 | input/dragging | Retain Index After Drag | Demonstrates how to temporarily bring a Game Object to the top of the display list during a drag event and restore its original depth index once released.
v4.1.0 | input/dragging | Scale During Drag | Demonstrates how to dynamically adjust the scale of a Game Object based on its vertical position while it is being dragged across the screen.
v4.1.0 | input/dragging | Scrolling Text Box | Demonstrates how to create a scrollable text area using a Geometry Mask and pointer velocity to drag text within a specific zone.
v4.1.0 | input/dragging | Simple Sprite Dragging | Demonstrates how to make a sprite interactive, enable it for dragging, and use the drag event to update its position as the pointer moves.
v4.1.0 | input/dragging | Snap To Grid On Drag | Demonstrates how to use Phaser.Math.Snap.To to align game objects to a fixed 64x64 grid while dragging.
v4.1.0 | input/dragging | Stack of Cards | Learn how to make multiple images draggable and use the dragstart event to bring the active object to the top of the display list.
v4.1.0 | input/game object | Custom Shape Hit Area | Demonstrates how to define a custom interactive hit area for a Game Object using a geometric shape and a manual hit-test callback function.
v4.1.0 | input/game object | Custom Sprite Hit Area Size | Demonstrates how to adjust a Sprite's input hit area to be smaller, larger, or offset compared to its texture size using the hitArea.setTo method.
v4.1.0 | input/game object | Debug Hitareas | Learn how to visualize and debug interactive hit areas using different geometric shapes like Polygons, Circles, Ellipses, Rectangles, and Triangles.
v4.1.0 | input/game object | Destroy Sprite on Click | Learn how to remove interactive Game Objects from the scene by calling the destroy method within a global 'gameobjectdown' input event listener.
v4.1.0 | input/game object | Game Object Pointer Move Event | Demonstrates how to listen for the pointermove event on a specific interactive Game Object, updating its color tint as the pointer moves across it.
v4.1.0 | input/game object | Input Overlap with Top-Only Disabled | Demonstrates how to trigger input events for every overlapping Game Object under the pointer, rather than just the top-most one, by setting input.setTopOnly to false.
v4.1.0 | input/game object | Interactive Graphics Object | This example demonstrates how to make a Graphics object interactive by assigning a geometric hit area and responding to pointer events.
v4.1.0 | input/game object | Interactive Hand Cursor | Demonstrates how to change the mouse cursor to a 'pointer' (hand icon) when hovering over an interactive Game Object.
v4.1.0 | input/game object | Multiple Game Object Up | Demonstrates how to use the gameobjectup event to handle pointer release actions on multiple interactive Game Objects.
v4.1.0 | input/game object | Multiple Object Input Events | Demonstrates how to handle pointer down and up events across a large grid of interactive GameObjects using scene-level input listeners.
v4.1.0 | input/game object | Multiple Pointer Over and Out Events | Demonstrates how to use scene-level input events to detect when the pointer enters or leaves any interactive Game Object, applying a tint effect to highlight the target.
v4.1.0 | input/game object | Pointer Over and Out Events | Demonstrates how to use the pointerover and pointerout events to detect when a mouse pointer enters or leaves a Game Object's hit area.
v4.1.0 | input/game object | Pointer Up Event | Handle the pointerup event on an interactive Game Object to trigger an action when the pointer is released.
v4.1.0 | input/game object | Select and Deselect Sprites | Manage object selection state by toggling texture frames on click and using event propagation to deselect items when clicking the background.
v4.1.0 | input/game object | Sprite Pointer Events | Demonstrates how to listen for pointer down and up events on an interactive Game Object to trigger actions like changing a sprite's tint.
v4.1.0 | input/game object | Sprite Pointer Events | Demonstrates how to change a sprite's texture frame when the mouse pointer enters and leaves its interactive area.
v4.1.0 | input/game object | TileSprite Input Interaction | Demonstrates how to make a TileSprite interactive and handle pointer events, such as changing its tint and position when clicked.
v4.1.0 | input/game object | Top Only Over and Out Events | Demonstrates how to toggle the topOnly input property to control whether hover events fire only for the topmost object or for all overlapping Game Objects.
v4.1.0 | input/game object | World Space Input Interaction | Demonstrates interacting with Game Objects in world space while the camera is rotated, zoomed, and translated, including converting screen-space pointer coordinates into camera-relative world coordinates.
v4.1.0 | input/gamepad | Gamepad Across Scenes | Demonstrates how to use a gamepad to control sprites and trigger scene transitions across multiple different scenes.
v4.1.0 | input/gamepad | Gamepad Axes | Learn how to use gamepad analog stick data (axes) to control sprite movement and direction.
v4.1.0 | input/gamepad | Gamepad Debug | Access and display real-time diagnostic information for all connected gamepads, including button pressures, axis positions, and hardware identifiers.
v4.1.0 | input/gamepad | Move Sprite with Gamepad | Control sprite movement and horizontal flipping using connected gamepads, with support for multiple controllers simultaneously.
v4.1.0 | input/gamepad | Select Gamepad | Demonstrates how to listen for the first gamepad interaction to select a controller and then use its directional properties to move a sprite.
v4.1.0 | input/keyboard | Add Key | Demonstrates how to create specific Key objects using KeyCodes and poll their state within the update loop to detect if a key is currently pressed.
v4.1.0 | input/keyboard | Add Multiple Keys via String | Demonstrates how to register multiple keyboard keys simultaneously using a single comma-separated string and check their state in the update loop.
v4.1.0 | input/keyboard | Arcade Name Entry | Create a classic high-score name entry screen that supports both keyboard navigation and pointer interaction using bitmap text and grid snapping.
v4.1.0 | input/keyboard | Create Key Combo | Detect a specific sequence of key presses (a combo) and trigger an event when the sequence is completed successfully.
v4.1.0 | input/keyboard | Cross Scene Keyboard Events | Demonstrates how keyboard events propagate across multiple active scenes running in parallel and explores the hierarchy of local Key events versus global keyboard listeners.
v4.1.0 | input/keyboard | Cursor Key Timing Data | Demonstrates how to access timing and duration properties for cursor keys, including timeDown, timeUp, and current press duration while controlling a physics-enabled sprite.
v4.1.0 | input/keyboard | Cursor Keys | Control a physics-enabled sprite using the standard keyboard arrow keys via the built-in cursor keys helper.
v4.1.0 | input/keyboard | Global Keydown Event | Demonstrates how to capture every keyboard key press globally within a Scene using the keyboard manager's event listener.
v4.1.0 | input/keyboard | Key Combo Max Key Delay | Demonstrates how to set a time limit between key presses for a key combo, resetting the sequence if the delay is exceeded.
v4.1.0 | input/keyboard | Key Down Delay | Demonstrates how to use the checkDown method to apply a custom rate-limit or delay to keyboard input, controlling how often an action triggers while a key is held down.
v4.1.0 | input/keyboard | Key Down Duration | Demonstrates how to use the getDuration method to track exactly how long a specific keyboard key has been held down in milliseconds.
v4.1.0 | input/keyboard | Key Just Down | Demonstrates the JustDown function, which triggers an action exactly once when a key is first pressed, preventing repeated execution if the key is held.
v4.1.0 | input/keyboard | Key Modifiers | Detect if modifier keys such as Shift, Control, or Alt are being held down when a specific key event is triggered.
v4.1.0 | input/keyboard | Keyboard Event Listeners and Propagation | Demonstrates three ways to detect a single key press: via a Key object listener, a specific keycode global event, and a generic keyboard event, while showing how stopPropagation controls the flow between them.
v4.1.0 | input/keyboard | Keyboard Events and Polling | Demonstrates different ways to handle keyboard input: using global event listeners, specific key-down and key-up events, and creating Key objects for direct polling in the update loop.
v4.1.0 | input/keyboard | Konami Code Key Combo | Detect a specific sequence of key presses using the Keyboard Key Combo system and trigger an event when the sequence is completed.
v4.1.0 | input/keyboard | Multi-Scene Keyboard Events | Demonstrates how to handle keyboard input across different scenes, showing how input listeners function when scenes are paused, resumed, or running concurrently.
v4.1.0 | input/keyboard | Numpad Input | Listen for specific keydown events from the numeric keypad (numpad) to trigger actions in your game.
v4.1.0 | input/keyboard | Reset Key Combo On Match | Demonstrates how to use the resetOnMatch property to allow a keyboard combo to be triggered multiple times repeatedly.
v4.1.0 | input/keyboard | Retro Leaderboard Name Entry | A classic arcade-style high score name entry system using grid-based character selection. Demonstrates keyboard arrow navigation, mouse interaction, direct key-to-character mapping, and event-based communication between Scenes.
v4.1.0 | input/keyboard | Single Keydown Event | Demonstrates how to listen for specific keyboard press events using string-based event names like 'keydown-A' and 'keydown-SPACE', including how to capture keys to prevent default browser scrolling.
v4.1.0 | input/keyboard | Text Entry | Demonstrates how to capture keyboard input to create a simple text entry system, including handling backspace and alphanumeric characters.
v4.1.0 | input/mouse | Check Button Released | Detect which specific mouse button (left, right, middle, back, or forward) was released using pointer helper methods like leftButtonReleased and rightButtonReleased.
v4.1.0 | input/mouse | Circle Hit Area | Learn how to define a circular interactive hit area for a Sprite using a Geometric Circle shape and custom input callbacks.
v4.1.0 | input/mouse | Click Sprite | Enable input on a sprite to detect pointer events and change its visual state using tints during interactions.
v4.1.0 | input/mouse | Continuous Input Polling | Demonstrates how to use setPollAlways to trigger interaction events, like pointer over and out, even when the mouse is stationary but the object is moving.
v4.1.0 | input/mouse | Ellipse Hit Area | Demonstrates how to define a custom elliptical hit area for a sprite using a geometric shape and a contains check for pointer interaction.
v4.1.0 | input/mouse | Geometric Shape Hit Areas | Demonstrates how to define custom interactive hit areas for sprites using geometric shapes including Polygons, Circles, Ellipses, Rectangles, and Triangles.
v4.1.0 | input/mouse | Handle Multiple Overlapping Input Events | Demonstrates how to disable 'topOnly' input processing, allowing pointer events to trigger on all overlapping interactive objects simultaneously instead of just the top-most one.
v4.1.0 | input/mouse | Input Interactivity with Sprite Origins | Demonstrates how setting different origin points on interactive Sprites affects their hit detection and mouse hover areas.
v4.1.0 | input/mouse | Input Top Only | Demonstrates how to use the input topOnly property to ensure that only the top-most interactive GameObject receives input events when multiple objects overlap.
v4.1.0 | input/mouse | Interactive Text Hover Effects | Demonstrates how to enable input on Text Game Objects and use the gameobjectover and gameobjectout events to apply visual tint effects when hovering.
v4.1.0 | input/mouse | Mass Interactive Sprite Grid | A performance test featuring 10,000 interactive sprites in a grid. Demonstrates using shared hit areas for input, smoothed camera controls for navigation, and pointer events to highlight or hide objects.
v4.1.0 | input/mouse | Mass Scrolling Interactive Sprites | A stress test demonstrating input events and performance across 10,000 interactive sprites in a large grid, featuring camera controls and disabled camera culling.
v4.1.0 | input/mouse | Mass Sprite Input Detection | Demonstrates efficient pointer event handling for a large number of sprites arranged in a grid using groups and hit area callbacks.
v4.1.0 | input/mouse | Mouse Down Event | Detect a pointer down event and spawn a sprite at the pointer coordinates.
v4.1.0 | input/mouse | Mouse Wheel Input | Capture mouse wheel scroll events and use the delta values to scroll a TileSprite texture.
v4.1.0 | input/mouse | Mouse Wheel Over Game Object | How to detect and handle mouse wheel scroll events specifically when the cursor is positioned over an interactive Game Object.
v4.1.0 | input/mouse | Move Over Event | Demonstrates listening for the 'gameobjectmove' event on interactive sprites and using the 'topOnly' property to handle events for multiple overlapping objects.
v4.1.0 | input/mouse | Over and Out Events | Demonstrates using pointerover and pointerout events to detect when the mouse enters or leaves interactive Game Objects.
v4.1.0 | input/mouse | Pointer Lock | Demonstrates how to use the Pointer Lock API to capture the mouse cursor, utilizing relative mouse movement properties (movementX and movementY) to control a sprite.
v4.1.0 | input/mouse | Poll Only On Move | Configures input hit detection to only occur when the mouse moves. This prevents hover events from triggering automatically as moving sprites pass under a stationary cursor.
v4.1.0 | input/mouse | Polygon Hit Area | Define a custom interactive hit area for a Sprite using a Polygon geometry shape and the Polygon.Contains callback for precise pointer detection.
v4.1.0 | input/mouse | Right Mouse Button Interaction | Demonstrates how to detect right mouse button clicks, disable the default browser context menu, and use pointer duration to handle both short and long press events.
v4.1.0 | input/mouse | Sprite Pointer Events | Make a single sprite interactive and handle pointer down and up events to change its tint.
v4.1.0 | input/mouse | Top Only Input Over and Out Events | Demonstrates how to use the topOnly property to enable input events for all overlapping Game Objects simultaneously, rather than just the one on the top layer.
v4.1.0 | input/mouse | Triangle Hit Area | Demonstrates how to define a custom triangular hit area for a sprite using a geometric shape and a custom callback.
v4.1.0 | input/multitouch | Multi-Touch Drag | Demonstrates how to enable multi-touch dragging by adding extra input pointers and making multiple Game Objects interactive and draggable simultaneously.
v4.1.0 | input/multitouch | Multi-Touch Game Object Events | Demonstrates how to enable multiple simultaneous touch pointers and handle pointer events on several Game Objects at once.
v4.1.0 | input/multitouch | Multi-Touch Hover States | Demonstrates how multiple pointers can independently trigger 'over' and 'out' events on interactive objects simultaneously, enabling multi-touch hover detection.
v4.1.0 | input/multitouch | Multi-Touch Input with Multiple Pointers | Demonstrates how to enable support for multiple simultaneous touch points by adding extra pointers to the input manager and tracking their individual states.
v4.1.0 | input/multitouch | Multi-Touch Piano | A demonstration of multi-touch support using a playable piano. It shows how to enable multiple simultaneous pointers and handle interaction events across several objects at once.
v4.1.0 | input/pixel perfect | Pixel Perfect Alpha Input | Demonstrates how to enable pixel-perfect hit detection on an interactive sprite, ensuring pointer events only trigger on non-transparent areas of the image texture.
v4.1.0 | input/pixel perfect | Pixel Perfect Atlas Frame | Demonstrates how to use pixel-perfect input detection on a Sprite that uses a frame from a texture atlas.
v4.1.0 | input/pixel perfect | Pixel Perfect Dragging | Demonstrates how to enable dragging on sprites using pixel-perfect input detection and custom alpha tolerance levels.
v4.1.0 | input/pixel perfect | Pixel Perfect Input with Atlas Frames | Demonstrates how to enable pixel-perfect input detection on a sprite using a trimmed frame from a texture atlas.
v4.1.0 | input/pixel perfect | Pixel Perfect Input with Transformations | Demonstrates pixel-perfect input detection on sprites that have been scaled and rotated, including how to set a custom alpha threshold for hit detection.
v4.1.0 | input/pixel perfect | Pixel Perfect Pointer Down | This example demonstrates how to use pixel-perfect hit areas for input detection, allowing clicks only on non-transparent pixels and setting custom alpha thresholds.
v4.1.0 | input/pixel perfect | Pixel Perfect Pointer Move | Demonstrates how to use pixel-perfect input detection to trigger pointermove events only when the cursor is over non-transparent pixels, including how to set custom alpha thresholds.
v4.1.0 | input/pointer | Drag to Draw Rectangle | Demonstrates how to dynamically draw a rectangle on the screen by using pointer events to track initial click coordinates and current drag position.
v4.1.0 | input/pointer | Drawing Sprites with Pointer Move | Demonstrates how to create and place sprites along the path of the pointer while it is held down and moving across the screen.
v4.1.0 | input/pointer | External Link | Demonstrates how to open an external URL in a new browser window or tab using a pointer event on an interactive game object.
v4.1.0 | input/pointer | Input Event List | Demonstrates how to receive an array of all interactive Game Objects under a pointer during an input event by disabling top-only selection.
v4.1.0 | input/pointer | Interactive Card Stack | Demonstrates how to handle click events on a stack of overlapping interactive images, where the top-most object in the display list captures the input event.
v4.1.0 | input/pointer | Multi Camera Cards | Demonstrates how interactive game objects function across multiple cameras with different viewports, zoom levels, and rotations.
v4.1.0 | input/pointer | Multiple Scene Pointer Events | Demonstrates how pointer events are handled across multiple active scenes simultaneously, showing that interactive objects in different scenes can each trigger their own independent input events.
v4.1.0 | input/pointer | Pointer Buttons | Learn how to detect specific mouse buttons (left, right, or both) and disable the browser context menu for custom input handling.
v4.1.0 | input/pointer | Pointer Buttons Debug | Detect left, right, and simultaneous mouse button presses using pointer events and the native button state.
v4.1.0 | input/pointer | Pointer Debug | Display real-time properties of the active pointer, including position, midpoint, velocity, and movement deltas.
v4.1.0 | input/pointer | Pointer Down Event | Handle global pointer down events to spawn sprites at the clicked location while tracking the active pointer's coordinates and duration.
v4.1.0 | input/pointer | Pointer Move Event | Learn how to use the 'pointermove' event to track the pointer's position and spawn images at its current coordinates.
v4.1.0 | input/zones | Basic Input Zone | Demonstrates how to use invisible Zone game objects to define interactive hit areas over specific regions of a static image.
v4.1.0 | input/zones | Circular Drop Zone | Demonstrates how to create a drop zone with a circular hit area and handle drag events like enter, leave, and drop to provide visual feedback and snap items into position.
v4.1.0 | input/zones | Drop Zone | Learn how to create a drop zone for draggable Game Objects. This example covers detecting when a dragged object enters or leaves a zone, snapping objects into place upon a successful drop, and returning them to their original position if the drop fails.
v4.1.0 | input/zones | Resize Zone | This example demonstrates how to dynamically resize an input Zone and its hit area at runtime using a tween.
v4.1.0 | input/zones | Sprite Drop Zone | Demonstrates how to turn any Game Object into a drop zone for drag-and-drop interactions, including handling drag enter, leave, and drop events.
v4.1.0 | loader | Loader 404 Handling | Demonstrates how the loader behaves when assets fail to load due to 404 errors, showing that the game can still proceed to the create state.
v4.1.0 | loader | Loading Assets via Configuration Objects | Demonstrates loading assets using configuration objects instead of simple arguments, including setting custom XHR properties like headers, credentials, and timeouts.
v4.1.0 | loader | Loading Progress Bar | Create a visual progress bar using Graphics and the Loader's progress event to track the loading status of a large asset queue.
v4.1.0 | loader/animation json | Load Animation JSON | Demonstrates how to load animation configuration data from an external JSON file and apply those animations to sprites.
v4.1.0 | loader/audio | Load Audio | Learn how to load audio files in multiple formats (OGG, MP3, and M4A) for cross-browser compatibility and play them back in your scene.
v4.1.0 | loader/audio | Load Audio Sprite | This example demonstrates how to load an audio sprite using a JSON configuration file and multiple audio formats, then play specific sound markers defined within the sprite.
v4.1.0 | loader/audio | Load Audio Sprite Resources | Learn how to load and play audio sprites using a JSON configuration file and its associated audio resources.
v4.1.0 | loader/audio | Load Audio Stream | Demonstrates how to load and play audio as a stream by setting the stream property, which is useful for playing long music tracks without waiting for the full file to download.
v4.1.0 | loader/audio | Loading HTML5 Audio | Demonstrates how to load and play audio using the HTML5 Audio tag by disabling the Web Audio API in the game configuration.
v4.1.0 | loader/base64 | Base64 Bitmap Font | This example demonstrates how to load a bitmap font by providing Base64 encoded strings for both the image texture and the XML font data, instead of using external file paths.
v4.1.0 | loader/base64 | Load Bitmap Text from Base64 | Demonstrates how to manually parse and cache a Bitmap Font using base64 encoded PNG and XML data instead of external files.
v4.1.0 | loader/base64 | Loading a Base64 Image | Demonstrates how to load and display an image by passing a Base64 encoded string directly to the Phaser Loader instead of a file URL.
v4.1.0 | loader/base64 | Loading a Base64 Texture Atlas | Demonstrates how to load a texture atlas by passing Base64 encoded strings for both the image and the JSON data, instead of loading external files.
v4.1.0 | loader/binary | Load and Parse Binary Data | Demonstrates how to load a binary file and manually extract information by reading specific byte offsets from the binary cache.
v4.1.0 | loader/binary | Load Binary Data | Demonstrates how to load raw binary files into the loader, retrieve them from the binary cache as TypedArrays, and parse specific byte offsets from the data buffer.
v4.1.0 | loader/binary | Load Binary Data From Object | Demonstrates how to load binary files using a configuration object and retrieve them from the cache to extract and parse raw byte data.
v4.1.0 | loader/bitmap text | Load Bitmap Text via Asset Pack | Demonstrates how to load multiple bitmap fonts using a single JSON asset pack file and display them in a Scene.
v4.1.0 | loader/bitmap text | Loading Bitmap Fonts | Learn how to load and display bitmap fonts using PNG and XML pairs, including how to update bitmap text content dynamically in the update loop.
v4.1.0 | loader/file pack | Chained Asset Pack Loading | Demonstrates how to load multiple asset packs recursively, where one JSON pack file triggers the loading of another.
v4.1.0 | loader/file pack | JSON File Pack Loading | Demonstrates how to load multiple assets simultaneously using a JSON file pack manifest, including referencing assets with and without prefixes.
v4.1.0 | loader/file pack | Load File Pack | Demonstrates how to use a JSON manifest file (File Pack) to define and load multiple assets at once using the loader's pack method.
v4.1.0 | loader/file pack | Load File Pack From JSON Object | Demonstrates how to use a JavaScript object to define and load multiple assets at once using the Loader's pack method.
v4.1.0 | loader/file pack | Load Specific Section of a File Pack | Demonstrates how to load a specific sub-section of assets from a JSON file pack by providing a data key.
v4.1.0 | loader/file pack | Loading Atlas via File Pack | Demonstrates loading a JSON file pack that contains a texture atlas, then iterating through and displaying its frames.
v4.1.0 | loader/html | Load HTML to Texture | Demonstrates how to load an external HTML file and convert it into a texture that can be used by Game Objects like Images or Sprites.
v4.1.0 | loader/image | Load Image | Learn how to load external image files into the Phaser loader and display them as Image Game Objects in a scene.
v4.1.0 | loader/image | Load Image From Object | Demonstrates how to load an image by passing a single configuration object containing the key and URL to the loader instead of using separate arguments.
v4.1.0 | loader/image | Load Image on Click | Demonstrates how to load assets at runtime in response to a user event by manually starting the Loader outside of the preload phase.
v4.1.0 | loader/image | Load Normal Map | Demonstrates how to load an image along with its associated normal map by passing an array of file paths to the loader.
v4.1.0 | loader/image | Load Normal Map from Object | Demonstrates how to load an image and its associated normal map by passing a single configuration object to the loader.
v4.1.0 | loader/image | Load WebP Image | Demonstrates how to load and display a WebP image file as a texture.
v4.1.0 | loader/image | Loading Images with Normal Maps | Learn how to load an image with an associated normal map and use dynamic lighting to create depth and shadow effects that react to a moving light source.
v4.1.0 | loader/loader events | Add Files During Load | Demonstrates how to dynamically add new assets to the loader queue from within a loader event callback while the loading process is already in progress.
v4.1.0 | loader/loader events | Destroy Game During Load | Demonstrates how to safely destroy a Phaser game instance while the Loader is actively processing a queue of assets.
v4.1.0 | loader/loader events | Display File As Loaded | Demonstrates using the loader 'filecomplete' event to add images to the scene immediately after they finish loading while sequentially triggering the next load.
v4.1.0 | loader/loader events | File Complete Event | Learn how to use the 'filecomplete' event on an individual file loader to execute a callback as soon as a specific asset has finished loading.
v4.1.0 | loader/loader events | File Complete Event with Key | Learn how to use specific file completion events to trigger actions as soon as a particular asset finishes loading, using the 'filecomplete-type-key' event string.
v4.1.0 | loader/loader events | File Progress Event | Learn how to use the 'fileprogress' event to monitor the loading progress of a specific individual file within the Loader.
v4.1.0 | loader/loader events | Load Multiple Images | Demonstrates loading a large quantity of individual image assets and displaying them by iterating through all keys in the texture manager.
v4.1.0 | loader/loader events | Loader Duplicate File Handling | Demonstrates how the Loader handles requests for files that are already in the cache, verifying that the 'complete' event still fires correctly when no new files need to be processed.
v4.1.0 | loader/loader events | Loader Progress Bar | Demonstrates how to use the loader's progress event to create a visual loading bar while assets are being loaded.
v4.1.0 | loader/loader events | Loading Assets from External URLs | Demonstrates how to load assets using absolute URLs, which bypasses the loader's setBaseURL and setPath settings to fetch files from different domains.
v4.1.0 | loader/loader events | Multi-File Loader Progress | Learn how to use the fileprogress event to track and display the individual loading progress of multiple assets in the loader queue.
v4.1.0 | loader/loader events | Play Animation During Load | Learn how to use the Scene 'pack' property to load a spritesheet early, enabling an animated loading screen while a large batch of secondary assets is being processed.
v4.1.0 | loader/loader events | Start Loader Manually | Demonstrates how to initiate the loader manually using this.load.start() outside of the preload function, including how to dynamically add files to the load queue as others finish.
v4.1.0 | loader/plugin | Load Scene Plugin | Demonstrates how to load an external Scene Plugin during the preload phase and access its methods through a custom property on the Scene.
v4.1.0 | loader/scene | Load Scene File | Demonstrates how to dynamically load a Scene class from an external JavaScript file using the Loader.
v4.1.0 | loader/scene payload | Scene Pack Files Payload | Demonstrates how to use the 'pack' property in a Scene configuration to load assets before the Scene starts, making them available before the preload function is even called.
v4.1.0 | loader/script | Load External Script | Demonstrates how to load an external JavaScript file and access its global functions within a scene.
v4.1.0 | loader/sprite sheet | Load Sprite Sheet | Demonstrates how to load sprite sheets by defining frame dimensions, create animations from frame numbers, and display specific individual frames.
v4.1.0 | loader/sprite sheet | Load Sprite Sheet From Object | This example shows how to load a sprite sheet by passing a single configuration object to the loader, specifying the asset key, URL, and frame dimensions.
v4.1.0 | loader/sprite sheet | Load Sprite Sheet From Object Array | Demonstrates how to load multiple sprite sheets simultaneously by passing an array of configuration objects to the loader.
v4.1.0 | loader/sprite sheet | Loading Sprite Sheets via Scene Payload | Demonstrates how to load a sprite sheet and its frame configuration by defining it within the Scene constructor's pack property, instead of using the preload method.
v4.1.0 | loader/svg | Load SVG | Load and display Scalable Vector Graphics (SVG) files as textures in your game.
v4.1.0 | loader/svg | Load SVG with Fixed Size | Demonstrates how to load an SVG file with custom dimensions specified during the load process, allowing it to be rendered at a specific scale without losing quality.
v4.1.0 | loader/svg | Loading SVGs with Scale | Demonstrates how to scale SVG files during the loading process using a scale factor, allowing you to generate textures at specific sizes before they are added to the game.
v4.1.0 | loader/texture atlas json | Accessing Texture Atlas Metadata | Demonstrates how to load a texture atlas using an inline JSON object and retrieve its custom metadata, such as version and image format, via the texture's customData property.
v4.1.0 | loader/texture atlas json | Atlas with Normal Map from Configuration Object | Demonstrates how to load a Texture Atlas and its associated Normal Map using a single configuration object, enabling dynamic lighting for all frames within the atlas.
v4.1.0 | loader/texture atlas json | Get Atlas Custom Frame Data | Demonstrates how to access and use custom data fields defined within a Texture Atlas JSON, such as using custom properties to set sprite tints.
v4.1.0 | loader/texture atlas json | Load Atlas with JSON Object | Demonstrates how to load a Texture Packer atlas by passing a local JSON object directly to the loader instead of using an external file.
v4.1.0 | loader/texture atlas json | Load Atlas With Local JSON | This example demonstrates how to load a Texture Atlas by passing a local JavaScript object as the frame data instead of loading an external JSON file.
v4.1.0 | loader/texture atlas json | Load Texture Atlas From Payload | Demonstrates how to load a Texture Atlas using a pack object in the Scene configuration, allowing assets to be loaded automatically when the Scene starts.
v4.1.0 | loader/texture atlas json | Load Texture Atlas via Asset Pack | Demonstrates how to load a texture atlas by defining it within an external JSON Asset Pack file and then accessing its frames.
v4.1.0 | loader/texture atlas json | Load Texture Atlas via Configuration Object | Demonstrates how to load a texture atlas by passing a configuration object to the loader and accessing its frames to display images.
v4.1.0 | loader/texture atlas json | Load Texture Atlas with JSON | Demonstrates how to load a texture atlas using a JSON file, retrieve all available frame names, and display them randomly on the screen.
v4.1.0 | loader/texture atlas json | Load Texture Atlas with Normal Map | Demonstrates how to load a Texture Packer JSON atlas alongside a normal map to enable dynamic lighting effects on individual atlas frames.
v4.1.0 | loader/texture atlas json | Load, Remove and Reload Atlas | Demonstrates how to load a texture atlas, remove it from the texture manager, and then reload a different atlas file using the same key in another scene.
v4.1.0 | loader/texture atlas multi | Load Multi-Texture Atlas | Demonstrates how to load a multi-texture atlas where a single JSON file references multiple image files, and how to display various frames from it.
v4.1.0 | loader/texture atlas multi | Load WebP Multi-Texture Atlas | Demonstrates how to load a single texture atlas that is split across multiple WebP image files and display its frames.
v4.1.0 | loader/texture atlas multi | Multi-Texture Atlas with Normal Maps | Demonstrates loading a multi-file texture atlas that includes normal map data for dynamic lighting effects across multiple atlas frames.
v4.1.0 | loader/texture atlas pct | Load Texture Atlas (PCT) | Demonstrates how to load a texture atlas in the PCT format and display its frames on the screen.
v4.1.0 | loader/texture atlas phaser | Load Texture Atlas (Phaser Format) | Demonstrates how to load a texture atlas using the atlasPCT loader and display specific frames from the loaded texture.
v4.1.0 | loader/texture atlas unity | Load Unity Atlas | Demonstrates how to load and display textures from a spritesheet exported in the Unity atlas format using a PNG and its corresponding .meta file.
v4.1.0 | loader/texture atlas unity | Load Unity Texture Atlas Animation | Demonstrates how to load texture atlases exported from Unity using .meta files and create animations from the resulting frames.
v4.1.0 | loader/texture atlas xml | Load XML Texture Atlas | Demonstrates how to load and display frames from a texture atlas that uses an XML data file for frame definitions.
v4.1.0 | loader/tile maps | Load Tilemap from Local JSON Object | Demonstrates how to create a Tiled map by passing a local JavaScript object directly to the loader, rather than fetching an external JSON file.
v4.1.0 | loader/tile maps | Load Tilemap JSON | Demonstrates how to load a Tiled JSON file using the Loader, create a tilemap from the data, and display a layer with simple camera controls.
v4.1.0 | loader/tile maps | Load Tilemap JSON from Object | Demonstrates loading a Tiled JSON map by passing a configuration object to the loader instead of individual arguments.
v4.1.0 | loader/tile maps | Load Tilemap via Scene Payload | Demonstrates how to preload tilemap JSON and tileset image assets directly through the Scene configuration object using a pack file definition.
v4.1.0 | loader/tile maps | Loading Tilemaps with Normal Maps | Demonstrates how to load a Tiled JSON map with a corresponding normal map to enable dynamic 2D lighting effects on map layers.
v4.1.0 | math/distance | Distance Between Points | Demonstrates using Phaser.Math.Distance.Between to calculate the distance between two moving points and using that value to draw a dynamic circle.
v4.1.0 | math/distance | Distance Between Points | Calculate the distance between two objects and visualize the result by drawing a circle with a radius equal to that distance.
v4.1.0 | math/distance | Get Chebyshev Distance | Calculate the Chebyshev distance between two points—the maximum separation along any single axis—and visualize the result as a square bounding box.
v4.1.0 | math/distance | Snake Distance | Demonstrates how to calculate the Snake (Manhattan) distance between two points using Phaser.Math.Distance.Snake.
v4.1.0 | math/hash | Hash Stability | Compare the deterministic results of the Phaser Math Hash function against standard random values. This example shows how hashing provides consistent, repeatable values for the same input data.
v4.1.0 | math/hash cell | Hash Cell Landscape | Demonstrates using Phaser.Math.HashCell and Phaser.Math.Hash to create a procedurally generated, vertically scrolling landscape with deterministic noise-based positioning.
v4.1.0 | math/hash simplex | Hash Simplex Noise Movement | Demonstrates how to use Hash Simplex noise to generate organic, fluid motion and rotation for a sprite, creating a natural wind-blown effect.
v4.1.0 | math/hash simplex | Hash Simplex Noise Points | Demonstrates using the HashSimplex math function to generate organic, fluid motion and color transitions for a grid of Game Objects.
v4.1.0 | math/hash simplex | Procedural Isometric Landscape | Demonstrates creating a scrolling procedurally generated terrain using Hash Simplex noise, mapping height values to biomes with ColorRamps and dynamic IsoBox styling.
v4.1.0 | math/vec2 | Normalize Vector2 | Demonstrates how to normalize a Vector2 to create a unit vector (length of 1) and scale it to a fixed magnitude regardless of the input distance.
v4.1.0 | math/vec2 | Set Vector Magnitude | Demonstrates how to fix the length of a Vector2 to a specific value using the setLength method while maintaining its direction.
v4.1.0 | math/vec2 | Vector2 Add | Demonstrates how to add one Vector2 to another to translate a point's position in a loop.
v4.1.0 | math/vec2 | Vector2 Division | Demonstrates dividing the components of a 2D vector to create a sequence of points based on pointer position.
v4.1.0 | math/vec2 | Vector2 Dot Product | Demonstrates how to calculate the dot product between two vectors to determine the angle between them and their relative orientation.
v4.1.0 | math/vec2 | Vector2 Multiply | Demonstrates how to multiply Vector2 components iteratively to create a visual pattern based on pointer movement.
v4.1.0 | math/vec2 | Vector2 Perpendicular | Calculate and visualize a perpendicular vector using the normalizeLeftHand method, which rotates a Vector2 by 90 degrees relative to its origin.
v4.1.0 | math/vec2 | Vector2 Right Perpendicular | Demonstrates how to calculate a vector perpendicular to another by rotating it 90 degrees clockwise using the normalizeRightHand method.
v4.1.0 | math/vec2 | Vector2 Subtract | An example of manipulating the x and y properties of Vector2 objects over time to create a scrolling wave effect.
v4.1.0 | paths | Circle Loop Path | Demonstrates creating a complex path by combining multiple circular curves and moving an object along the resulting path using a tween.
v4.1.0 | paths | Circle Path | Demonstrates creating a circular path using an Ellipse curve and moving a graphic along it by tweening a progress value.
v4.1.0 | paths | Complex Path Bounds | Demonstrates how to calculate and visualize the bounding rectangle of a complex path composed of multiple segment types including lines, splines, ellipses, and bezier curves.
v4.1.0 | paths | Line to Ellipse Path | Demonstrates building a complex path using a combination of straight lines and elliptical curves, with an object animated along the path.
v4.1.0 | paths | Move Matter Body Along a Path | Demonstrates how to move a Matter.js physics body along a curve by calculating velocity vectors between points on an elliptical path.
v4.1.0 | paths | Move To | Demonstrates how to use the moveTo method to reposition the path starting point for a new segment without creating a connecting line.
v4.1.0 | paths | Path Bounds | Learn how to calculate and visualize the bounding box of a complex path containing multiple curve segments.
v4.1.0 | paths | Path Line and Bezier Curve | Demonstrates how to construct a complex path by combining straight lines and cubic Bezier curves, and how to animate an object along the resulting path using a Tween.
v4.1.0 | paths | Path with Line Segments | Construct a multi-segment path using lineTo and animate an object moving along the path using a tween and getPoint.
v4.1.0 | paths | Path with Multiple Segment Types | Demonstrates how to construct a complex path by combining splines, lines, ellipses, and cubic Bezier curves, while moving a follower along its length.
v4.1.0 | paths | Procedural Scrolling Landscape Path | Create an infinitely scrolling landscape using dynamic Paths and Graphics. This example demonstrates extending paths with random segments and using fillPoints to render filled terrain shapes.
v4.1.0 | paths | Simple Path and Follower | Demonstrates creating a path from multiple line segments and using a tween to move an object along the entire path length, even if the curves are not connected.
v4.1.0 | paths | Zig Zag Path | Create a custom zig-zag path using line segments and move multiple sprites along it by interpolating points based on tweened values.
v4.1.0 | paths/curves | Cubic Bezier Bounds | Learn 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.
v4.1.0 | paths/curves | Cubic Bezier Curve | Create a cubic Bezier curve using start, end, and two control points, and animate an object moving along the path using a tween.
v4.1.0 | paths/curves | Cubic Bezier Curve Debug | Visualizes the mathematical construction of a Cubic Bezier curve using linear interpolation across control points and intermediate lines.
v4.1.0 | paths/curves | Cubic Bezier Path Points | Demonstrates how to extract evenly spaced points or specific coordinates along a Cubic Bezier curve using getPoints and getPoint.
v4.1.0 | paths/curves | Drag Cubic Bezier Curve | Create and manipulate a Cubic Bezier curve by dragging its start, end, and control points, while an object follows the path via a tween.
v4.1.0 | paths/curves | Drag Quadratic Bezier Curve | Manipulate a Quadratic Bezier curve in real-time by dragging its start, end, and control points while an object animates along the path.
v4.1.0 | paths/curves | Drag Spline Curve | Demonstrates an interactive spline curve where control points can be dragged to reshape the path in real-time while an object follows the curve.
v4.1.0 | paths/curves | Draggable Line Curve | Demonstrates how to create a Line curve and interactively update its start and end points using draggable handle objects.
v4.1.0 | paths/curves | Ellipse Curve Animation | Demonstrates how to create an elliptical path and animate its x and y radius over time while moving an object along the curve.
v4.1.0 | paths/curves | Ellipse Curve Bounds | Demonstrates how to calculate and visualize the bounding box of an interactive Ellipse curve. Includes real-time controls for radius, rotation, and start/end angles.
v4.1.0 | paths/curves | Get Point at Distance on Line Curve | Demonstrates how to find the specific coordinates of a point located at a certain pixel distance along a line curve using getTFromDistance.
v4.1.0 | paths/curves | Get Point from Spline Curve | Demonstrates how to use getPointAt to find specific coordinates along a Spline curve based on a normalized value between 0 and 1.
v4.1.0 | paths/curves | Get Points on a Line Curve | Demonstrates how to use the getPoints method to sample a specific number of coordinate points at regular intervals along a linear path.
v4.1.0 | paths/curves | Get Points on Cubic Bezier Curve | Extract an array of coordinate points at regular intervals along a Cubic Bezier curve and visualize them using Graphics.
v4.1.0 | paths/curves | Get Spaced Points on a Cubic Bezier Curve | Extract and visualize a set of points distributed at equal distances along a Cubic Bezier curve using the getSpacedPoints method.
v4.1.0 | paths/curves | Get Spaced Points vs. Get Points | Demonstrates the difference between points sampled at segment intervals versus points distributed at equal distances along the entire path length.
v4.1.0 | paths/curves | Get Tangent Vectors on Cubic Bezier Curve | Learn how to extract and visualize tangent and normal vectors at specific points along a cubic Bezier curve to determine direction and orientation.
v4.1.0 | paths/curves | Interactive Ellipse Curve Parameters | Adjust an Ellipse curve's dimensions, rotation, and start/end angles using interactive sliders and a draggable center point while an object follows the path.
v4.1.0 | paths/curves | Interactive Spline Curve Bounds | Demonstrates how to calculate and update the bounding box of a Spline curve in real-time using interactive drag-handles to modify the curve points.
v4.1.0 | paths/curves | Line Curve | Demonstrates creating a simple straight-line curve and animating a point along its path using a tween.
v4.1.0 | paths/curves | Line Curve Bounds | Demonstrates how to calculate and update the bounding box of a line curve as its endpoints are moved via drag-and-drop handles.
v4.1.0 | paths/curves | Quadratic Bezier Curve | Create a quadratic Bezier curve and animate a point along its path using a tween to interpolate the position.
v4.1.0 | paths/curves | Rectangle Spline Intersection | Learn 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.
v4.1.0 | paths/curves | Spaced Points on a Line Curve | Demonstrates how to retrieve a specific number of evenly distributed points along a straight line curve.
v4.1.0 | paths/curves | Spline Between Points | Demonstrates how to create a smooth spline curve between two points by calculating midpoints and normals to generate oscillating control points along a straight line.
v4.1.0 | paths/curves | Spline Builder | Interactively 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.
v4.1.0 | paths/curves | Spline Curve | Create a smooth Spline curve from an array of points and animate a point along its length using the getPoint method and a Tween.
v4.1.0 | paths/curves | Spline Curve Distance Points | Demonstrates how to generate an array of points along a spline curve spaced at a specific pixel distance using the getDistancePoints method.
v4.1.0 | paths/curves | Spline Curve from Coordinate Array | Demonstrates how to create a smooth Spline curve by passing a flat array of X and Y coordinates to the constructor.
v4.1.0 | paths/followers | Basic Path Follower | Demonstrates how to create Path Follower Game Objects and have them move along a Spline curve using a defined duration.
v4.1.0 | paths/followers | Change Follower Path | Learn how to dynamically switch a follower sprite between different paths at runtime using the setPath method.
v4.1.0 | paths/followers | Leave Path | Demonstrates how to stop a path follow tween and manually reposition a sprite once it reaches the end of a spline curve.
v4.1.0 | paths/followers | Mass Followers | Demonstrates how to have multiple Game Objects follow a single spline curve path simultaneously with staggered start delays.
v4.1.0 | paths/followers | Multi-Curve Path Follower | Demonstrates creating a complex path composed of splines, lines, ellipses, and cubic Bezier segments, with a follower sprite that automatically rotates to match the path orientation.
v4.1.0 | paths/followers | Path Follower Rotation Offset | Demonstrates how to apply a rotation offset to a sprite following a path, allowing you to adjust its orientation relative to the direction of travel.
v4.1.0 | paths/followers | Path Follower Start Offset | Demonstrates how to start a path follower at a specific progress point along a curve using the startAt property.
v4.1.0 | paths/followers | Path from JSON | Create a path using loaded JSON data and animate multiple sprites along it using the Follower component.
v4.1.0 | paths/followers | Path from JSON All Types | Demonstrates how to create a complex path by loading a JSON definition containing various curve types and assigning multiple sprites as path followers.
v4.1.0 | paths/followers | Pause and Resume Path Following | Demonstrates how to toggle a follower's movement along a path using the pauseFollow and resumeFollow methods.
v4.1.0 | paths/followers | Rotate to Path | Demonstrates how to make a follower Game Object automatically rotate to align with the direction of a spline path as it moves.
v4.1.0 | paths/followers | Sparkle Trail | Create a flowing trail effect by staggering multiple Game Objects as they follow a spline curve with additive blending.
v4.1.0 | paths/followers | Wave Path Follower | Demonstrates creating a sinusoidal wave path using alternating elliptical curves and animating multiple sprites along it with staggered start delays.
v4.1.0 | paths/followers | Yoyo Path Follower | Demonstrates how to make a Game Object follow a Cubic Bezier path with a yoyo effect, causing it to travel back and forth along the curve.
v4.1.0 | physics/arcade | 10,000 World Bodies | A performance stress test demonstrating Arcade Physics handling 10,000 animated sprites with velocity, bounce, and world collision within a large scrollable area.
v4.1.0 | physics/arcade | 100 Arcade Physics Bodies in a Large World | Demonstrates 100 physics-enabled sprites bouncing within a large world boundary, featuring camera panning and zooming controls.
v4.1.0 | physics/arcade | 1000 Arcade Physics Bodies | A stress test demonstrating 1000 animated sprites with Arcade Physics enabled, featuring bounce, world bound collisions, and camera pan/zoom controls across a large world area.
v4.1.0 | physics/arcade | 40,000 Arcade Physics Bodies | A performance demonstration showcasing 40,000 Arcade Physics bodies using Blitter objects for high-speed rendering and optimized world settings.
v4.1.0 | physics/arcade | 500 Colliding Arcade Physics Bodies | Demonstrates performance with 500 animated sprites colliding with each other and world bounds in a large world environment with camera zoom and pan controls.
v4.1.0 | physics/arcade | Accelerate To Object | Demonstrates using accelerateToObject to make a physics body steadily gain speed as it moves toward a target point or object.
v4.1.0 | physics/arcade | Add Arcade Physics Body to Shape | Demonstrates how to add an Arcade Physics body to a primitive Shape object using physics.add.existing, enabling movement and world bound collisions.
v4.1.0 | physics/arcade | Angle From Velocity | Align a sprite's rotation with its current movement direction by mapping its rotation property to the physics body's velocity angle.
v4.1.0 | physics/arcade | Angular Acceleration | Use keyboard input to control the rotation speed of an Arcade Physics body using angular acceleration and angular drag.
v4.1.0 | physics/arcade | Angular Velocity | Rotate an Arcade Physics body using angular velocity and update its forward movement based on its current rotation using velocityFromAngle.
v4.1.0 | physics/arcade | Apply Force | Demonstrates how to manually calculate and apply radial explosion forces to Arcade Physics bodies based on their distance from a point and their individual mass.
v4.1.0 | physics/arcade | Arcade Body Controls | An interactive demonstration of Arcade Physics body properties including velocity, acceleration, gravity, bounce, and drag using a GUI to modify values in real-time.
v4.1.0 | physics/arcade | Arcade Physics Bounce Tracking | Demonstrates an object bouncing against world bounds using Arcade Physics with elastic bounce settings. It tracks and visualizes peak heights, velocity direction changes, and the duration between bounces.
v4.1.0 | physics/arcade | Arcade Physics Bullets Group | Demonstrates bullet pooling using custom Sprite and Group classes to efficiently manage, fire, and recycle projectiles in Arcade Physics.
v4.1.0 | physics/arcade | Arcade Physics Circular Bodies | Demonstrates how to assign circular collision bodies to Arcade Physics sprites using setCircle instead of the default rectangular bounding box.
v4.1.0 | physics/arcade | Arcade Physics Circular Collisions | Demonstrates how to use circular physics bodies instead of rectangular ones for accurate collisions between round objects, featuring both static and dynamic bodies.
v4.1.0 | physics/arcade | Arcade Physics Collision Filtering | Demonstrates how to define specific collision interactions between a single sprite and an array of target sprites using Arcade Physics colliders.
v4.1.0 | physics/arcade | Arcade Physics Direct Control Path | Demonstrates moving an immovable physics body along a complex path using direct control, allowing it to interact and collide with other dynamic bodies while its position is manually updated via a tween.
v4.1.0 | physics/arcade | Arcade Physics Drag | Demonstrates how drag values affect the deceleration of moving Arcade Physics bodies, showing various sprites slowing down at different rates.
v4.1.0 | physics/arcade | Arcade Physics Drag Scalar | Demonstrates applying manual drag to physics bodies by scaling their velocity vector length during the update loop.
v4.1.0 | physics/arcade | Arcade Physics Dragon Movement | Control a physics-enabled sprite using keyboard input to apply acceleration, featuring gravity, drag, and velocity-based animation switching.
v4.1.0 | physics/arcade | Arcade Physics FPS Comparison | This example demonstrates how setting different FPS values for Arcade Physics affects movement precision and delta calculations across multiple scenes.
v4.1.0 | physics/arcade | Arcade Physics Friction | Demonstrates how moving platforms transfer horizontal velocity to colliding bodies using different friction settings.
v4.1.0 | physics/arcade | Arcade Physics Gravity | Demonstrates how to apply global world gravity and combine it with individual body gravity settings, including how to disable gravity entirely for specific objects.
v4.1.0 | physics/arcade | Arcade Physics Group Collisions | Demonstrates collision detection between a player-controlled sprite and a static group of physics bodies.
v4.1.0 | physics/arcade | Arcade Physics Group vs Group Collision | Demonstrates how to handle collisions between two separate Arcade Physics groups, including using a collision callback to modify the individual objects involved.
v4.1.0 | physics/arcade | Arcade Physics Mass | Demonstrates how setting different mass values on Arcade Physics bodies affects the outcome of collisions and momentum transfer.
v4.1.0 | physics/arcade | Arcade Physics Mass Collision | A demonstration of how setting a specific mass on an Arcade Physics body influences velocity transfer and movement during a collision.
v4.1.0 | physics/arcade | Arcade Physics Max Speed | Demonstrates how to cap the velocity of a physics body using setMaxSpeed, ensuring it never exceeds a specific value regardless of acceleration applied.
v4.1.0 | physics/arcade | Arcade Physics Moving Platform | A demonstration of a player character interacting with static groups and a moving platform. Shows how to set up an immovable body with velocity and gravity disabled to create moving terrain.
v4.1.0 | physics/arcade | Arcade Physics Overlap Rectangle | Demonstrates how to use the overlapRect method to retrieve and manipulate all physics bodies located within a specific rectangular area.
v4.1.0 | physics/arcade | Arcade Physics Pushable and Immovable Interactions | Demonstrates the interaction between Arcade Physics bodies using different combinations of the pushable and immovable properties to control collision behavior.
v4.1.0 | physics/arcade | Arcade Physics Pushable vs Immovable | A side-by-side comparison of collision behaviors between Arcade Physics bodies with varying setPushable and setImmovable properties.
v4.1.0 | physics/arcade | Arcade Physics Space Battle | A functional mini-game example demonstrating bullet pooling with custom Physics Groups, enemy movement via velocity tweens, and overlap detection with particle effects.
v4.1.0 | physics/arcade | Arcade Physics Sprite Collision | Demonstrates basic collision between two individual physics-enabled sprites, including setting velocity, bounce, and world boundary constraints.
v4.1.0 | physics/arcade | Arcade Physics Static Bodies | This example demonstrates how to create static physics bodies that remain fixed in position while colliding with dynamic moving sprites.
v4.1.0 | physics/arcade | Arcade Physics World Controls | Interact with Arcade Physics world properties using a GUI to adjust gravity, world bounds, collision checks, time scaling, and debug visualization settings in real-time.
v4.1.0 | physics/arcade | Asteroids Movement | Learn how to implement classic Asteroids-style ship movement using Arcade Physics, featuring rotation-based acceleration, velocity damping, and screen wrapping.
v4.1.0 | physics/arcade | Blocked Faces | Demonstrates how to detect and visualize which sides of an Arcade Physics body are currently blocked or touching other bodies or the world bounds.
v4.1.0 | physics/arcade | Blocked Touching and Embedded States | Demonstrates how to detect and visualize different collision states on an Arcade Physics body, including touching other bodies, being blocked by world bounds, or being embedded within another object.
v4.1.0 | physics/arcade | Body Follow Path | Demonstrates moving an Arcade Physics body along a complex path by calculating velocity from path tangents, allowing other physics objects to interact and collide with it.
v4.1.0 | physics/arcade | Body on a Path | Demonstrates moving Arcade Physics bodies along a geometric path using an Ellipse curve and the getPoint method to update sprite positions while maintaining collision detection.
v4.1.0 | physics/arcade | Circular Collisions with a Static Body | Demonstrates multiple circular Arcade Physics bodies colliding and bouncing off a central static rectangular body.
v4.1.0 | physics/arcade | Circular Collisions with Static Body | Demonstrates how to use setCircle to define circular hitboxes for both dynamic physics groups and static images, featuring bounce physics and movement toward a central target.
v4.1.0 | physics/arcade | Closest and Furthest Physics Bodies | Identify the closest and furthest physics bodies relative to a specific source object using built-in Arcade Physics methods.
v4.1.0 | physics/arcade | Collide Event | Demonstrates how to enable and listen for the Arcade Physics world 'collide' event by setting onCollide to true on a physics body.
v4.1.0 | physics/arcade | Collider between Sprite and Static Group | Demonstrates Arcade Physics collision between a dynamic sprite and a group of static bodies. Highlights the use of group.refresh() to update static bodies after they have been manually positioned.
v4.1.0 | physics/arcade | Collider Process Callback | Demonstrates using a process callback to conditionally enable or disable collisions, creating a one-way platform effect where the player can jump through platforms from below.
v4.1.0 | physics/arcade | Collision Direction Detection | Demonstrates how to use the 'touching' property of Arcade Physics bodies to detect specific collision directions, such as hitting the bottom of a platform to spawn an item.
v4.1.0 | physics/arcade | Custom Bounds | Demonstrates how to restrict an Arcade Physics body to a custom rectangular area instead of the default global world bounds.
v4.1.0 | physics/arcade | Custom Collision Separation | Demonstrates how to use the customSeparateY property to disable automatic Arcade Physics vertical separation and implement manual collision logic through a callback function.
v4.1.0 | physics/arcade | Custom Debug Colors | Demonstrates how to set custom debug colors for Arcade Physics bodies, both globally through the game configuration and individually for specific bodies.
v4.1.0 | physics/arcade | Custom World Bounds for Bodies | Demonstrates how to assign specific movement boundaries to individual Arcade Physics bodies using custom bounds rectangles, rather than using the global world bounds.
v4.1.0 | physics/arcade | Destroy Physics Body | Demonstrates how to remove a physics-enabled Game Object and its associated body from the simulation using the destroy method.
v4.1.0 | physics/arcade | Direct Control Arcade Physics Body | Demonstrates how to use setDirectControl to move a physics body via Tweens or manual coordinate changes while still allowing it to physically interact with and push other objects.
v4.1.0 | physics/arcade | Direct Control Follow Mouse | Demonstrates how to use Arcade Physics' Direct Control mode to manually position a sprite via the mouse while maintaining collision interactions with other dynamic physics bodies.
v4.1.0 | physics/arcade | Direct Control Platforms | Demonstrates using direct control on Arcade Physics bodies moved by tweens, allowing them to correctly carry and interact with players while being positioned manually.
v4.1.0 | physics/arcade | Disable Collider | Demonstrates how to temporarily enable or disable specific Arcade Physics colliders or overlaps by toggling their active property, such as for a temporary invulnerability power-up.
v4.1.0 | physics/arcade | Drag on Both Axes | Demonstrates how to apply drag independently to the horizontal and vertical axes in Arcade Physics, causing moving bodies to slow down over time.
v4.1.0 | physics/arcade | Drag With Damping | Demonstrates Arcade Physics drag with damping enabled. In this mode, the drag value represents the proportion of velocity retained each frame, creating smooth deceleration.
v4.1.0 | physics/arcade | Drag With Damping On Both Axes | Demonstrates how to apply physics damping to sprites, causing them to decelerate on both the X and Y axes using a drag multiplier instead of a fixed reduction value.
v4.1.0 | physics/arcade | Draggable Physics Body | Demonstrates how to drag an Arcade Physics body by toggling the body's moves property to temporarily disable simulation during the drag event.
v4.1.0 | physics/arcade | Extending Arcade Sprite | Demonstrates how to create custom game object classes by extending the Arcade Physics Sprite class and registering them with the scene and physics world.
v4.1.0 | physics/arcade | Final Delta Displacement | Visualizes the total displacement of physics bodies after all movement and collision steps are resolved using deltaXFinal and deltaYFinal, while demonstrating how platform friction affects riding objects.
v4.1.0 | physics/arcade | Fixed vs. Variable Step Comparison | Compare Arcade Physics behavior using fixed and variable time steps. This example visualizes how sprite movement and delta calculations differ between the two update modes.
v4.1.0 | physics/arcade | Get Bodies Within Circle | Demonstrates how to use the Arcade Physics overlapCirc method to detect and highlight both dynamic and static physics bodies within a circular region.
v4.1.0 | physics/arcade | Group Set Velocity X | Demonstrates how to use the setVelocityX method on an Arcade Physics Group to apply an initial velocity with an incremental step value to all group members.
v4.1.0 | physics/arcade | Group Set Velocity Y | Demonstrates how to set the vertical velocity for all members of an Arcade Physics group, including using an optional step value to incrementally increase the speed for each member.
v4.1.0 | physics/arcade | Group vs Self | Demonstrates how to enable Arcade Physics collisions between members of the same Group.
v4.1.0 | physics/arcade | Group World Bounds Event | Demonstrates how to listen for collision events when objects hit the edge of the physics world. This example enables 'onWorldBounds' for a group of sprites and uses a global listener to change their frame upon impact.
v4.1.0 | physics/arcade | Immovable Arcade Physics Body | Demonstrates how an immovable body remains unaffected by collisions with other objects while still being able to move via its own velocity.
v4.1.0 | physics/arcade | Interpolate Velocity | Use linear interpolation (lerp) on Arcade Physics velocities to create a smooth follow-the-leader movement effect among a group of sprites.
v4.1.0 | physics/arcade | Interpolate Velocity Towards Target | Demonstrates how to move an Arcade Physics body toward a target and use velocity interpolation to smoothly decelerate as it arrives.
v4.1.0 | physics/arcade | Larger Bounding Box | Shows how to increase an Arcade Physics body size beyond the sprite's texture dimensions and center the body on the object.
v4.1.0 | physics/arcade | Manual Physics Update | Demonstrates how to use the 'customUpdate' setting to disable the automatic physics step, allowing for manual control of the simulation timing via the World update method.
v4.1.0 | physics/arcade | Mass and Collision Momentum | Demonstrates how setting a body's mass property affects the momentum and rebound behavior when two Arcade Physics bodies collide.
v4.1.0 | physics/arcade | Mass Collision Performance Test | A performance demonstration showing 10,000 Arcade Physics bodies colliding with a player-controlled sprite and the world bounds.
v4.1.0 | physics/arcade | Move and Stop at Position | Demonstrates how to move an Arcade Physics body towards a target point and stop it precisely using a distance threshold and body reset.
v4.1.0 | physics/arcade | Move To Object | Move a physics-enabled sprite toward a target object at a constant speed using the Arcade Physics moveToObject method.
v4.1.0 | physics/arcade | Move To Pointer | Demonstrates using the Arcade Physics moveToObject method to make sprites and group members follow the mouse pointer at constant speeds.
v4.1.0 | physics/arcade | Move to Position by Duration | Demonstrates using the Arcade Physics moveToObject method to calculate and set velocity based on a target duration in milliseconds.
v4.1.0 | physics/arcade | Non-Pushable Arcade Physics Bodies | Demonstrates how to use the setPushable method to prevent a physics body from being moved by collisions with other objects while still allowing it to move via gravity and velocity.
v4.1.0 | physics/arcade | Overlap Detection with Static Group | Demonstrates how to use the physics overlap method to detect when a dynamic sprite intersects with members of a static group without triggering a physical collision response.
v4.1.0 | physics/arcade | Overlap Event | Demonstrates how to trigger and listen for the global physics 'overlap' event by enabling the onOverlap property on an Arcade Physics body.
v4.1.0 | physics/arcade | Overlap Process Callback | Demonstrates using a process callback to perform advanced collision filtering, such as checking if an object is within a complex polygon shape during a physics overlap.
v4.1.0 | physics/arcade | Overlap Process Callback with Local Points | Filter Arcade Physics overlaps using a process callback that converts world coordinates to a sprite's local space to perform precise containment checks.
v4.1.0 | physics/arcade | Overlap Zone | Demonstrates how to use a Zone with a static Arcade Physics body to detect overlaps with moving objects, acting as a trigger area.
v4.1.0 | physics/arcade | Overlap Zone with Static Body | Demonstrates how to use an invisible Zone with a static physics body to detect overlaps and trigger callbacks when objects enter a specific area.
v4.1.0 | physics/arcade | Physics Bodies on TileSprites | How to add dynamic and static Arcade Physics bodies to TileSprite objects, enabling collisions and movement for tiled textures.
v4.1.0 | physics/arcade | Physics Body Without Sprite | Demonstrates how to manually assign and recycle Arcade Physics bodies to non-physics Game Objects, such as Blitter Bobs, for custom pooling and high-performance physics handling.
v4.1.0 | physics/arcade | Pushable Physics Bodies | Demonstrates the use of setPushable to determine if Arcade Physics bodies are moved when collided with, including how to toggle this property dynamically.
v4.1.0 | physics/arcade | Racecar Movement | Demonstrates top-down vehicle physics using velocityFromRotation to move a sprite based on its orientation, with throttle and angular acceleration control.
v4.1.0 | physics/arcade | Random Velocity | Demonstrates how to scatter physics bodies across a rectangle and assign them random velocity vectors using Phaser.Math.RandomXY.
v4.1.0 | physics/arcade | Recycle Arcade Physics Bodies | Demonstrates how to optimize performance by pooling and recycling Arcade Physics bodies. Learn how to manually disable bodies, store them in a pool, and re-attach them to new sprites to avoid repeated memory allocation.
v4.1.0 | physics/arcade | Remove Collider | This example demonstrates how to disable collision detection between objects by removing a collider reference after the first contact occurs.
v4.1.0 | physics/arcade | Restarting a Physics Scene | Demonstrates a complete scene lifecycle (Main Menu, Game, and Game Over) and how to properly restart a scene containing Arcade Physics sprites, custom world bounds, and camera controls.
v4.1.0 | physics/arcade | Rolling Body | Demonstrates how to simulate a rolling effect by synchronizing a physics body's angular velocity with its horizontal linear velocity.
v4.1.0 | physics/arcade | Rotate To Pointer | Demonstrates how to steer an Arcade Physics body towards the mouse pointer by calculating the shortest angle and applying angular velocity.
v4.1.0 | physics/arcade | Scene-Specific Physics Configuration | Demonstrates how to define Arcade Physics settings, such as gravity, within an individual Scene's configuration object rather than the global Game configuration.
v4.1.0 | physics/arcade | Set World Bounds | Learn how to define custom boundaries for the Arcade Physics world, constraining movement and collisions to a specific area smaller than the game canvas.
v4.1.0 | physics/arcade | Simple Arcade Physics Body | A basic demonstration of creating an Arcade Physics body with velocity, gravity, and world boundary collision.
v4.1.0 | physics/arcade | Simple Physics Group | Demonstrates creating an Arcade Physics Group with shared body properties such as bounce and world bounds collision, including a collider that makes group members react to one another.
v4.1.0 | physics/arcade | Smaller Bounding Box | Demonstrates how to resize an Arcade Physics body to be smaller than the sprite's original dimensions and center it on the object.
v4.1.0 | physics/arcade | Smooth Stop | Uses Arcade Physics and SmoothStep to gradually slow down a sprite as it nears its target coordinates for a natural-looking arrival.
v4.1.0 | physics/arcade | Space Combat Mechanics | A comprehensive example of Arcade Physics space movement featuring thrust acceleration, angular drag, and bullet pooling. It demonstrates multi-layered parallax backgrounds using TileSprites and a dynamic particle thruster that scales its intensity based on the ship's velocity.
v4.1.0 | physics/arcade | Sprite Follow Physics Body | Demonstrates how to sync the position of a non-physics sprite with a moving Arcade Physics body using Display Bounds helper functions.
v4.1.0 | physics/arcade | Sprite Follow Physics Sprite | Demonstrates how to align a non-physics Sprite to a moving Arcade Physics body by using the postupdate event and the alignment utility.
v4.1.0 | physics/arcade | Sprite Overlap with Static Group | Demonstrates how to detect overlaps between a moving sprite and a static physics group to create a collectible item system.
v4.1.0 | physics/arcade | Sprite Vs Immovable | Demonstrates Arcade Physics collision between a moving sprite and an immovable body. The immovable object remains fixed in place regardless of the collision force.
v4.1.0 | physics/arcade | Sprite vs Multiple Groups | Demonstrates checking for collisions between a single physics sprite and an array of multiple physics groups using a single collider call.
v4.1.0 | physics/arcade | Sprite vs. Group Collision | Demonstrates Arcade Physics collision between a single moving sprite and an entire group of static objects.
v4.1.0 | physics/arcade | Static Body Update | Demonstrates how to manually move a static physics body and use refreshBody to synchronize the physics collider with the Game Object's new position.
v4.1.0 | physics/arcade | Static Physics Group | Demonstrates creating a static physics group, positioning its members using a Shape Action, and calling the refresh method to synchronize the physics bodies with their new positions.
v4.1.0 | physics/arcade | Sticky Platform | Demonstrates how to create a moving platform that a character can stand on and follow. Uses Arcade Physics collisions and gravity adjustments to keep the sprite synced with the platform's motion.
v4.1.0 | physics/arcade | Top-down Shooter Average Camera Focus | A top-down shooter setup where the camera centers on the average midpoint between the player and the mouse reticle, featuring pointer lock and movement constraints.
v4.1.0 | physics/arcade | Top-down Shooter Controls with Pointer Lock | Demonstrates a top-down movement system using WASD keys, a crosshair controlled via Pointer Lock, and a player sprite that automatically rotates to face the reticle.
v4.1.0 | physics/arcade | Top-Down Shooter Mechanics | A comprehensive example of top-down combat featuring WASD movement, mouse-controlled aiming via pointer lock, bullet group pooling, and basic enemy AI with health tracking.
v4.1.0 | physics/arcade | Topdown Shooter with Pointer Lock Aiming | Features WASD movement and pointer lock aiming. The camera follows a reticle constrained to a radius around the player, while the player automatically rotates to face the target.
v4.1.0 | physics/arcade | Touching Faces | Detect and visualize which sides of an Arcade Physics body are touching another object or the world bounds using the 'touching' and 'blocked' properties.
v4.1.0 | physics/arcade | Trick Platforms | Demonstrates how to create platforms that drop and disable their collision properties immediately upon contact with the player using Arcade Physics.
v4.1.0 | physics/arcade | Tween Physics Body | Demonstrates how to move a physics-enabled body using a Tween while maintaining collision detection by setting the body's moves property to false.
v4.1.0 | physics/arcade | Tweening Arcade Physics Velocity | Use the Tween Manager to smoothly manipulate Arcade Physics body velocity. This example demonstrates how to ease a physics body to a stop and accelerate it again by targeting the velocity vector and custom speed properties.
v4.1.0 | physics/arcade | Tweening Physics Velocity Chain | Demonstrates controlling an Arcade Physics body's velocity using a Tween Chain to create complex movement patterns that interact with other physics objects.
v4.1.0 | physics/arcade | Using Collide and Overlap in Update | Demonstrates calling physics.collide and physics.overlap directly within the Scene update loop instead of using pre-defined colliders.
v4.1.0 | physics/arcade | Velocity From Rotating Angle | Demonstrates using the velocityFromAngle method to launch physics bodies at a specific speed in the direction of a rotating object's current angle.
v4.1.0 | physics/arcade | Velocity from Rotation | Demonstrates how to set an Arcade Physics body's velocity using a rotation angle and speed, illustrated by launching a sprite from a cannon toward the mouse pointer.
v4.1.0 | physics/arcade | Vertical Friction | Demonstrates how setting vertical friction on an immovable moving platform affects the velocity of sprites colliding with its sides.
v4.1.0 | physics/arcade | World Bounds Event | Demonstrates how to listen for the 'worldbounds' event in Arcade Physics to detect when a body hits the edge of the screen and respond based on which side was touched.
v4.1.0 | physics/arcade | World Bounds Event Custom Logic | Demonstrates how to use the Arcade Physics worldbounds event to trigger custom functions on Game Objects, such as changing animation frames, when they collide with the world boundaries.
v4.1.0 | physics/arcade | World Step Event | Listen for the Arcade Physics world step event to perform logic on every physics update, such as calculating distance and stopping a body when it reaches a destination using delta-based tolerance.
v4.1.0 | physics/arcade | Wrap Group | Demonstrates how to wrap an entire Arcade Physics group around the world bounds so that sprites reappear on the opposite side when they leave.
v4.1.0 | physics/arcade | Wrap Sprite | Demonstrates how to use the physics world wrap method to keep a moving sprite within the screen boundaries by wrapping it to the opposite side.
v4.1.0 | physics/matterjs | Add Matter Physics to a TileSprite | Demonstrates how to apply Matter JS physics to a TileSprite, allowing it to have physical properties like gravity and collisions while maintaining its scrolling texture capabilities.
v4.1.0 | physics/matterjs | Basic Constraint | Demonstrates how to create a basic constraint between two Matter.js physics bodies, specifying the resting length and stiffness.
v4.1.0 | physics/matterjs | Circle Stack | Demonstrates creating a grid of circular physics bodies using the Matter.js stack helper and manually syncing sprite positions to the physics engine.
v4.1.0 | physics/matterjs | Compound Body | Create a complex physics body in Matter.js by combining multiple primitive shapes, such as rectangles and circles, into a single compound object.
v4.1.0 | physics/matterjs | Create Matter.js Sensor | Demonstrates how to create a sensor in Matter.js, allowing a physics body to detect collisions and triggers events without causing a physical reaction.
v4.1.0 | physics/matterjs | Destroy Matter Body | Demonstrates how to remove a Matter.js physics body and its associated Game Object from the simulation using the destroy method.
v4.1.0 | physics/matterjs | Drag Matter Physics Bodies | Demonstrates how to enable interactive dragging of Matter.js physics bodies using a pointer constraint or mouse spring.
v4.1.0 | physics/matterjs | Drag Through Balls | Demonstrates dragging a heavy Matter JS body through a field of particles that are configured to ignore direct pointer interaction.
v4.1.0 | physics/matterjs | Draw Chain | Create a dynamic chain of Matter.js physics bodies by dragging the pointer, linking segments with constraints based on movement distance.
v4.1.0 | physics/matterjs | Draw Matter Triangles | Learn how to dynamically create small triangle physics bodies in the Matter.js engine by clicking and dragging the pointer.
v4.1.0 | physics/matterjs | Draw Stiff Line | Create a path of static Matter.js bodies connected by constraints while drawing with the mouse, forming a rigid obstacle for falling objects.
v4.1.0 | physics/matterjs | Drawing Smooth Physics Lines | Demonstrates how to create smooth visual paths using Spline curves while simultaneously generating a chain of static Matter.js bodies and constraints to act as physical barriers.
v4.1.0 | physics/matterjs | Fixed Rotation | Demonstrates Matter.js physics bodies interacting with a tilted static platform while maintaining a fixed orientation.
v4.1.0 | physics/matterjs | Ignore Gravity | This example demonstrates how to prevent specific Matter.js physics bodies from being affected by world gravity using the setIgnoreGravity method.
v4.1.0 | physics/matterjs | Is Point Within Body | Demonstrates how to check if a world coordinate point is contained within different Matter.js physics bodies and dynamically update their visual style.
v4.1.0 | physics/matterjs | Matter Body Follow Path | Demonstrates how to move a Matter.js physics body along a spline curve by manually updating its position based on the curve points.
v4.1.0 | physics/matterjs | Matter Body from Vertices | Demonstrates how to create a complex physics body from a path of vertices using Matter.js, allowing for custom collision shapes beyond basic primitives.
v4.1.0 | physics/matterjs | Matter Body Scale | Demonstrates how to scale a Matter.js physics body and its associated sprite dynamically during runtime.
v4.1.0 | physics/matterjs | Matter Body to JSON | Demonstrates how to export a Matter.js physics body configuration to a JSON object using the toJSON method.
v4.1.0 | physics/matterjs | Matter Body Velocity | Demonstrates how to manually set the horizontal and vertical velocity of a Matter.js physics body using setVelocity and setVelocityX.
v4.1.0 | physics/matterjs | Matter Custom Polygon Bodies | Demonstrates how to create complex Matter physics bodies from custom vertex data strings to match the shape of polygon game objects.
v4.1.0 | physics/matterjs | Matter JS Bridge | Create a flexible suspension bridge using a stack of physics bodies linked by a chain and anchored with world constraints.
v4.1.0 | physics/matterjs | Matter JS Collision Filtering | Demonstrates how to use collision categories and masks to control which physics bodies interact with each other and which pass through.
v4.1.0 | physics/matterjs | Matter JS Collision Groups | Demonstrate how to control body interactions using Matter.js collision groups and categories to enable or disable collisions between specific objects.
v4.1.0 | physics/matterjs | Matter JS Compound Sensors | Demonstrates how to create a complex Matter.js body using multiple parts, including sensors with custom labels to detect directional collisions.
v4.1.0 | physics/matterjs | Matter JS Scene Transition | Demonstrates how to transition between two different Scenes that both utilize Matter JS physics.
v4.1.0 | physics/matterjs | Matter JS Shape Bounds and Alignment | Demonstrates how to use body bounds and center of mass offsets to precisely position Matter JS physics bodies relative to their visual display.
v4.1.0 | physics/matterjs | Matter JS Thrust | Demonstrates using Matter.js thrust methods for omnidirectional movement and linking particle emitter properties to a physics body's speed.
v4.1.0 | physics/matterjs | Matter JS World Bodies and Camera Navigation | Create a large Matter JS physics world populated with random polygons and rectangles. This example demonstrates world bounds, mouse interaction via mouseSpring, and camera navigation including panning, zooming, and rotation.
v4.1.0 | physics/matterjs | Matter No Gravity | Demonstrates how to configure the Matter.js world with zero gravity so that physics bodies remain stationary by default.
v4.1.0 | physics/matterjs | Matter Physics Balls | Create multiple circular physics bodies with Matter.js, demonstrating how to set world boundaries, friction, and restitution (bounce) properties.
v4.1.0 | physics/matterjs | Matter Physics Bullet Pool | Learn how to manage a pool of projectiles in Matter Physics by cycling active states and manually adding or removing bodies from the physics world.
v4.1.0 | physics/matterjs | Matter Physics Circle Body | This example shows how to change a Matter.js physics body from a default rectangle to a circle with a specific radius and apply velocity and bounce properties.
v4.1.0 | physics/matterjs | Matter Physics Compound Body from JSON | Demonstrates how to import complex collision shapes exported from Physics Editor and assemble them into a compound Matter.js body using JSON data and the PhysicsEditorParser.
v4.1.0 | physics/matterjs | Matter Physics Debug Options | Demonstrates the extensive debug visualization features available in Matter.js, including the rendering of convex hulls, joint constraints, springs, velocity vectors, and sleep states.
v4.1.0 | physics/matterjs | Matter Physics Drag Filter | Demonstrates how to use collision filters with a mouse constraint to restrict which physics bodies can be dragged by the pointer.
v4.1.0 | physics/matterjs | Matter Physics Simple Body | An introduction to adding dynamic physics bodies and a static platform using the Matter.js physics engine.
v4.1.0 | physics/matterjs | Matter Physics with Bitmap Text | Demonstrates how to add a Matter.js physics body to a Bitmap Text object, allowing it to fall, bounce, and collide with other physical bodies.
v4.1.0 | physics/matterjs | Matter Physics with Text Objects | Demonstrates how to add Matter.js physics bodies to Text Game Objects, using both default rectangular bounds and custom polygon shapes.
v4.1.0 | physics/matterjs | Matter Physics Wrap Bounds | Demonstrates how to use the wrapBounds property in Matter.js to automatically wrap physics bodies around the screen when they exit a defined area.
v4.1.0 | physics/matterjs | Matter Scene Restart | Demonstrates how to restart a scene containing Matter physics bodies, effectively resetting the simulation and all objects to their initial state on a pointer click.
v4.1.0 | physics/matterjs | Matter Snake Chain | Demonstrates how to create a chain of circular bodies connected by springs in Matter.js to simulate a snake-like physics structure that can be manipulated with the mouse.
v4.1.0 | physics/matterjs | Matter.js Attractors | Demonstrates how to use attractors in Matter.js to create gravitational effects, pulling multiple physics bodies toward a specific object.
v4.1.0 | physics/matterjs | Matter.js Body Scaling | Demonstrates how to dynamically increase the scale of a Matter.js physics body and its associated sprite texture through user interaction.
v4.1.0 | physics/matterjs | Matter.js Chain | Demonstrates how to create a physics chain by connecting a sequence of bodies using joints. Includes a keyboard-controlled anchor block and mouse interaction.
v4.1.0 | physics/matterjs | Matter.js Chamfer Bodies | Demonstrates how to create physics bodies with rounded corners (chamfering) using uniform or per-vertex radius settings for rectangles and polygons.
v4.1.0 | physics/matterjs | Matter.js Circular Body | Demonstrates how to create a circular physics body in Matter.js, including setting friction, bounce, and initial velocity.
v4.1.0 | physics/matterjs | Matter.js Cloth | Create a cloth-like simulation using a soft body composed of particles and constraints. The example demonstrates how to pin the top row of particles to make it hang and interact with it using a mouse spring.
v4.1.0 | physics/matterjs | Matter.js Collision Event | Listen for the collisionstart event in the Matter physics world to detect when two bodies collide and manipulate their parent Game Objects.
v4.1.0 | physics/matterjs | Matter.js Container Collision | This example demonstrates how to apply Matter.js physics to a Container. It highlights the requirement of setting the container size before enabling physics and shows how to handle collision events for a physics-enabled container and its children.
v4.1.0 | physics/matterjs | Matter.js Custom Physics Shapes from JSON | Demonstrates how to load complex Matter.js physics bodies from a JSON file exported by PhysicsEditor and apply them to sprites.
v4.1.0 | physics/matterjs | Matter.js Point Intersections | Demonstrates how to use the intersectPoint method to detect and retrieve all Matter.js physics bodies located at a specific coordinate, such as under the mouse pointer.
v4.1.0 | physics/matterjs | Mixed Bodies | Demonstrates creating a variety of Matter.js physics bodies, including random polygons and rectangles, with mouse spring interaction enabled.
v4.1.0 | physics/matterjs | Move Matter Body with Cursors | Demonstrates how to control a Matter.js physics body using keyboard cursor keys to set horizontal and vertical velocity in a zero-gravity environment.
v4.1.0 | physics/matterjs | Multiple Physics Scenes | Demonstrates how Matter.js physics worlds are independent and isolated within each Scene, allowing for smooth transitions between different physics-enabled levels.
v4.1.0 | physics/matterjs | Offset Matter.js Physics Body | Demonstrates how to adjust the render offset of a sprite to correctly align its texture with a custom-shaped Matter.js physics body.
v4.1.0 | physics/matterjs | Pachinko | A Pachinko game demonstration using Matter.js collision categories and masks, featuring a moving bucket sensor and static pins.
v4.1.0 | physics/matterjs | Particles Follow Matter Body | Demonstrates how to attach a particle emitter to a Matter.js physics body and dynamically adjust particle speed, lifespan, and alpha based on the body's current velocity.
v4.1.0 | physics/matterjs | Physics Editor with Matter.js | Demonstrates how to load and apply complex custom body shapes, exported from a physics editor JSON file, to Matter.js game objects and containers.
v4.1.0 | physics/matterjs | Polygon Physics Body | Demonstrates how to create a regular polygon-shaped physics body in Matter.js by defining the number of sides and a radius.
v4.1.0 | physics/matterjs | Rectangle Physics Body | Learn how to define a custom-sized rectangular physics body for a sprite in Matter.js, overriding the default texture dimensions.
v4.1.0 | physics/matterjs | Restart Physics Scene | This example demonstrates how to transition between scenes and restart a Matter.js physics-enabled scene, showing how the physics world is automatically managed when scenes stop and start.
v4.1.0 | physics/matterjs | Rotate Body With Cursors | Control a Matter.js physics body using keyboard input to apply angular velocity for rotation and thrust for movement, featuring a particle trail that reacts to speed.
v4.1.0 | physics/matterjs | Sleep Events | Demonstrates how to use Matter.js sleep events to track when physics bodies come to rest or wake up. Objects are tinted red when they enter a sleeping state and return to normal when moved.
v4.1.0 | physics/matterjs | Top Down Car Movement | Demonstrates top-down vehicle physics using Matter.js, including thrust, air friction, and applying steering forces at specific points on the physics body.
v4.1.0 | physics/matterjs | Trapezoid Matter Body | Demonstrates how to create a custom trapezoid-shaped physics body in Matter.js using the slope property.
v4.1.0 | physics/matterjs | Wrecking Ball | Demonstrates creating a stable stack of crates in Matter.js by increasing physics solver iterations and adding mouse interaction.
v4.1.0 | physics/multi | Arcade and Matter Physics | Demonstrates how to initialize and use both the Arcade and Matter JS physics engines simultaneously within the same Scene.
v4.1.0 | plugins | Creating a Global Plugin | This example demonstrates how to create a custom global plugin, register it in the game configuration, and access its methods from within a scene.
v4.1.0 | plugins | Custom Game Object via Plugin | Demonstrates how to register a custom Game Object class as a plugin so it can be added to a scene using a custom method on the Scene Factory (this.add).
v4.1.0 | plugins | Custom Loader File Type | Demonstrates how to extend the Phaser Loader by registering a custom file type through a plugin, including processing the loaded data before it enters the cache.
v4.1.0 | plugins | Custom Scene Plugin | Demonstrates how to create and register a custom Scene Plugin that maps to a specific property on the Scene, used here to generate a procedural fractal via a Canvas texture.
v4.1.0 | plugins | Custom Scene Plugin | Demonstrates how to create, register, and use a custom Scene Plugin to extend Scene functionality with reusable logic.
v4.1.0 | plugins | Destroying a Game Instance with Plugins | Demonstrates how to completely destroy a Phaser game instance that uses a custom plugin and then safely recreate it from scratch.
v4.1.0 | plugins | Global Plugin from Class | Demonstrates how to define a custom class extending BasePlugin, register it globally via the Loader, and access its functionality from within a Scene.
v4.1.0 | plugins | Global Scene Plugin | Demonstrates how to register a global plugin in the game configuration and access its methods within a Scene using a custom property mapping.
v4.1.0 | plugins | Install Global Plugin At Runtime | Demonstrates how to dynamically register and instantiate custom global plugins using the Plugin Manager after the game has started.
v4.1.0 | plugins | Loading a Scene Plugin | Demonstrates how to dynamically load a Scene Plugin and use its injected property to create and animate specialized content within a Scene.
v4.1.0 | plugins | Loading a Scene Plugin | Demonstrates how to load an external Scene-level plugin during the preload phase and access its functionality via a custom property on the Scene.
v4.1.0 | plugins | Loading External Plugins | This example demonstrates how to load an external JavaScript plugin file during the preload phase and access its custom methods within a Scene.
v4.1.0 | plugins | Multiple Global Plugin Instances | Demonstrates how to start and manage multiple independent instances of the same global plugin class using the Plugin Manager, allowing for separate configurations and states.
v4.1.0 | plugins | Rendering FIGlet Fonts with Sprites | Demonstrates how to manually parse a FIGlet (.flf) font file and render text by positioning sprites based on the ASCII character data.
v4.1.0 | plugins | Scene Plugin Dynamic Fractal Canvas | Demonstrates how to create a custom Scene Plugin that renders an animated Julia set fractal onto a dynamic canvas texture. The example shows how to map the plugin to a Scene property and animate its internal variables using tweens.
v4.1.0 | plugins | Scene Plugin Loader | Demonstrates how to dynamically load an external Scene Plugin and access its functionality via a custom property on the Scene.
v4.1.0 | plugins | Start and Stop a Plugin | Demonstrates how to create a global plugin and dynamically toggle its execution at runtime using the Plugin Manager's start and stop methods.
v4.1.0 | pools | Bullet Pool | Efficiently manage a limited number of firing bullets using a Group as an object pool with a custom class and automatic child updates.
v4.1.0 | pools | Create Object Pool | Demonstrates how to create a simple object pool using a Phaser Group with a maxSize property to limit and recycle game objects.
v4.1.0 | pools | Group Max Size | Demonstrates how to limit the number of active objects in a Group pool using the maxSize property. Once the limit is reached, no further objects are created until existing ones are recycled.
v4.1.0 | pools | Group Object Pooling | Demonstrates how to use a Group as a pool for a custom Bullet class, including recycling inactive objects and using runChildUpdate to automate child logic.
v4.1.0 | pools | Pool with Custom Class | Demonstrates how to create an object pool using a custom class in a Phaser Group. It shows how to define a class type, set a maximum pool size, and use the runChildUpdate property to automatically execute the update logic of pooled objects.
v4.1.0 | pools | Seeded Object Pool | Demonstrates how to create a pre-populated object pool using a Group with a fixed maximum size and a custom class to recycle game objects efficiently.
v4.1.0 | renderer | Bend Shader with Custom Batch Handler | Demonstrates applying a custom batch handler shader to multiple sprites using setRenderNodeRole to create a visual bending effect.
v4.1.0 | renderer | Color Filter | Demonstrates how to enable and apply a hue-rotation color filter to individual sprites using custom filter controllers.
v4.1.0 | renderer | Container Post-Processing Filter | This example demonstrates how to enable and apply custom post-processing filters to a Container and all of its nested children.
v4.1.0 | renderer | Custom Batch Size | Demonstrates how to define a custom batch size in the Game configuration to control the number of quads processed by the WebGL renderer in a single draw call.
v4.1.0 | renderer | Custom Filter | Demonstrates how to create and apply a custom GLSL fragment shader filter to a Game Object, using a Filter Controller to manage uniforms like time and speed.
v4.1.0 | renderer | Custom Grayscale Shader via Batch Handler | Apply a custom shader effect to individual game objects by assigning a specific Batch Handler and updating its shader uniforms in real-time.
v4.1.0 | renderer | Custom Shader Single Texture Render Node | Demonstrates how to create a custom render node to apply a color-warping fragment shader and time-based uniforms to specific Sprites.
v4.1.0 | renderer | Custom Shader with Batch Handler | Demonstrates how to apply a custom GLSL shader to specific sprites using a BatchHandlerQuad render node and the setRenderNodeRole method.
v4.1.0 | renderer | Hue Rotation Shader via Batch Handler | Apply a custom hue rotation shader to multiple sprites by registering a BatchHandler render node and updating shader uniforms in the game loop.
v4.1.0 | renderer | Local Grayscale Shader Addition | Demonstrates how to inject custom GLSL code into a specific batch handler to create a grayscale effect and apply it selectively to individual sprites using Render Node roles.
v4.1.0 | renderer | Smooth Pixel Art Rendering | Demonstrates the use of the smoothPixelArt configuration property to enable anti-aliasing for textures while maintaining smooth edges during camera zooms and rotations.
v4.1.0 | renderer | Swirl Filter | Apply a swirl distortion effect to a Game Object and animate the effect's strength using the Tween Manager.
v4.1.0 | renderer | WebGL Context Recovery | Demonstrates how Phaser automatically restores standard GameObjects like images, shapes, and text after a WebGL context loss occurs and is subsequently recovered.
v4.1.0 | renderer | WebGL Renderer Information | Access and display WebGL renderer details including supported extensions, configuration properties, texture compression formats, and hardware texture limits.
v4.1.0 | renderer/tests | 32 Texture Batch Test | Demonstrates loading and displaying 32 unique textures simultaneously, organized in a grid layout to test renderer batching.
v4.1.0 | renderer/tests | Renderer Batching Test | Demonstrates how the renderer handles multiple textures, shapes, and text objects interspersed to test drawing and batching performance.
v4.1.0 | renderer/tests | Renderer FPS Debugging | Demonstrates how to retrieve and display the current frame rate from the renderer while animating multiple sprites across the screen.
v4.1.0 | renderer/tests | Sprite Stress Test and Frame Capture | Demonstrates rendering thousands of individual sprites and using the renderer to capture and download a snapshot of the current frame.
v4.1.0 | scalemanager | Device Orientation Detection | How to detect orientation changes between portrait and landscape modes using the Scale Manager to display prompts or adjust game state.
v4.1.0 | scalemanager | Envelop Scale Mode | Demonstrates the ENVELOP scale mode which scales the game to completely fill the parent container while maintaining aspect ratio, potentially cropping the canvas to fit.
v4.1.0 | scalemanager | Fit and Snap | Demonstrates using the Scale Manager's FIT mode combined with a snap configuration to scale the game canvas in discrete increments based on a fixed resolution.
v4.1.0 | scalemanager | Fit Scale Mode | This example demonstrates how to use the FIT scale mode to automatically resize the game canvas to fit its parent container while strictly maintaining the aspect ratio.
v4.1.0 | scalemanager | Fit Scale Mode with Min and Max | Demonstrates how to use the FIT scale mode while enforcing minimum and maximum width and height constraints on the game canvas.
v4.1.0 | scalemanager | Fit with Auto Center | Scales the game to fit the parent container while maintaining its aspect ratio and centering the canvas both horizontally and vertically.
v4.1.0 | scalemanager | Fullscreen Mode Toggle | Demonstrates how to switch the game to fullscreen and back using either an interactive UI button or a keyboard shortcut (F key) via the Scale Manager.
v4.1.0 | scalemanager | Height Controls Width Scale Mode | This example demonstrates the HEIGHT_CONTROLS_WIDTH scale mode, which automatically adjusts the game width based on the height of the parent container while maintaining the aspect ratio.
v4.1.0 | scalemanager | Input with Camera Transforms | Demonstrates how to map pointer coordinates from screen space to world space while the camera is panned, zoomed, or rotated.
v4.1.0 | scalemanager | Manual Resize and Aspect Ratio Fit | Demonstrates how to use the RESIZE scale mode to manually manage multiple scenes with different scaling rules. One scene fills the entire window while another maintains a fixed aspect ratio and centers itself using camera viewports.
v4.1.0 | scalemanager | Manually Resize | Demonstrates how to handle game resizing manually by disabling automatic scaling and updating the camera and game objects in response to window resize events.
v4.1.0 | scalemanager | Manually Resize With Zoom | Demonstrates how to manually update the game scale and recalculate the maximum zoom level using Phaser.Scale.MAX_ZOOM when the Scale Manager mode is set to NONE.
v4.1.0 | scalemanager | Mobile Responsive Game Layout | Demonstrates a multi-scene approach for mobile games where a flexible background fills the entire screen while the main game area maintains a fixed aspect ratio. It uses the Scale Manager's resize event, camera viewports, and manual zoom calculations to keep the game centered and scaled across different device resolutions.
v4.1.0 | scalemanager | No Scale with Auto Center | This example shows how to disable canvas scaling while keeping the game centered both horizontally and vertically within its parent container.
v4.1.0 | scalemanager | Resize Game on Click | Demonstrates how to dynamically change the game dimensions at runtime using the Scale Manager's resize method in response to user input.
v4.1.0 | scalemanager | Resize with Minimum and Maximum Limits | Demonstrates how to use the Scale Manager to resize the game while enforcing minimum and maximum dimensions via the game configuration.
v4.1.0 | scalemanager | Scale Manager Envelop Mode with Min and Max | Demonstrates using the ENVELOP scale mode to fill a parent container while enforcing specific minimum and maximum size constraints on the game canvas.
v4.1.0 | scalemanager | Scale Manager Fit Mode with Game | Demonstrates using the Scale Manager FIT mode to resize a platformer game, ensuring it scales to fill the available space while maintaining its aspect ratio and staying centered.
v4.1.0 | scalemanager | Scale Manager Resize Event | Demonstrates how to use the RESIZE scale mode and the resize event to dynamically update camera dimensions and reposition game objects when the browser window is resized.
v4.1.0 | scalemanager | Scale Mode: NONE | This example demonstrates how to disable automatic canvas scaling by setting the scale mode to NONE, keeping the game at its fixed internal resolution.
v4.1.0 | scalemanager | Width Controls Height Scale Mode | Demonstrates the WIDTH_CONTROLS_HEIGHT scale mode, which automatically adjusts the game's height based on the available width while maintaining the aspect ratio.
v4.1.0 | scalemanager | Zoom Manual Resize | Demonstrates how to dynamically update the canvas zoom level at runtime using the Scale Manager.
v4.1.0 | scalemanager | Zoom With Fit | Demonstrates how to use the zoom property in combination with the FIT scale mode to upscale a low-resolution canvas while maintaining its aspect ratio within the parent container.
v4.1.0 | scalemanager | Zoom With No Scale | Demonstrates how to enlarge a low-resolution game canvas using the zoom property while keeping the scale mode disabled.
v4.1.0 | scenes | Add Scene After Game Instance | Demonstrates how to dynamically add and start a Scene to a Phaser Game instance after it has been initialized, including passing data to the Scene's create method.
v4.1.0 | scenes | Add Scene From Another Scene | Demonstrates how to dynamically add a new Scene to the Scene Manager and start it immediately while passing custom data to its create method.
v4.1.0 | scenes | Adding and Starting Scenes Manually | Demonstrates how to add a scene to the Scene Manager and start it manually using the game instance API instead of the game configuration object.
v4.1.0 | scenes | Boot Data | Demonstrates how to pass a data object when starting a scene and access it within the init, preload, and create methods for dynamic asset loading and positioning.
v4.1.0 | scenes | Bring Scene to Top | Demonstrates how to move a specific Scene to the top of the Scene list so it renders above all other active Scenes.
v4.1.0 | scenes | Call Function In Another Scene | Demonstrates how to access a specific Scene instance via the Scene Manager to call its public methods and retrieve data from a different active Scene.
v4.1.0 | scenes | Call Function in Another Scene | Demonstrates how to obtain a reference to another scene via the Scene Manager and call its custom methods.
v4.1.0 | scenes | Change Scene From Create | Demonstrates how to transition between multiple scenes immediately by calling scene.start within the create method.
v4.1.0 | scenes | Change Scene From Create Method | Demonstrates how to chain scene transitions by calling scene.start within the create method of multiple ES6 Scene classes.
v4.1.0 | scenes | Changing Large Scenes | Learn how to switch between different scenes that contain a large number of Game Objects.
v4.1.0 | scenes | Changing Scenes | Demonstrates how to transition between multiple Scene classes using the Scene Manager's start method.
v4.1.0 | scenes | Drag Scenes Demo | This demo demonstrates a multi-window desktop interface where each window is a separate, independent Scene. It shows how to use draggable Zones to move Scenes by dynamically updating their camera viewports and how to manage Scene depth using bringToTop.
v4.1.0 | scenes | Extend Scene From Object | Demonstrates how to add custom properties and helper methods directly to a Scene instance using the extend property within the Scene configuration object.
v4.1.0 | scenes | Launch Parallel Scenes | Demonstrates how to use the scene launch method to start multiple scenes simultaneously without stopping the current scene, allowing them to run in parallel.
v4.1.0 | scenes | Move Scene Down | Demonstrates how to reorder scenes within the Scene Manager by moving a specific scene one position down in the list, changing its rendering order.
v4.1.0 | scenes | Move Scene Up | Demonstrates how to move a Scene up in the Scene List, effectively changing its display order so it renders on top of the next scene in the stack.
v4.1.0 | scenes | Multiple Instances of a Scene | Demonstrates how to dynamically add and run multiple simultaneous instances of the same Scene class, with each instance operating independently.
v4.1.0 | scenes | Multiple Scenes and Multiple Cameras | Demonstrates running two active scenes simultaneously, with one scene using multiple camera viewports to create a tiled display of its content.
v4.1.0 | scenes | Multiple Scenes From Classes | Demonstrates how to define and run multiple active scenes simultaneously using ES6 classes within the game configuration.
v4.1.0 | scenes | Multiple Scenes from Configuration Objects | Demonstrates how to define and run multiple simultaneous scenes using configuration objects. It covers scene-specific asset loading via pack files, custom render functions, and setting scene positions and dimensions.
v4.1.0 | scenes | Multiple Scenes From Instances | This example demonstrates how to create and add multiple Scene instances to a game configuration and launch one scene from another.
v4.1.0 | scenes | Object-Based Scenes | This example demonstrates how to define Phaser Scenes using plain JavaScript objects instead of classes and how to launch and reference them from within other scenes.
v4.1.0 | scenes | Parallel Scenes | Demonstrates how to run multiple scenes simultaneously by setting the active property to true in the Scene configuration.
v4.1.0 | scenes | Passing Data to a Scene | Demonstrates how to pass a data object when starting a new Scene and how to retrieve that data within the target Scene's init method to configure preloading and display.
v4.1.0 | scenes | Pause and Resume | Demonstrates how to pause a running Scene, launch a second Scene on top, and then resume the original Scene while preserving its state and animations.
v4.1.0 | scenes | Registry Data Exchange | Learn how to use the global Registry to share data between scenes and listen for data change events to sync UI elements across different active scenes.
v4.1.0 | scenes | Registry Data Exchange | Demonstrates how to use the global Game Registry to share and synchronize data between multiple scenes, allowing a UI scene to automatically update when values change in the game scene.
v4.1.0 | scenes | Restart a Scene | Demonstrates how to reset a Scene using the restart method, triggered here by a camera fade completion event.
v4.1.0 | scenes | Scene Add | Demonstrates how to manually add and automatically start a Scene class using the Scene Manager after the game instance has been created.
v4.1.0 | scenes | Scene Config Object | Demonstrates how to define a Scene using a configuration object, including the use of the pack property to automatically preload assets.
v4.1.0 | scenes | Scene Context Inspection | Demonstrates a basic scene setup that loads an image and logs the scene instance to the console for inspection.
v4.1.0 | scenes | Scene Files Payload | Use the Scene configuration object to define a list of assets to load before the Scene starts, making them available before the preload method is even called.
v4.1.0 | scenes | Scene From Class | Demonstrates how to define a Scene using the Phaser.Class factory method, including extending the base Scene and implementing standard lifecycle methods like preload and create.
v4.1.0 | scenes | Scene From ES6 Class | Demonstrates how to define a Phaser Scene using ES6 class syntax, including the constructor and standard lifecycle methods.
v4.1.0 | scenes | Scene From Function | Learn how to define a Scene using a standard JavaScript constructor function and prototype pattern.
v4.1.0 | scenes | Scene From Instance | Demonstrates how to define a Scene by creating a new Phaser.Scene instance and manually assigning its lifecycle functions such as preload and create.
v4.1.0 | scenes | Scene From Object | Demonstrates how to define a Scene using a standard JavaScript object within the Game Configuration, mapping lifecycle functions like preload and create.
v4.1.0 | scenes | Scene Injection Map | Demonstrates how to remap standard Scene systems like 'add' and 'load' to custom property names using the scene configuration map.
v4.1.0 | scenes | Scene Injection Map with UTF-8 | Demonstrates how to use the Scene injection map to alias standard Scene systems, such as 'add' and 'load', to custom UTF-8 property names.
v4.1.0 | scenes | Scene Transition Basics | Learn how to use scene transitions to move between Scenes. This example demonstrates passing data, using transition update callbacks for custom animations, and handling transition events.
v4.1.0 | scenes | Scene Transitions with Layering and Events | Demonstrates switching between scenes using the transition method, featuring scene layering control (moveAbove/moveBehind), event-driven animations (transitionstart, transitionout), and synchronizing object movement via transition progress callbacks.
v4.1.0 | scenes | Send Scene to Back | Demonstrates how to move a specific Scene to the bottom of the display list, causing it to render behind all other active Scenes.
v4.1.0 | scenes | Sleep and Wake Scenes | Demonstrates how to switch between scenes using scene.switch(), which puts a scene to sleep and wakes another, preserving its state and using the WAKE event to re-enable input.
v4.1.0 | scenes | Swap Scene Render Order | Demonstrates how to use the scene.swapPosition method to change the display depth of two active scenes, effectively moving one in front of the other.
v4.1.0 | scenes | Swapping Scenes | Demonstrates how to switch between two different scenes using the scene.switch method, which puts the current scene to sleep and starts or wakes the target scene on user interaction.
v4.1.0 | scenes | Switching Scenes with ES6 Classes | Demonstrates how to transition between multiple game scenes using ES6 classes and the Scene Manager's start method.
v4.1.0 | scenes | UI Scene Communication | Demonstrates how to run a UI Scene concurrently with a Game Scene and communicate between them using scene-level events to update scores.
v4.1.0 | scenes | UI Scene Overlay | Demonstrates how to run a dedicated UI Scene simultaneously with a Game Scene, using the Scene Event Emitter to communicate and update a score display between them.
v4.1.0 | scenes/external scene | Loading External Scenes | Demonstrates how to load an external JavaScript file containing a Scene class and dynamically add multiple instances of that scene to the game manager at runtime.
v4.1.0 | scenes/moving scenes demo | Scene Layering and Management | This example demonstrates how to manage multiple active scenes simultaneously. It shows how to toggle scene visibility and active states, and how to manipulate rendering order using bringToTop, moveUp, and moveDown.
v4.1.0 | scenes/multi demo | Multi-Scene Desktop Environment | Demonstrates a window-based desktop environment using multiple simultaneous Scenes. Each 'window' is a separate Scene instance mapped to a draggable Zone using camera viewports.
v4.1.0 | scenes/sub game demo | Switching to a Sub-Game Scene | Demonstrates transitioning between a main world and a sub-game scene using Scene Switch and the Data Registry to pass information between them.
v4.1.0 | scenes/tutorial | Change Scene Order | Demonstrates how the sequence of scenes provided in the game configuration determines their initial rendering depth when multiple scenes are active simultaneously.
v4.1.0 | scenes/tutorial | Scene Controller | This example demonstrates comprehensive management of multiple concurrent scenes. It shows how to use a master UI scene to toggle visibility and active status (pausing/resuming) for child scenes, and how to reorder the scene stack using bringToTop, moveUp, moveDown, and moveAbove.
v4.1.0 | scenes/tutorial | Scene Rendering Order | Demonstrates how to change the display order of multiple active scenes using the Scene Manager's bringToTop method.
v4.1.0 | snapshot | Game Snapshot | Demonstrates how to capture a snapshot of the entire game canvas using the renderer's snapshot method and display the resulting image in the DOM.
v4.1.0 | snapshot | Snapshot Area | Capture a specific rectangular portion of the game canvas using snapshotArea and convert it into a new game texture or DOM image.
v4.1.0 | snapshot | Snapshot Pixel | Capture the color of a single pixel from the game canvas at a specific coordinate using the renderer's snapshotPixel method.
v4.1.0 | snapshot | Snapshot to Base64 | Learn how to capture a snapshot of the current game frame and convert it into a Base64 data URL by drawing the result to a Canvas Texture.
v4.1.0 | textures | AVIF Texture Support | Load and display AVIF images to compare visual quality and significant file size savings against standard PNGs using an interactive comparison slider.
v4.1.0 | textures | Compressed Multi-Texture Atlas | Demonstrates loading a multi-file texture atlas using various hardware-compressed formats like ASTC, ETC, PVRTC, and S3TC with an image fallback.
v4.1.0 | textures | Compressed Texture Atlas | Demonstrates how to load a multi-format compressed texture atlas. Phaser automatically detects device support for formats like ASTC, ETC, PVRTC, and S3TC, loading the optimal file or falling back to a standard PNG.
v4.1.0 | textures | Compressed Texture Atlas via File Config | Load a texture atlas by providing multiple compressed texture formats (ASTC, ETC, PVRTC, S3TC) and a PNG fallback within a single configuration object.
v4.1.0 | textures | Compressed Texture Atlas via File Pack | Demonstrates how to load a multi-format compressed texture atlas using a File Pack object, allowing the engine to automatically select the best format (ASTC, ETC, PVRTC, or S3TC) supported by the hardware.
v4.1.0 | textures | Compressed Texture From File Pack | Demonstrates how to load multiple compressed texture formats using a File Pack object. This allows the loader to automatically select the most suitable format (ASTC, ETC, S3TC, or PVRTC) based on the hardware's capabilities.
v4.1.0 | textures | Compressed Texture Loading | Demonstrates how to load multi-format compressed textures (ASTC, ETC, PVRTC, and S3TC) with an automatic fallback for maximum hardware compatibility.
v4.1.0 | textures | Compressed Texture Loading via Configuration | Demonstrates how to load textures by providing a configuration object with multiple compressed formats (ASTC, ETC, PVRTC, S3TC) and a fallback image, allowing Phaser to automatically select the optimal format for the hardware.
v4.1.0 | textures | Crop Animated Sprite | Learn how to apply and dynamically update a rectangular crop on an animated sprite to show only a specific portion of the animation.
v4.1.0 | textures | Crop Flipped Texture | Demonstrates how to apply and update a crop area on an Image that has been horizontally flipped.
v4.1.0 | textures | Crop Flipped Texture Atlas Frame | Demonstrates applying a dynamic crop area to a flipped image using a frame from a texture atlas.
v4.1.0 | textures | Crop Flipped Texture Atlas Frame | Demonstrates how to apply a crop area to an image that is both horizontally flipped and sourced from a texture atlas frame.
v4.1.0 | textures | Crop Render Texture | Demonstrates how to apply a crop area to a Render Texture and update its position dynamically using pointer input.
v4.1.0 | textures | Crop Scaled Image | Demonstrates how to apply and update a crop rectangle on an Image that has been scaled, mapping coordinates to account for the scale factor.
v4.1.0 | textures | Crop Texture Atlas Frame | Apply a crop rectangle to a specific frame within a texture atlas and update the crop area dynamically based on pointer movement.
v4.1.0 | textures | Crop Texture Atlas Frame Trimmed | Demonstrates how to apply and dynamically update a crop area on an image using a trimmed frame from a texture atlas.
v4.1.0 | textures | Crop Texture Image | Demonstrates how to use the setCrop method to display a specific rectangular area of an image and update those crop coordinates dynamically based on pointer input.
v4.1.0 | textures | Cropping Multiple Texture Atlas Frames | Demonstrates how to apply individual crop rectangles to multiple images that are using different frames from the same texture atlas.
v4.1.0 | textures | Dynamic Text Cropping | Demonstrates how to apply and update a rectangular crop on a Text object using the setCrop method to reveal only specific portions of the text interactively.
v4.1.0 | textures | Edit Texture Hue Shift | Demonstrates how to modify texture pixel data in real-time by creating a Canvas Texture, manipulating its HSV values using getImageData, and updating the renderer with the refresh method.
v4.1.0 | textures | Edit Texture Silhouette | Demonstrates how to create a silhouette effect by creating a Canvas texture and manually modifying its pixel data using the 2D context getImageData and putImageData methods.
v4.1.0 | textures | Frames From a Single Texture Atlas | Demonstrates how to load a single texture atlas and display multiple different images by referencing their individual frame names.
v4.1.0 | textures | Get Pixel From Image | Demonstrates how to use the Texture Manager to retrieve the color value of a specific pixel from a loaded image using its X and Y coordinates.
v4.1.0 | textures | Get Pixel Under Pointer | Demonstrates how to retrieve color data from a specific texture at a given coordinate in real-time as the pointer moves.
v4.1.0 | textures | Get Texture Pixels | Demonstrates how to read color data from an image by drawing it to a CanvasTexture and using the getPixel method to iterate through its individual pixels.
v4.1.0 | textures | Multi-Atlas | Demonstrates how to load and display frames from a multi-page texture atlas where a single JSON manifest manages multiple image files.
v4.1.0 | textures | Set Mipmap Filter | Configure the global mipmap filter via the Game Config to improve visual quality when textures are rendered at smaller scales.
v4.1.0 | textures | Set Texture Source | Demonstrates how to change the underlying source data of a Texture at runtime, which automatically updates any Game Objects currently using that texture.
v4.1.0 | textures | Sprite from Tilemap Texture | Demonstrates how to manually parse a loaded image into a SpriteSheet at runtime, allowing you to create Sprites from individual tiles.
v4.1.0 | textures | Sprite Sheet | Load a sprite sheet with defined frame dimensions and display individual frames using their index.
v4.1.0 | textures | Sprite Sheet From Atlas | Demonstrates how to use addSpriteSheetFromAtlas to extract and define a sprite sheet from a specific frame within an existing Texture Atlas, allowing for animations to be generated from packed assets.
v4.1.0 | textures | Text Texture | Demonstrates how to convert a Text object into a dynamic texture and use it as the source frame for a Particle Emitter.
v4.1.0 | textures | Texture From Base64 | Demonstrates how to create a texture from a Base64 encoded image string and use event listeners to detect when the texture is ready to be displayed.
v4.1.0 | textures | Texture Packer Atlas | Load and display individual frames from a Texture Packer JSON atlas, featuring support for custom pivot points and sprite rotation.
v4.1.0 | textures | Trimmed Frame From Multi-Atlas | Demonstrates how to load a multi-atlas texture and display a specific trimmed frame by name.
v4.1.0 | textures | Trimmed Frame from Texture Atlas | Demonstrates loading a texture atlas and displaying a specific frame that has been trimmed, illustrating how Phaser handles original source dimensions versus trimmed sizes.
v4.1.0 | textures/canvas textures | Canvas Texture Composite Operations | Demonstrates how to use HTML5 Canvas global composite operations on a Canvas Texture to create effects like masking and erasing.
v4.1.0 | textures/canvas textures | Canvas Texture Rotation | Create a dynamic canvas texture using the Canvas API and demonstrate that it can be rotated and transformed just like a regular static image.
v4.1.0 | textures/canvas textures | Create Canvas Texture | Demonstrates how to create a dynamic texture from a Canvas element, draw to its 2D context using standard API calls, and update the texture at runtime.
v4.1.0 | textures/canvas textures/dwitter | Canvas Texture Dwitter 5475 | Demonstrates how to create a dynamic CanvasTexture and update its underlying 2D context using a Dwitter-style animation loop.
v4.1.0 | textures/canvas textures/dwitter | Canvas Texture Dwitter Animation | Demonstrates creating a dynamic Canvas Texture and updating it every frame by drawing directly to its native 2D context using mathematical functions.
v4.1.0 | textures/canvas textures/dwitter | Canvas Texture Dwitter Animation | Demonstrates how to create a dynamic CanvasTexture and update its content every frame using native HTML5 Canvas 2D drawing commands to create generative art.
v4.1.0 | textures/canvas textures/dwitter | Canvas Texture Dwitter Animation | This example demonstrates how to create a dynamic Canvas Texture and update it every frame by directly accessing its 2D context to draw complex math-based patterns.
v4.1.0 | textures/dynamic textures | Copying Images to Dynamic Textures | Learn how to use the stamp method to draw an existing image onto a Dynamic Texture.
v4.1.0 | textures/dynamic textures | Create Dynamic Texture | Demonstrates how to create a new Dynamic Texture at runtime and compose it by stamping multiple frames from a texture atlas using custom scale, alpha, and blend modes.
v4.1.0 | textures/dynamic textures | Dynamic Texture Camera Control | Demonstrates how to use the internal camera of a Dynamic Texture to offset and position content rendered within it.
v4.1.0 | textures/dynamic textures | Dynamic Texture Stamping | Create custom textures at runtime by compositing multiple frames from an atlas using the stamp method, featuring custom blend modes, alpha settings, and sprite-like origins.
v4.1.0 | textures/dynamic textures | Get Pixel From Dynamic Texture | Demonstrates how to retrieve color data from a specific coordinate within a Dynamic Texture using the snapshotPixel method.
v4.1.0 | textures/dynamic textures | Masked Sprite to Dynamic Texture | Demonstrates how to apply an external mask to a sprite and draw the resulting masked image into a Dynamic Texture.
v4.1.0 | textures/dynamic textures | Multiple Dynamic Textures | Create and manage multiple unique textures at runtime by composing atlas frames. Demonstrates using the stamp method to draw, scale, and blend multiple assets onto new dynamic texture instances.
v4.1.0 | tilemap | Base Tile Size | Learn how to use a base grid size that differs from the tileset dimensions, allowing larger tiles to overlap vertically on a smaller map grid.
v4.1.0 | tilemap | Convert Tiles to Sprites | Transform specific tile indices from a tilemap into dynamic Sprite objects using createFromTiles. This example demonstrates using a spritesheet to automatically set the correct texture frames for the converted sprites.
v4.1.0 | tilemap | Copy Tilemap Area | Learn how to copy a rectangular region of tiles from one location to another within a tilemap layer.
v4.1.0 | tilemap | Create Sprites From Tilemap Objects | Demonstrates how to use createFromObjects to automatically convert Tiled map object data into Phaser Sprites, inheriting positions and custom properties.
v4.1.0 | tilemap | Create Tilemap from Array | This example demonstrates how to create a tilemap directly from a 2D JavaScript array of tile indices instead of loading an external data file.
v4.1.0 | tilemap | Creating Blank Layers | Generate an empty tilemap programmatically and populate it with new blank layers. This example demonstrates how to use the randomize method to fill layers with tiles and how to apply parallax effects using scale and scroll factors.
v4.1.0 | tilemap | CSV Tilemap | Demonstrates how to load and display a tilemap from a CSV file, including the requirement to manually specify tile dimensions when creating the map.
v4.1.0 | tilemap | Dungeon Generator | Learn how to convert a procedurally generated dungeon layout into a dynamic Tilemap. This example demonstrates using weighted randomization for varied tile textures, tile-based collision, and a room discovery system that reveals areas as the player explores.
v4.1.0 | tilemap | Fill Tiles | Demonstrates how to use the fill method to replace a specific rectangular area of tiles with a new tile index based on the pointer position.
v4.1.0 | tilemap | Get Tiles Within Geometric Shapes | Demonstrates how to use getTilesWithinShape to find tiles that intersect with a Rectangle, Circle, Line, or Triangle, with optional filtering for only colliding tiles.
v4.1.0 | tilemap | Grid Movement | Implement grid-based movement and tile-based collision detection by checking tile indices at specific world coordinates before updating a sprite position.
v4.1.0 | tilemap | High Resolution Tilemap Support | Shows how to load a 16x16 tileset into a map originally designed for 8x8 tiles by setting a custom base tile size.
v4.1.0 | tilemap | Infinite Scrolling Tilemap | Demonstrates how to create an endless scrolling effect by shifting tile indices across a map and procedurally generating new tile columns on the edge.
v4.1.0 | tilemap | Load Tiled JSON Map | Demonstrates how to load a Tiled JSON map file, associate it with a tileset image, and render a scrollable layer using camera controls.
v4.1.0 | tilemap | Map vs. Layer with One Layer | Learn how tile manipulation methods like fill and randomize can be called on either the Tilemap or the TilemapLayer when working with a single-layer map.
v4.1.0 | tilemap | Mario Map Scroller | Learn how to render multiple Tiled JSON maps in a single scene and use a FixedKeyControl to scroll the camera horizontally across them.
v4.1.0 | tilemap | Multi-Camera Tilemap View | Demonstrates rendering a single tilemap layer across multiple cameras simultaneously, with one camera featuring independent zoom, rotation, and smoothed keyboard controls.
v4.1.0 | tilemap | Multiple Tilesets | Demonstrates how to render a single tilemap layer using tiles from multiple different tileset images by passing an array of tilesets to createLayer.
v4.1.0 | tilemap | Paint Tiles | Interactively edit a tilemap by picking and placing tiles at runtime. Demonstrates coordinate conversion from screen to world/tile space and using putTileAt to modify a layer dynamically.
v4.1.0 | tilemap | Pixel Art Scaled Tilemap | Demonstrates scaling a tilemap layer and using a FixedKeyControl to navigate the camera across the map.
v4.1.0 | tilemap | Placing Tiles Dynamically | Learn how to use putTileAt and putTilesAt to manually place single tiles, rows of tiles, or 2D arrays of tiles onto a tilemap layer based on pointer coordinates.
v4.1.0 | tilemap | Randomize Tiles | Demonstrates how to use the Tilemap randomize method to fill a specific rectangular area with random tiles based on existing tile indexes or a specific list of tile IDs.
v4.1.0 | tilemap | Replace Tiles by Index | Demonstrates how to use the replaceByIndex method to search for all instances of a specific tile index and swap them with a new tile across a map layer.
v4.1.0 | tilemap | Set Colliding Tiles | Demonstrates multiple ways to enable tilemap collisions using setCollision, setCollisionBetween, and arrays, while visualizing the results with debug rendering.
v4.1.0 | tilemap | Set Tilemap Collision by Property | Enable collision for tiles based on custom data properties defined in Tiled, rather than using specific tile IDs or ranges.
v4.1.0 | tilemap | Set Tilemap Layer Width | Demonstrates how to programmatically adjust the width of a tilemap layer to clip its visible rendering area.
v4.1.0 | tilemap | Shuffle Tiles | Demonstrates how to use the shuffle method to randomly rearrange a specific rectangular area of tiles within a tilemap layer.
v4.1.0 | tilemap | Swap Tile Indices | Use swapByIndex to find all instances of a specific tile across the map and swap them with a different tile index.
v4.1.0 | tilemap | Switching Active Tilemap Layers | Demonstrates how to manage multiple tilemap layers and use map.setLayer to change which layer is targeted by map-level tile operations.
v4.1.0 | tilemap | Switching Tileset Textures | Demonstrates how to change the visual appearance of a tilemap at runtime by dynamically swapping the tileset's underlying texture using the setImage method.
v4.1.0 | tilemap | Tile Properties | Demonstrates how to access and display custom properties defined for specific tiles within a Tiled JSON map.
v4.1.0 | tilemap | Tiled Multi Tileset | Demonstrates how to render a single tilemap layer that uses multiple different tileset source images by passing an array of tilesets to the layer creation method.
v4.1.0 | tilemap | Tilemap Chebyshev Distance | Calculate the Chebyshev distance between the player's current tile and all other tiles in the map to create a dynamic visibility effect.
v4.1.0 | tilemap | Tilemap Collision Debugging | Demonstrates how to use the renderDebug method to visualize tilemap collision data, including highlighting specific colliding tiles and their active edges (faces).
v4.1.0 | tilemap | Tilemap Collision From Tiled Shapes | Enable collisions on a Tilemap layer using the collision shapes defined in the Tiled editor via setCollisionFromCollisionGroup, with Matter.js physics integration.
v4.1.0 | tilemap | Tilemap Layer Collision | Demonstrates how to enable collision between a physics-enabled sprite and specific tile indices within a Tilemap layer.
v4.1.0 | tilemap | Tilemap Layer Filter | Demonstrates how to apply a custom shader filter to a specific Tilemap layer while performing tile-based collision detection.
v4.1.0 | tilemap | Tilemap Layer Size | Demonstrates how to manually adjust the width of a tilemap layer to clip its rendering area and position multiple layers from different tilemaps within the same scene.
v4.1.0 | tilemap | Tilemap Layer Width and Camera Bounds | Demonstrates how to modify the width of a Tilemap Layer and adjust camera bounds to match the new dimensions.
v4.1.0 | tilemap | Tilemap Lighting and Normal Maps | Demonstrates applying Phaser's 2D lighting system to a tilemap layer, featuring normal maps for texture depth, ambient light settings, and dynamic point lights that follow the player.
v4.1.0 | tilemap | Tilemap Minimap Zoom | Demonstrates how to create a secondary camera with a low zoom level to act as a scrolling minimap for a tilemap.
v4.1.0 | tilemap | Tilemap Mouse Wheel Zoom | Demonstrates how to zoom a camera toward the mouse pointer using the wheel event and implement drag-to-pan functionality over a tilemap.
v4.1.0 | tilemap | Tilemap Render Order | Demonstrates how to change the rendering sequence of tiles within a layer using setRenderOrder to handle different tile overlap perspectives.
v4.1.0 | tilemap | Tilemap Snake Distance | Adjust tile transparency dynamically based on the Manhattan distance (Snake distance) between the player and each tile in the map.
v4.1.0 | tilemap | Tilemap Weighted Randomization | Demonstrates using weightedRandomize to fill a specific area of a tilemap layer with tiles based on probability weights, useful for procedural floor patterns and item distribution.
v4.1.0 | tilemap | Tileset Collision Shapes | Access and visualize collision shapes (rectangles, ellipses, and polygons) and custom properties defined within a Tiled tileset.
v4.1.0 | tilemap | Tileset with Margin and Spacing | Demonstrates how to use tilesets that include margins and padding between tiles, covering both Tiled JSON maps and manual configuration via addTilesetImage.
v4.1.0 | tilemap | Tint Tilemap Layer | Demonstrates how to apply color tints to specific rectangular regions of tiles within a Tilemap Layer.
v4.1.0 | tilemap/collision | CSV Tilemap with Arcade Physics | Load a tilemap from a CSV file, define colliding tile ranges, and enable Arcade Physics collisions between a player sprite and the map layer. Includes a debug view toggle to visualize collision bounds.
v4.1.0 | tilemap/collision | Matter Destroy Tile Bodies | Demonstrates how to dynamically remove tiles and destroy their associated Matter physics bodies when triggered by player contact. It uses custom Tiled properties to identify specific tiles and handles character movement with a compound Matter body and sensors.
v4.1.0 | tilemap/collision | Matter Ghost Collisions | Demonstrates how to mitigate 'ghost collisions' at tile seams in Matter JS by comparing individual tile bodies with a single large convex body defined via Tiled object layers.
v4.1.0 | tilemap/collision | Matter Physics Platformer with Wall Jumping | A comprehensive example of a Matter.js platformer featuring compound bodies and sensors for advanced collision detection. It demonstrates smoothed horizontal movement, wall jumping logic, and converting Tiled tilemaps into physical Matter bodies.
v4.1.0 | tilemap/collision | Matter Physics Tilemap Collision | Demonstrates how to convert a Tilemap layer into Matter.js physics bodies, supporting both default rectangular bounds and custom collision shapes defined in Tiled.
v4.1.0 | tilemap/collision | Matter Platformer with Dynamic Tile Modification | Demonstrates how to modify a Matter-enabled Tilemap at runtime, including updating existing tile collision shapes and adding new physics-enabled tiles to build a bridge.
v4.1.0 | tilemap/collision | Matter Tilemap Collision Detection | Demonstrates how to convert a Tilemap layer into Matter.js physics bodies and detect collisions between sprites and specific tiles using body labels and custom Tiled properties.
v4.1.0 | tilemap/collision | Multiple Tile Sizes and Collisions | Demonstrates how to handle physics collisions across multiple tilemap layers using different tile dimensions (32x32, 64x64, and 32x64) within a single map.
v4.1.0 | tilemap/collision | Simple Tilemap Collision and Interaction | Demonstrates how to set tile-based collisions, use Arcade Physics with a tilemap layer, and filter specific tiles to create interactive pickups that can be removed from the map.
v4.1.0 | tilemap/collision | Tile Callbacks | Learn how to trigger custom functions when a sprite interacts with specific tiles using index-based and location-based callbacks. This example demonstrates collecting items and creating secret passages by modifying collision behavior.
v4.1.0 | tilemap/collision | Tilemap Overlap Callbacks | Demonstrates how to use overlapTiles to detect and handle custom interactions between a physics body and specific tile indices, such as collecting items.
v4.1.0 | tilemap/collision | Tilemap Spotlight | Demonstrates a dynamic spotlight effect over a tilemap using a RenderTexture to mask the scene based on the player's position.
v4.1.0 | tilemap/isometric | Hexagonal Tilemap | Demonstrates how to load and render a hexagonal tilemap exported from Tiled, including basic camera navigation using smoothed keyboard controls.
v4.1.0 | tilemap/isometric | Isometric Tilemap | Demonstrates loading and rendering a multi-layered isometric tilemap created with Tiled, including smoothed camera controls.
v4.1.0 | tilemap/isometric | Manually Create Isometric Tilemap | Demonstrates how to build an isometric tilemap programmatically by creating MapData, initializing a blank layer, and populating it with tiles from a 2D array.
v4.1.0 | tilemap/tests | Tilemap Collision Face Debugging | Demonstrates how modifying tilemaps via methods like putTileAt, removeTileAt, copy, and fill affects collision face calculation, visualized using debug rendering.
v4.1.0 | tilemap/tests | Tilemap Culling Tests | A visual test to verify tilemap culling works correctly across layers with different offsets, scroll factors, non-uniform scaling, and multiple tileset sizes.
v4.1.0 | tilemap/tests | Tilemap Tile Flipping Reference | A visual comparison demonstrating that tiles flipped or rotated in Tiled render correctly in Phaser by matching them against a reference screenshot.
v4.1.0 | tilemap/tests | Tilemap World Coordinates and Layer Scaling | Demonstrates how to accurately retrieve tile information, including bounds and center points, from world coordinates across layers with varying offsets and scales.
v4.1.0 | tilemap/tests | Tilemap World to Tile Coordinates | Demonstrates how to convert pointer coordinates to tile positions across multiple layers, handling layer switching and tilesets of different sizes.
v4.1.0 | tilemap/tests | Visual Tile Bleed Test | Tests for tilemap rendering artifacts and 'bleeding' between tiles while the camera is scrolling with pixel art settings enabled.
v4.1.0 | tilemaps | Animated Tiles | Demonstrates how to display and render animated tiles defined in a Tiled JSON map across multiple layers.
v4.1.0 | tilemaps/tilemap gpu layer | Animated GPU Tiles | Demonstrates creating tilemap layers that utilize GPU-accelerated rendering to handle tile animations defined in the Tiled editor JSON data.
v4.1.0 | tilemaps/tilemap gpu layer | Copy Tilemap GPU Layer Tiles | Demonstrates how to copy a rectangular area of tiles within a GPU-accelerated Tilemap Layer and manually refresh the layer's data texture to update the rendering.
v4.1.0 | tilemaps/tilemap gpu layer | CPU vs GPU Tilemap Rendering | Demonstrates how to toggle between standard CPU tilemap rendering and GPU-accelerated tilemap layers.
v4.1.0 | time | Draw Clocks | Learn how to use the progress value of multiple Timer Events to drive custom visual animations using Graphics objects.
v4.1.0 | time | Looped Event | Use the Time Manager to create a repeating timer event that triggers a callback function at a fixed interval indefinitely.
v4.1.0 | time | Multiple Timers | Learn how to manage multiple simultaneous timer events. This example demonstrates how to create several looped timers with varying delays and visualize their individual progress using text and graphics.
v4.1.0 | time | Pause and Resume Timer Events | Demonstrates how to toggle the paused state of a Timer Event. This example uses a pointer click to stop and start a repeating timer that modifies an image's scale and rotation.
v4.1.0 | time | Remove Timer Event | Demonstrates how to stop and remove a looping timer event programmatically once a specific condition has been met.
v4.1.0 | time | Repeat Count | Demonstrates how to use the repeat property in a Timed Event to execute a callback multiple times and monitor the remaining repeat count and event progress.
v4.1.0 | time | Reuse a Timer Event | Demonstrates how to manually create a Timer Event instance and restart it by re-adding it to the Scene's Clock.
v4.1.0 | time | Timer Event | Demonstrates how to create a single-use timer event using delayedCall and monitor its completion progress in the update loop.
v4.1.0 | time | Timer Event Start At | Demonstrates how to use the 'startAt' property to offset the initial start time of a repeating timer event, effectively starting the first iteration partway through the delay.
v4.1.0 | time | Timer Event Time Scale | Demonstrates how to use the timeScale property to speed up or slow down individual Timer Events relative to the scene clock.
v4.1.0 | time | Visualizing Timer Progress | Demonstrates how to use a Timer Event's getProgress and getOverallProgress methods to visually represent current iteration time and total sequence progress.
v4.1.0 | time/timeline | Add Event Relative to Current Time | Demonstrates how to add new events to a running timeline using a relative delay, causing the event to trigger a specific amount of time after it is added.
v4.1.0 | time/timeline | Basic Timeline Creation | Learn how to create and play a sequence of scheduled events, including tweens and function calls, using the Timeline class.
v4.1.0 | time/timeline | Play Timeline On Click | Trigger a sequence of animations, tweens, and particle effects using a Timeline initiated by a pointer event.
v4.1.0 | time/timeline | Repeat Timeline | Learn how to use the Timeline repeat method to loop a complex sequence of events, including tweens, particle effects, and filter properties.
v4.1.0 | time/timeline | Timeline Events | Demonstrates how to trigger and listen for custom events at specific timestamps using a Timeline to sequence game logic.
v4.1.0 | time/timeline | Timeline Relative Timing | Demonstrates how to sequence events in a Timeline using relative offsets with the 'from' property, allowing events to trigger based on the timing of the previous event.
v4.1.0 | time/timeline | Timeline Run Events | Schedule and execute functions at specific timestamps using the Timeline class.
v4.1.0 | time/timeline | Timeline Set Action | Demonstrates how to use the 'set' action within a Timeline to instantly update target properties at specific timestamps.
v4.1.0 | time/timeline | Timeline Sound Actions | Trigger audio playback at specific timestamps in a sequence using the Timeline's sound action property.
v4.1.0 | time/timeline | Timeline Tween Actions | Learn how to schedule and trigger multiple Tweens at specific timestamps using a Phaser Timeline.
v4.1.0 | time/timestep | Delta History | Displays the history of delta time values from the game loop and demonstrates how to use delta time for smooth, frame-independent movement.
v4.1.0 | time/timestep | Frame Independent Movement | Demonstrates how to use the delta time value in the update loop along with Phaser.Math.GetSpeed to ensure game objects move at a consistent speed regardless of the frame rate.
v4.1.0 | time/timestep | Split Timestep | Demonstrates how to run a secondary, fixed-rate TimeStep loop alongside the main game loop to compare movement at different update frequencies.
v4.1.0 | time/timestep | Ticker Loop | Demonstrates how to access delta time and total elapsed time from the game loop to achieve frame-independent movement.
v4.1.0 | time/timestep | World Time and Delta | Displays the accumulated game time and the time elapsed since the last frame (delta) using the parameters provided to the Scene update method.
v4.1.0 | transform | Display Size | Demonstrates how to use the setDisplaySize method to scale an image to specific pixel dimensions.
v4.1.0 | transform | Flip X | Demonstrates three ways to horizontally flip a Game Object: using the setFlipX method, the flipX property, or the toggleFlipX function.
v4.1.0 | transform | Flip Y | Demonstrates how to vertically flip an image using the setFlipY method, the flipY property, and the toggleFlipY function.
v4.1.0 | transform | Horizontal Origin Alignment | Demonstrates how changing the horizontal origin (originX) affects how a Game Object is positioned relative to its x-coordinate, showing left, center, and right alignment.
v4.1.0 | transform | Image Angle | Demonstrates how to set the rotation of an image in degrees using the angle property and setAngle method.
v4.1.0 | transform | Rotation | Demonstrates how to rotate game objects over time by updating the rotation property for both individual images and texture atlas frames.
v4.1.0 | transform | Rotation and Origin | Demonstrates how changing the origin of a Game Object affects its pivot point when rotating.
v4.1.0 | transform | Scale X | Demonstrates how to adjust the horizontal scale of a Game Object using the setScale method and the scaleX property.
v4.1.0 | transform | Scale XY | Demonstrates how to set the scale of a Game Object using the setScale method for uniform or independent scaling, and by directly modifying the scaleX and scaleY properties.
v4.1.0 | transform | Scale Y | Demonstrates how to adjust the vertical scale of an image using the setScale method and the scaleY property.
v4.1.0 | transform | Sprite Origin X and Y | Demonstrates how setting the origin (or anchor point) of an image affects its positioning relative to its coordinates.
v4.1.0 | transform | Sprite Positioning | Demonstrates different ways to position Game Objects, including using constructor arguments, direct property assignment, and the setPosition method.
v4.1.0 | transform | Vertical Origin Alignment | Demonstrates how to adjust the vertical origin of images and atlas frames to align them by their top, center, or bottom edge.
v4.1.0 | tweens | Card Flip Texture Swap | Demonstrates how to create a card flipping effect by synchronizing a texture change with a scale tween.
v4.1.0 | tweens | Change Texture Frame | Demonstrates how to change a Game Object's texture frame as part of a tween, combined with other property changes like position and scale.
v4.1.0 | tweens | Checkerboard Grid Animation | Aligns a group of sprites into a grid and applies staggered scaling tweens to create a row-based wave animation effect.
v4.1.0 | tweens | Checkerboard Grid Rotation | Demonstrates rotating a grid of sprites using tweens with random delays and dynamic rotation values calculated via getEnd and getStart callbacks.
v4.1.0 | tweens | Counter Tween | Demonstrates how to use a counter tween to interpolate between two numeric values and update a text display, including how to dynamically update the tween target value while it is still playing.
v4.1.0 | tweens | Custom Ease Function | Demonstrates how to provide a custom function to a tween's ease property to create unique motion curves.
v4.1.0 | tweens | Double Tween Comparison | A side-by-side comparison of Phaser's built-in Tween Manager and the GSAP library, demonstrating identical movement using different animation engines.
v4.1.0 | tweens | Dynamic End Property | This example demonstrates how to use functions to define tween target values, allowing the destination of a tween to update dynamically based on the current position of another object.
v4.1.0 | tweens | Dynamic Tween Properties | Demonstrates how to use getter functions to dynamically calculate the start and end values of a tween property during execution.
v4.1.0 | tweens | Elasticity | Demonstrates the use of elastic easing in a tween, including how to pass custom amplitude and period parameters to fine-tune the movement.
v4.1.0 | tweens | Global Tween Time Scale | Demonstrates how to use the Tween Manager's global timeScale property to control the playback speed of all active tweens simultaneously.
v4.1.0 | tweens | Grid Tween with Staggered Column Delays | Aligns a group of blocks into a grid and applies complex tweens with delays that reset at the end of every row, creating a synchronized column animation.
v4.1.0 | tweens | Grid Tween with Staggered Column Delays | Arrange a group of sprites into a grid and apply scale tweens with staggered delays based on their column index to create a wave effect.
v4.1.0 | tweens | Interpolation Methods for Array Values | Demonstrates how to use an array of values for a tween property and apply different interpolation algorithms like Bezier and Catmull-Rom.
v4.1.0 | tweens | Linear and Bounce Tween | Demonstrates applying different easing functions, durations, and yoyo behaviors to the X and Y properties of a single sprite within one tween.
v4.1.0 | tweens | Loop Delay | Demonstrates how to add a delay between each iteration of a looping tween.
v4.1.0 | tweens | Multiple Delayed Properties | Apply different durations, easing functions, and delays to multiple properties within a single tween, including the use of functional delays.
v4.1.0 | tweens | Multiple Dynamic Tween Properties | Demonstrates using dynamic functions for property values within a single tween to calculate start and end positions at runtime.
v4.1.0 | tweens | Multiple Properties | This example demonstrates how to tween multiple properties of a single target simultaneously, with independent durations and easing functions for each property.
v4.1.0 | tweens | Multiple Properties Loop | Demonstrates how to animate multiple properties of a target simultaneously using different durations and easing functions, while looping the entire animation.
v4.1.0 | tweens | Multiple Properties with Individual Yoyo | Demonstrates how to apply independent durations, easing functions, and yoyo effects to multiple properties within a single tween.
v4.1.0 | tweens | Multiple Targets | Demonstrates how to apply a single tween to an array of multiple game objects simultaneously.
v4.1.0 | tweens | Multiple Targets and Multiple Properties | This example shows how to tween multiple Game Objects simultaneously, with separate durations and easing functions for different properties like x and y.
v4.1.0 | tweens | Number Counter Tween | Demonstrates how to use addCounter to interpolate between two numeric values. This type of tween doesn't require a target object property and allows you to retrieve the current value, progress, and elapsed time manually.
v4.1.0 | tweens | Number Counter Tween with Yoyo | Demonstrates how to use a counter tween to interpolate between two numeric values with a yoyo effect, accessing the current value and progress manually.
v4.1.0 | tweens | On Complete Callback | Demonstrates how to use the onComplete callback and onCompleteParams to execute a function and pass custom data once a tween has finished.
v4.1.0 | tweens | Pause and Resume a Tween | Demonstrates how to toggle a tween's playback state between paused and playing using pointer input.
v4.1.0 | tweens | Pause and Resume All Tweens | Demonstrates how to pause and resume every active tween in a scene simultaneously using the Tween Manager's global control methods.
v4.1.0 | tweens | Paused Tween | Demonstrates how to create a tween in a paused state and trigger its playback later using the play method.
v4.1.0 | tweens | Relative Value Tween with Repeating | Demonstrates how to use relative string values like '-=64' to animate a property based on its current position, combined with yoyo and repeat settings.
v4.1.0 | tweens | Relative Value Tweens | Demonstrates how to use string operators like += and -= to create tweens relative to an object's current property values.
v4.1.0 | tweens | Remove Tween | Demonstrates how to manually stop and remove an active tween from the Tween Manager using the tween's remove method.
v4.1.0 | tweens | Seek To Point In Tween | This example demonstrates how to use the seek method to jump to a specific millisecond position within a running tween.
v4.1.0 | tweens | Stagger Delay | Apply a staggered delay to a group of targets in a single tween, causing them to start their animation sequence at different intervals.
v4.1.0 | tweens | Staggered Column Tweens | Demonstrates applying staggered scale and rotation animations to a grid of sprites using column-based delay calculations.
v4.1.0 | tweens | Stop a Tween | Demonstrates how to manually stop a running tween using the stop method, triggered by a pointer event.
v4.1.0 | tweens | Tween Behavior with CPU Lag | Demonstrates how the tween system handles a significant main-thread block (CPU lag) while managing thousands of concurrent sprite tweens.
v4.1.0 | tweens | Tween Callbacks | Demonstrates how to use lifecycle event callbacks in a tween, including onStart, onComplete, onYoyo, onRepeat, onPause, and onResume.
v4.1.0 | tweens | Tween Circle Radius | Animates a group of sprites by tweening the radius of a geometric circle and updating their positions using the onUpdate callback.
v4.1.0 | tweens | Tween Complete Delay | This example demonstrates how to use the completeDelay property to pause for a set duration after a tween finishes its movement before triggering the completion event.
v4.1.0 | tweens | Tween Delay | Demonstrates how to use the delay property to postpone the start of a tween for a specific duration.
v4.1.0 | tweens | Tween Delay Function | Demonstrates how to use a callback function to dynamically calculate the delay of a tween, allowing for randomized or logic-based start times.
v4.1.0 | tweens | Tween Flip X | Use the flipX property in a tween to automatically flip an image horizontally when it yoyos or repeats.
v4.1.0 | tweens | Tween Flip Y | Demonstrates how to use the flipY property in a tween to automatically flip an image vertically when it yoyos or repeats.
v4.1.0 | tweens | Tween From and To Values | This example shows how to explicitly define the starting and ending values of a property within a tween configuration.
v4.1.0 | tweens | Tween Gauge Animation | Simulate a dial or gauge by tweening the rotation of a needle sprite using relative values, yoyo effects, and custom origins.
v4.1.0 | tweens | Tween Lag Recovery | Demonstrates how the Phaser Tween Manager handles a sudden CPU block or lag spike during an active animation, showing how the tween positions synchronize once the thread is released.
v4.1.0 | tweens | Tween Lag Smoothing | Demonstrates how the tween system handles and recovers from significant CPU lag by simulating a long blocking process during tween playback.
v4.1.0 | tweens | Tween Loop | Demonstrates how to repeat a tween multiple times using the loop property and how to use the onLoop callback to track the current loop count.
v4.1.0 | tweens | Tween Manager Garbage Collection Performance | A stress test creating thousands of single-use tweens to demonstrate how the Tween Manager efficiently handles high volume and internal garbage collection.
v4.1.0 | tweens | Tween On Start Callback | Demonstrates how to use the onStart event and onStartParams to execute a function and pass custom data when a tween begins playing.
v4.1.0 | tweens | Tween On Yoyo Callback | Demonstrates how to use the onYoyo callback to trigger logic specifically when a tween finishes its forward motion and begins to reverse direction.
v4.1.0 | tweens | Tween Performance Stress Test | A performance test demonstrating the engine handling thousands of tweening Blitter objects simultaneously, adding 256 new items per frame while the pointer is held down.
v4.1.0 | tweens | Tween Sprite Angle | Demonstrates how to rotate a sprite indefinitely by tweening its angle property with a relative value.
v4.1.0 | tweens | Tween Sprite Angle | Animate the rotation of a sprite between two specific angles using a repeating yoyo tween.
v4.1.0 | tweens | Tween Stagger Showcase | A demonstration of the different configurations available for stagger tweens, showcasing how to apply delays across a grid using various start points, ranges, and easing functions.
v4.1.0 | tweens | Tween Text Size and Color | Demonstrates how to use a Tween Counter to animate the font size and color of a Text object via the onUpdate callback.
v4.1.0 | tweens | Tween Texture Change | Demonstrates how to swap the texture of an image using a repeating tween and trigger particle effects during the swap using the onRepeat callback.
v4.1.0 | tweens/chains | Basic Tween Chain | Learn how to sequence multiple animations on a single target by creating a Tween Chain that executes tweens in order.
v4.1.0 | tweens/chains | Bat Tween Chain | Demonstrates using tween chains to sequence multiple animations on a Container, including managing independent wing flaps and a multi-stage death animation triggered by interaction.
v4.1.0 | tweens/chains | Debug Chained Tweens | Learn how to access and display real-time properties of a chained tween, including progress, duration, and the current active tween state.
v4.1.0 | tweens/chains | Multi Target Chain | Demonstrates how to sequence multiple tweens together in a chain where each individual tween targets a different Game Object.
v4.1.0 | tweens/chains | Tween Chain Sequence | Demonstrates creating complex animation sequences using tween chains, including looping, gracefully ending a loop with completeAfterLoop, and updating textures mid-sequence.
v4.1.0 | tweens/eases | Back Ease Graph | Visualizes the curves of Back easing functions (In, Out, and InOut) by plotting a tweened object's path onto a graph.
v4.1.0 | tweens/eases | Back Easing Functions | This example demonstrates the 'Back' easing functions (In, Out, and InOut), showing how tweens can overshoot their start or end positions for an elastic movement effect.
v4.1.0 | tweens/eases | Bounce Ease | A comparison of the bounce easing functions (bounce.in, bounce.out, and bounce.inout) showing how they apply a bouncing motion at the start, end, or both ends of a tween.
v4.1.0 | tweens/eases | Bounce Ease Variations | Visualize the motion curves of different Bounce ease types (In, Out, and InOut) as they are graphed in real-time.
v4.1.0 | tweens/eases | Circular Easing | A demonstration of the Circular easing functions (Circ.in, Circ.out, and Circ.inOut) applied to multiple tweened objects.
v4.1.0 | tweens/eases | Circular Easing Graph | Visualize the curves of different Circular easing functions (circ.in, circ.out, and circ.inout) using a moving target and a Graphics path.
v4.1.0 | tweens/eases | Cubic Easing Graph | Visualize the trajectory of Cubic ease functions (In, Out, and InOut) by plotting their movement over time using a Graphics object and a RenderTexture.
v4.1.0 | tweens/eases | Cubic Easing Variations | This example demonstrates the differences between Cubic In, Cubic Out, and Cubic InOut easing functions within Phaser tweens.
v4.1.0 | tweens/eases | Ease Equations | A visual comparison of all built-in easing functions in Phaser, demonstrating how different equations affect the speed and motion of tweens.
v4.1.0 | tweens/eases | Ease Mixer | Demonstrates how to apply different easing functions to individual properties within a single tween to create complex motion paths by mixing ease types for the X and Y axes.
v4.1.0 | tweens/eases | Ease Parameters | Demonstrates how to pass custom arguments to easing functions using the easeParams property, such as adjusting the overshoot amount for the Back ease.
v4.1.0 | tweens/eases | Exponential Ease Visualizer | Visualizes exponential easing functions (In, Out, and InOut) by plotting their movement curves in real-time using a tween and Graphics object.
v4.1.0 | tweens/eases | Exponential Easing | Demonstrates the behavior of Exponential In, Out, and InOut easing functions applied to tween animations.
v4.1.0 | tweens/eases | Linear Ease | This example demonstrates how to use the linear easing function to move an object at a constant speed throughout a tween.
v4.1.0 | tweens/eases | Quad Ease Functions | A comparison of the visual differences between Quadratic (Quad) easing types: In, Out, and InOut.
v4.1.0 | tweens/eases | Quadratic Easing Visualization | Visualizes the curves of Quadratic In, Out, and InOut easing functions by plotting their movement across the screen using a tween and Graphics object.
v4.1.0 | tweens/eases | Quartic Ease | Compare the differences between Quartic In, Quartic Out, and Quartic InOut easing functions applied to sprite movement.
v4.1.0 | tweens/eases | Quartic Ease Graph | Visualizes the Quartic easing functions (In, Out, and InOut) by drawing their curves in real-time using a tweened object and Graphics.
v4.1.0 | tweens/eases | Quintic Ease | Demonstrates the Quintic easing functions (Quint.in, Quint.out, and Quint.inout) to create smooth animations with dramatic acceleration and deceleration.
v4.1.0 | tweens/eases | Quintic Easing Graph | Visualize the curve of Quintic easing functions (In, Out, and InOut) by plotting a movement path using a tween and RenderTexture.
v4.1.0 | tweens/eases | Sine Ease Graph | Visualize and compare Sine.in, Sine.out, and Sine.inout ease functions by plotting a tween's path onto a RenderTexture.
v4.1.0 | tweens/eases | Sine Easing Functions | A demonstration comparing the movement characteristics of Sine.in, Sine.out, and Sine.inOut easing functions.
v4.1.0 | utils/array | Array Range Utility | Demonstrates creating a patterned array from two input arrays using the Range utility with options for repeating, yoyo effects, and randomization.
v4.1.0 | utils/array | Bring to Top | Demonstrates how to move a specific item to the end of an array using the BringToTop utility function.
v4.1.0 | utils/array | Reverse Matrix Columns | Demonstrates how to flip a 2D array horizontally using the Matrix Reverse Columns utility.
v4.1.0 | utils/array | Reverse Matrix Rows | Demonstrates how to use Phaser's matrix utility to reverse the order of rows within a 2D array.
v4.1.0 | utils/array | Rotate Matrix | Demonstrates rotating a 2D array (matrix) clockwise using Phaser's Matrix utility functions.
v4.1.0 | utils/array | Rotate Matrix 180 | Demonstrates how to rotate a 2D array (matrix) 180 degrees using Phaser array matrix utilities.
v4.1.0 | utils/array | Rotate Matrix Left | Demonstrates how to rotate a 2D array (matrix) counter-clockwise using Phaser's matrix utility functions.
v4.1.0 | utils/array | Rotate Matrix Right | Demonstrates how to rotate a 2D array (matrix) 90 degrees clockwise using Phaser's Matrix utility functions.
v4.1.0 | utils/array | Translate Matrix | Shift the contents of a 2D array (matrix) horizontally or vertically using the Matrix Translate utility.
v4.1.0 | utils/array | Transpose Matrix | Demonstrates how to use Phaser's matrix utility to transpose a 2D array, swapping its rows and columns.
v4.1.0 | utils/rbush | R-Tree Spatial Search | Demonstrates how to use an R-Tree to perform efficient spatial searches, finding and highlighting all sprites within a bounding box that follows the mouse pointer.
v4.1.0 | utils/rbush | RTree Spatial Search | This example demonstrates how to use the RTree spatial data structure to efficiently search for and identify sprites within a specific rectangular area.
v4.1.0 | utils/size | Aspect Mode Fit | Demonstrates using the FIT aspect mode in the Size component to scale a rectangle within a parent's bounds while preserving its aspect ratio.
v4.1.0 | utils/size | Aspect Mode None | Demonstrates using Phaser.Structs.Size with the NONE aspect mode, allowing dimensions to be set independently without preserving an aspect ratio.
v4.1.0 | utils/size | Aspect Mode: Envelop | Demonstrates the Envelop aspect mode in Phaser.Structs.Size, which scales a size to be as small as possible while still fully covering a parent area and maintaining its aspect ratio.
v4.1.0 | utils/size | Aspect Mode: Height Controls Width | Demonstrates the Size component using the HEIGHT_CONTROLS_WIDTH aspect mode, where the width is automatically adjusted to maintain aspect ratio based on changes to the height.
v4.1.0 | utils/size | Aspect Mode: Width Controls Height | Demonstrates using the Size structure aspect mode where the height is automatically calculated based on the width to maintain the aspect ratio.
v4.1.0 | utils/size | Min Size | Demonstrates how to use setMin on a Size object to enforce a minimum width and height when resizing.
v4.1.0 | utils/size | Size Object Maximum Constraints | This example demonstrates how to use the setMax method on a Size object to enforce maximum width and height limits.
v4.1.0 | utils/size | Size Object Min and Max Constraints | Demonstrates how to use the Size structure to manage dimensions while enforcing minimum and maximum width and height limits.
v4.1.0 | utils/size | Snap Child Size | Demonstrates how to use the snap property on a Size object to force dimensions to align with a specific grid increment during resizing.