Phaser 3.61.0 Beta 4

New Features - Arcade Physics

• Arcade Physics Bodies have a new method called setDirectControl which toggles a new boolean property directControl. When enabled (it's false by default) it means the Body will calculate its velocity based on its change in position compared to the previous frame. This allows you to directly move a Body around the physics world by just changing its position, without having to use acceleration or velocity. This is useful if you want to move it via a Tween, or follow a Pointer, or a Path. Because its velocity is calculated based on this movement it will still resolve collisions with other bodies, imparting velocity to them as usual.
• Arcade Physics Bodies have a new property called slideFactor. This is a Vector2 that controls how much velocity is retained by a Body after it has been pushed by another Body. The default value is 1, which means it retains all of its velocity. If set to zero, it will retain none of it. This allows you to create a Body that can be pushed around without imparting any velocity to it.
• Body.setSlideFactor is a new method that sets the Body's slideFactor property.
• The Arcade Physics World has a new method nextCategory which will create a new collision category and return it. You can define up to 32 unique collision categories per world.
• Arcade Physics Bodies have two new properties: collisionCategory and collisionMask. These allow you to set a specific collision category and list of categories the body will collide with. This allows for fine-grained control over which bodies collide with which others. The default is that all bodies collide with all others, just like before.
• setCollisionCategory is a new method available on Arcade Physics Bodies that allows you to set the collision category of the body. It's also available on Arcade Sprites, Images, Tilemap Layers, Groups and Static Groups directly.
• setCollidesWith is a new method available on Arcade Physics Bodies that allows you to set which collision categories the body should collide with. It's also available on Arcade Sprites, Images, Tilemap Layers, Groups and Static Groups directly.
• resetCollision is a new method available on Arcade Physics Bodies that allows you to reset the collision category and mask to their defaults. It's also available on Arcade Sprites, Images, Tilemap Layers, Groups and Static Groups directly.

The default is as before: all bodies collide with each other. However, by using the categories you now have much more fine-grained control over which objects collide together, or not. They are filtered out at the top-level, meaning you can have a Sprite set to not collide with a Physics Group and it will skip checking every single child in the Group, potentially saving a lot of processing time.

The new collision categories are used automatically by either directly calling the collide or overlap methods, or by creating a Collider object. This allows you to use far less colliders than you may have needed previously and skip needing to filter the pairs in the collision handlers.

New Features

• Text.setRTL is a new method that allows you to set a Text Game Object as being rendered from right-to-left, instead of the default left to right (thanks @rexrainbow)
• FX.Circle.backgroundAlpha is a new property that allows you to set the amount of the alpha of the background color in the Circle FX (thanks @rexrainbow)
• Physics.Arcade.World.singleStep is a new method that will advance the Arcade Physics World simulation by exactly 1 step (thanks @monteiz)
• Tilemaps.ObjectLayer.id is a new property that returns the ID of the Object Layer, if specified within Tiled, or zero otherwise. You can now access the unique layer ID of Tiled layers if the event a map doesn't have unique layer names (thanks @rui-han-crh)
• Tilemaps.LayerData.id is a new property that returns the ID of the Data Layer, if specified within Tiled, or zero otherwise (thanks @rui-han-crh)
• Text.setLetterSpacing is a new method and Text.lineSpacing is the related property that allows you to set the spacing between each character of a Text Game Object. The value can be either negative or positive, causing the characters to get closer or further apart. Please understand that enabling this feature will cause Phaser to render each character in this Text object one by one, rather than use a draw for the whole string. This makes it extremely expensive when used with either long strings, or lots of strings in total. You will be better off creating bitmap font text if you need to display large quantities of characters with fine control over the letter spacing (thanks @Ariorh1337)
• ParticleEmitter.clearDeathZones is a new method that will clear all previously created Death Zones from a Particle Emitter (thanks @rexrainbow)
• ParticleEmitter.clearEmitZones is a new method that will clear all previously created Emission Zones from a Particle Emitter (thanks @rexrainbow)
• The GameObject.setTexture method has 2 new optional parameters: updateSize and updateOrigin, which are both passed to the setFrame method and allows you to control if the size and origin of the Game Object should be updated when the texture is set (thanks @Trissolo)
• Both the Animation Config and the Play Animation Config allow you to set a new boolean property randomFrame. This is false by default, but if set, it will pick a random frame from the animation when it starts playback. This allows for much more variety in groups of sprites created at the same time, using the same animation. This is also reflected in the new Animation.randomFrame and AnimationState.randomFrame properties.
• You can now use a Phaser.Types.Animations.PlayAnimationConfig object in the anims property of the ParticleEmitter configuration object. This gives you far more control over what happens to the animation when used by particles, including setting random start frames, repeat delays, yoyo, etc. Close #6478 (thanks @michalfialadev)
• TilemapLayer.setTintFill is a new method that will apply a fill-based tint to the tiles in the given area, rather than an additive-based tint, which is what the setTint method uses.
• Tile.tintFill is a new boolean property that controls if the tile tint is additive or fill based. This is used in the TilemapLayerWebGLRenderer function.

Updates

• The WebAudioSoundManager will now bind the body to the removeEventListener method, if it exists, to prevent memory leaks (thanks @wjaykim)
• The AnimationManager.globalTimeScale property is now applied to all Game Objects using the Animation component, allowing you to globally speed-up or slow down all animating objects (thanks @TJ09)
• The Rope Game Object now calls initPostPipeline allowing you to use Post FX directly on it, such as glow, blur, etc. Fix #6550 (thanks @rexrainbow)
• The Tween.stop method will now check to see if Tween.parent is set. If not, it won't try to set a pending removal state or dispatch an event, which should help guard against errors where Tween.stop is called by mistake on already destroyed tweens (thanks @orcomarcio)
• The Tween.remove method will now check to see if Tween.parent exists before trying to remove it from the parent. This should help guard against errors where Tween.remove is called by mistake on already removed or destroyed tweens. Fix #6539 (thanks @orcomarcio)
• Particle.alpha is now clamped to the range 0 to 1 within the update method, preventing it from going out of range. Fix #6551 (thanks @orcomarcio)
• Math.Wrap has been reverted to the previous version. Fix #6479 (thanks @EmilSV)
• The Graphics Game Object will now set a default line and fill style to fully transparent and black. This prevents issues where a Graphics object would render with a color set in other Shape Game Objects if it had been drawn to and no style was previous set (thanks Whitesmith)
• The WebGLRenderer will now validate that the mipmapFilter property in the Game Config is a valid mipmap before assigning it.
• A small amount of unused code has been removed from the Polygon.setTo method (thanks @Trissolo)
• The WebGLRenderer.deleteFramebuffer method has been updated so it now tests for the existence of a COLOR and DEPTH_STENCIL attachments, and if found, removes the bindings and deletes the stencil buffer. The code that previously deleted the RENDERERBUFFER_BINDING has also been removed to avoid side-effects.
• If you make a Mesh Game Object interactive, it will now bind to the scope of the Mesh and uses the current faces in the hit area callback, rather than the faces as defined when the Mesh was made interactive. This will help keep the input in sync with a potentially changing Mesh structure (thanks @rexrainbow)
• iOS and any browser identifying as AppleWebKit will now set the Device.es2019 flag to true. This causes Phaser to use the native array Stable Sort. This fixes an issue where overlapping particles could flicker on iOS. Fix #6483 (thanks @mattkelliher @spayton)
• The Text.dirty Game Object property has been removed. It wasn't used internally at all, so was just adding confusion and using space.
• The Request Video Frame polyfill will now check first to see if the browser supports HTMLVideoElement before trying to inspect its prototype. This should help in non-browser environments.
• Plane.originX and originY are two new read-only properties that return the origin of the Plane, which is always 0.5 (thanks @rexrainbow)
• The LoaderPlugin will now call removeAllListeners() as part of its shutdown method, which will clear any event listeners bound to a Loader instance of the Scene, during the Scene shutdown. Fix #6633 (thanks @samme)
• SetCollisionObject is a new function that Arcade Physics bodies use internally to create and reset their ArcadeBodyCollision data objects.
• `DynamicTex...

Phaser 3.61.0 Beta 3

New Features - Arcade Physics

• Arcade Physics Bodies have a new property called slideFactor. This is a Vector2 that controls how much velocity is retained by a Body after it has been pushed by another Body. The default value is 1, which means it retains all of its velocity. If set to zero, it will retain none of it. This allows you to create a Body that can be pushed around without imparting any velocity to it.
• Body.setSlideFactor is a new method that sets the Body's slideFactor property.
• The Arcade Physics World has a new method nextCategory which will create a new collision category and return it. You can define up to 32 unique collision categories per world.
• Arcade Physics Bodies have two new properties: collisionCategory and collisionMask. These allow you to set a specific collision category and list of categories the body will collide with. This allows for fine-grained control over which bodies collide with which others. The default is that all bodies collide with all others, just like before.
• setCollisionCategory is a new method available on Arcade Physics Bodies that allows you to set the collision category of the body. It's also available on Arcade Sprites, Images, Tilemap Layers, Groups and Static Groups directly.
• setCollidesWith is a new method available on Arcade Physics Bodies that allows you to set which collision categories the body should collide with. It's also available on Arcade Sprites, Images, Tilemap Layers, Groups and Static Groups directly.
• resetCollision is a new method available on Arcade Physics Bodies that allows you to reset the collision category and mask to their defaults. It's also available on Arcade Sprites, Images, Tilemap Layers, Groups and Static Groups directly.

The default is as before: all bodies collide with each other. However, by using the categories you now have much more fine-grained control over which objects collide together, or not. They are filtered out at the top-level, meaning you can have a Sprite set to not collide with a Physics Group and it will skip checking every single child in the Group, potentially saving a lot of processing time.

The new collision categories are used automatically by either directly calling the collide or overlap methods, or by creating a Collider object. This allows you to use far less colliders than you may have needed previously and skip needing to filter the pairs in the collision handlers.

New Features

• Text.setRTL is a new method that allows you to set a Text Game Object as being rendered from right-to-left, instead of the default left to right (thanks @rexrainbow)
• FX.Circle.backgroundAlpha is a new property that allows you to set the amount of the alpha of the background color in the Circle FX (thanks @rexrainbow)
• Physics.Arcade.World.singleStep is a new method that will advance the Arcade Physics World simulation by exactly 1 step (thanks @monteiz)
• Tilemaps.ObjectLayer.id is a new property that returns the ID of the Object Layer, if specified within Tiled, or zero otherwise. You can now access the unique layer ID of Tiled layers if the event a map doesn't have unique layer names (thanks @rui-han-crh)
• Tilemaps.LayerData.id is a new property that returns the ID of the Data Layer, if specified within Tiled, or zero otherwise (thanks @rui-han-crh)
• Text.setLetterSpacing is a new method and Text.lineSpacing is the related property that allows you to set the spacing between each character of a Text Game Object. The value can be either negative or positive, causing the characters to get closer or further apart. Please understand that enabling this feature will cause Phaser to render each character in this Text object one by one, rather than use a draw for the whole string. This makes it extremely expensive when used with either long strings, or lots of strings in total. You will be better off creating bitmap font text if you need to display large quantities of characters with fine control over the letter spacing (thanks @Ariorh1337)
• ParticleEmitter.clearDeathZones is a new method that will clear all previously created Death Zones from a Particle Emitter (thanks @rexrainbow)
• ParticleEmitter.clearEmitZones is a new method that will clear all previously created Emission Zones from a Particle Emitter (thanks @rexrainbow)
• The GameObject.setTexture method has 2 new optional parameters: updateSize and updateOrigin, which are both passed to the setFrame method and allows you to control if the size and origin of the Game Object should be updated when the texture is set (thanks @Trissolo)
• Both the Animation Config and the Play Animation Config allow you to set a new boolean property randomFrame. This is false by default, but if set, it will pick a random frame from the animation when it starts playback. This allows for much more variety in groups of sprites created at the same time, using the same animation. This is also reflected in the new Animation.randomFrame and AnimationState.randomFrame properties.
• You can now use a Phaser.Types.Animations.PlayAnimationConfig object in the anims property of the ParticleEmitter configuration object. This gives you far more control over what happens to the animation when used by particles, including setting random start frames, repeat delays, yoyo, etc. Close #6478 (thanks @michalfialadev)
• TilemapLayer.setTintFill is a new method that will apply a fill-based tint to the tiles in the given area, rather than an additive-based tint, which is what the setTint method uses.
• Tile.tintFill is a new boolean property that controls if the tile tint is additive or fill based. This is used in the TilemapLayerWebGLRenderer function.

Updates

• The WebAudioSoundManager will now bind the body to the removeEventListener method, if it exists, to prevent memory leaks (thanks @wjaykim)
• The AnimationManager.globalTimeScale property is now applied to all Game Objects using the Animation component, allowing you to globally speed-up or slow down all animating objects (thanks @TJ09)
• The Rope Game Object now calls initPostPipeline allowing you to use Post FX directly on it, such as glow, blur, etc. Fix #6550 (thanks @rexrainbow)
• The Tween.stop method will now check to see if Tween.parent is set. If not, it won't try to set a pending removal state or dispatch an event, which should help guard against errors where Tween.stop is called by mistake on already destroyed tweens (thanks @orcomarcio)
• The Tween.remove method will now check to see if Tween.parent exists before trying to remove it from the parent. This should help guard against errors where Tween.remove is called by mistake on already removed or destroyed tweens. Fix #6539 (thanks @orcomarcio)
• Particle.alpha is now clamped to the range 0 to 1 within the update method, preventing it from going out of range. Fix #6551 (thanks @orcomarcio)
• Math.Wrap has been reverted to the previous version. Fix #6479 (thanks @EmilSV)
• The Graphics Game Object will now set a default line and fill style to fully transparent and black. This prevents issues where a Graphics object would render with a color set in other Shape Game Objects if it had been drawn to and no style was previous set (thanks Whitesmith)
• The WebGLRenderer will now validate that the mipmapFilter property in the Game Config is a valid mipmap before assigning it.
• A small amount of unused code has been removed from the Polygon.setTo method (thanks @Trissolo)
• The WebGLRenderer.deleteFramebuffer method has been updated so it now tests for the existence of a COLOR and DEPTH_STENCIL attachments, and if found, removes the bindings and deletes the stencil buffer. The code that previously deleted the RENDERERBUFFER_BINDING has also been removed to avoid side-effects.
• If you make a Mesh Game Object interactive, it will now bind to the scope of the Mesh and uses the current faces in the hit area callback, rather than the faces as defined when the Mesh was made interactive. This will help keep the input in sync with a potentially changing Mesh structure (thanks @rexrainbow)
• iOS and any browser identifying as AppleWebKit will now set the Device.es2019 flag to true. This causes Phaser to use the native array Stable Sort. This fixes an issue where overlapping particles could flicker on iOS. Fix #6483 (thanks @mattkelliher @spayton)
• The Text.dirty Game Object property has been removed. It wasn't used internally at all, so was just adding confusion and using space.
• The Request Video Frame polyfill will now check first to see if the browser supports HTMLVideoElement before trying to inspect its prototype. This should help in non-browser environments.
• Plane.originX and originY are two new read-only properties that return the origin of the Plane, which is always 0.5 (thanks @rexrainbow)
• The LoaderPlugin will now call removeAllListeners() as part of its shutdown method, which will clear any event listeners bound to a Loader instance of the Scene, during the Scene shutdown. Fix #6633 (thanks @samme)
• SetCollisionObject is a new function that Arcade Physics bodies use internally to create and reset their ArcadeBodyCollision data objects.
• DynamicTexture.setFromRenderTarget is a new method that syncs the internal Frame and TextureSource GL textures with the Render Target GL textures.
• When a framebuffer is deleted, it now sets its renderTexture property to undefined to ensure the reference is cleared.

Bug Fixes

• The PostFXPipeline will now set autoResize to true on all of its RenderTarget instances. This fixes an issue where the PostFXPipeline would not resize the render targets when the game size changed, causing them to become out of sync with the game canvas. Fix #6503 (thanks @Waclaw-I)
• Particle.scaleY would always be set to the scaleX value, ev...

Phaser 3.61.0 Beta 2

New Features

• Text.setRTL is a new method that allows you to set a Text Game Object as being rendered from right-to-left, instead of the default left to right (thanks @rexrainbow)
• FX.Circle.backgroundAlpha is a new property that allows you to set the amount of the alpha of the background color in the Circle FX (thanks @rexrainbow)
• Physics.Arcade.World.singleStep is a new method that will advance the Arcade Physics World simulation by exactly 1 step (thanks @monteiz)
• Tilemaps.ObjectLayer.id is a new property that returns the ID of the Object Layer, if specified within Tiled, or zero otherwise. You can now access the unique layer ID of Tiled layers if the event a map doesn't have unique layer names (thanks @rui-han-crh)
• Tilemaps.LayerData.id is a new property that returns the ID of the Data Layer, if specified within Tiled, or zero otherwise (thanks @rui-han-crh)
• Text.setLetterSpacing is a new method and Text.lineSpacing is the related property that allows you to set the spacing between each character of a Text Game Object. The value can be either negative or positive, causing the characters to get closer or further apart. Please understand that enabling this feature will cause Phaser to render each character in this Text object one by one, rather than use a draw for the whole string. This makes it extremely expensive when used with either long strings, or lots of strings in total. You will be better off creating bitmap font text if you need to display large quantities of characters with fine control over the letter spacing (thanks @Ariorh1337)
• ParticleEmitter.clearDeathZones is a new method that will clear all previously created Death Zones from a Particle Emitter (thanks @rexrainbow)
• ParticleEmitter.clearEmitZones is a new method that will clear all previously created Emission Zones from a Particle Emitter (thanks @rexrainbow)
• The GameObject.setTexture method has 2 new optional parameters: updateSize and updateOrigin, which are both passed to the setFrame method and allows you to control if the size and origin of the Game Object should be updated when the texture is set (thanks @Trissolo)
• Both the Animation Config and the Play Animation Config allow you to set a new boolean property randomFrame. This is false by default, but if set, it will pick a random frame from the animation when it starts playback. This allows for much more variety in groups of sprites created at the same time, using the same animation. This is also reflected in the new Animation.randomFrame and AnimationState.randomFrame properties.
• You can now use a Phaser.Types.Animations.PlayAnimationConfig object in the anims property of the ParticleEmitter configuration object. This gives you far more control over what happens to the animation when used by particles, including setting random start frames, repeat delays, yoyo, etc. Close #6478 (thanks @michalfialadev)

Updates

• The WebAudioSoundManager will now bind the body to the removeEventListener method, if it exists, to prevent memory leaks (thanks @wjaykim)
• The AnimationManager.globalTimeScale property is now applied to all Game Objects using the Animation component, allowing you to globally speed-up or slow down all animating objects (thanks @TJ09)
• The Rope Game Object now calls initPostPipeline allowing you to use Post FX directly on it, such as glow, blur, etc. Fix #6550 (thanks @rexrainbow)
• The Tween.stop method will now check to see if Tween.parent is set. If not, it won't try to set a pending removal state or dispatch an event, which should help guard against errors where Tween.stop is called by mistake on already destroyed tweens (thanks @orcomarcio)
• The Tween.remove method will now check to see if Tween.parent exists before trying to remove it from the parent. This should help guard against errors where Tween.remove is called by mistake on already removed or destroyed tweens. Fix #6539 (thanks @orcomarcio)
• Particle.alpha is now clamped to the range 0 to 1 within the update method, preventing it from going out of range. Fix #6551 (thanks @orcomarcio)
• Math.Wrap has been reverted to the previous version. Fix #6479 (thanks @EmilSV)
• The Graphics Game Object will now set a default line and fill style to fully transparent and black. This prevents issues where a Graphics object would render with a color set in other Shape Game Objects if it had been drawn to and no style was previous set (thanks Whitesmith)
• The WebGLRenderer will now validate that the mipmapFilter property in the Game Config is a valid mipmap before assigning it.
• A small amount of unused code has been removed from the Polygon.setTo method (thanks @Trissolo)
• The WebGLRenderer.deleteFramebuffer method has been updated so it now tests for the exitennce of a COLOR and DEPTH_STENCIL attachments, and if found, removes the bindings and deletes the stencil buffer. The code that previously deelted the RENDERERBUFFER_BINDING has also been removed to avoid side-effects.
• If you make a Mesh Game Object interactive, it will now bind to the scope of the Mesh and uses the current faces in the hit area callback, rather than the faces as defined when the Mesh was made interactive. This will help keep the input in sync with a potentially changing Mesh structure (thanks @rexrainbow)
• iOS and any browser identifying as AppleWebKit will now set the Device.es2019 flag to true. This causes Phaser to use the native array Stable Sort. This fixes an issue where overlapping particles could flicker on iOS. Fix #6483 (thanks @mattkelliher @spayton)

Bug Fixes

• The PostFXPipeline will now set autoResize to true on all of its RenderTarget instances. This fixes an issue where the PostFXPipeline would not resize the render targets when the game size changed, causing them to become out of sync with the game canvas. Fix #6503 #6527 (thanks @Waclaw-I @rexrainbow)
• Particle.scaleY would always be set to the scaleX value, even if given a different one within the config. It will now use its own value correctly.
• Array.Matrix.RotateLeft was missing the total parameter, which controls how many times to rotate the matrix.
• Array.Matrix.RotateRight was missing the total parameter, which controls how many times to rotate the matrix.
• Array.Matrix.TranslateMatrix didn't work with any translation values above 1 due to missing parameters in RotateLeft and RotateRight
• FX.Blur didn't set the quality parameter to its property, meaning it wasn't applied in the shader, causing it to always use a Low Blur quality (unless modified post-creation).
• The BlurFXPipeline didn't bind the quality of shader specified in the controller, meaning it always used the Low Blur shader, regardless of what the FX controller asked for.
• The FXBlurLow fragment shader didn't have the offset uniform. This is now passed in and applied to the resulting blur, preventing it from creating 45 degree artifacts (thanks Wayfinder)
• The Tilemap.createFromObjects method wouldn't always copy custom properties to the target objects or Data Manager. Fix #6391 (thanks @samme @paxperscientiam)
• The scale.min and scale.max width and height properties in Game Config were ignored by the Game constructor, which was expecting minWidth and minHeight. This now matches the documentation. Fix #6501 (thanks @NikitaShpanko @wpederzoli)
• Due to a copy-paste bug, the Actions.GetLast function had the same code as the GetFirst function. It now does what you'd expect it to do. Fix #6513 (thanks @dmokel)
• The TilemapLayer.PutTileAt method would use an incorrect local GID if the Tilemap Layer wasn't using all available tilesets. Fix #5931 (thanks @christianvoigt @wjaykim)
• The TextureManager.addSpriteSheet method would fail if a Texture instance was given as the second parameter, throwing a Cannot read property 'key' of null (thanks @charlieschwabacher)
• The HexagonalCullBounds function incorrectly referenced this within it, instead of layer (thanks @DaliborTrampota)
• The HexagonalGetTileCorners function incorrectly referenced this within it, instead of layer (thanks @DaliborTrampota)
• The HexagonalTileToWorldXY function incorrectly referenced this within it, instead of layer (thanks @DaliborTrampota)
• The BitmapText Game Object will now reset the WebGL Texture unit on flush, which fixes an issue of a flush happening part-way during the rendering a BitmapText (thanks @EmilSV)
• When using interpolation for a Particle Emitter operation, such as: x: { values: [ 50, 500, 200, 800 ] } it would fail to set the final value unless you specified the interpolation property as well. It now defaults to linear if not given. Fix #6551 (thanks @orcomarcio)
• The Matter Physics ignoreGravity boolean is now checked during the Matter Engine internal functions, allowing this property to now work again. Fix #6473 (thanks @peer2p)
• Group.createFromConfig will now check to see if the config contains either internalCreateCallback or internalRemoveCallback and set them accordingly. This fixes an issue where the callbacks would never be set if specified in an array of single configuration objects. Fix #6519 (thanks @samme)
• PhysicsGroup will now set the classType and null the config when an array of single configuration objects is given in the constructor. Fix #6519 (thanks @samme)
• The PathFollower.pathUpdate method will now check if the tween property has a valid data component before running the update. This prevents a call to PathFollower.stopFollow from throwing a Cannot read properties of null (reading '0') error as it tried to do a single update post stop. Fix #6508 (thanks @francois-dibulo)
• Added missing parameter to some function calls in Structs.ProcessQueue#add (thanks @Trissolo)
• Tile was incorrectly using...

Phaser 3.61.0 Beta 1

New Features

• Text.setRTL is a new method that allows you to set a Text Game Object as being rendered from right-to-left, instead of the default left to right (thanks @rexrainbow)
• FX.Circle.backgroundAlpha is a new property that allows you to set the amount of the alpha of the background color in the Circle FX (thanks @rexrainbow)
• Physics.Arcade.World.singleStep is a new method that will advance the Arcade Physics World simulation by exactly 1 step (thanks @monteiz)
• Tilemaps.ObjectLayer.id is a new property that returns the ID of the Object Layer, if specified within Tiled, or zero otherwise. You can now access the unique layer ID of Tiled layers if the event a map doesn't have unique layer names (thanks @rui-han-crh)
• Tilemaps.LayerData.id is a new property that returns the ID of the Data Layer, if specified within Tiled, or zero otherwise (thanks @rui-han-crh)
• Text.setLetterSpacing is a new method and Text.lineSpacing is the related property that allows you to set the spacing between each character of a Text Game Object. The value can be either negative or positive, causing the characters to get closer or further apart. Please understand that enabling this feature will cause Phaser to render each character in this Text object one by one, rather than use a draw for the whole string. This makes it extremely expensive when used with either long strings, or lots of strings in total. You will be better off creating bitmap font text if you need to display large quantities of characters with fine control over the letter spacing (thanks @Ariorh1337)
• ParticleEmitter.clearDeathZones is a new method that will clear all previously created Death Zones from a Particle Emitter (thanks @rexrainbow)
• ParticleEmitter.clearEmitZones is a new method that will clear all previously created Emission Zones from a Particle Emitter (thanks @rexrainbow)

Updates

• The WebAudioSoundManager will now bind the body to the removeEventListener method, if it exists, to prevent memory leaks (thanks @wjaykim)
• The AnimationManager.globalTimeScale property is now applied to all Game Objects using the Animation component, allowing you to globally speed-up or slow down all animating objects (thanks @TJ09)
• The Rope Game Object now calls initPostPipeline allowing you to use Post FX directly on it, such as glow, blur, etc. Fix #6550 (thanks @rexrainbow)
• The Tween.stop method will now check to see if Tween.parent is set. If not, it won't try to set a pending removal state or dispatch an event, which should help guard against errors where Tween.stop is called by mistake on already destroyed tweens (thanks @orcomarcio)
• The Tween.remove method will now check to see if Tween.parent exists before trying to remove it from the parent. This should help guard against errors where Tween.remove is called by mistake on already removed or destroyed tweens. Fix #6539 (thanks @orcomarcio)
• Particle.alpha is now clamped to the range 0 to 1 within the update method, preventing it from going out of range. Fix #6551 (thanks @orcomarcio)
• Math.Wrap has been reverted to the previous version. Fix #6479 (thanks @EmilSV)

Bug Fixes

• Particle.scaleY would always be set to the scaleX value, even if given a different one within the config. It will now use its own value correctly.
• Array.Matrix.RotateLeft was missing the total parameter, which controls how many times to rotate the matrix.
• Array.Matrix.RotateRight was missing the total parameter, which controls how many times to rotate the matrix.
• Array.Matrix.TranslateMatrix didn't work with any translation values above 1 due to missing parameters in RotateLeft and RotateRight
• FX.Blur didn't set the quality parameter to its property, meaning it wasn't applied in the shader, causing it to always use a Low Blur quality (unless modified post-creation).
• The BlurFXPipeline didn't bind the quality of shader specified in the controller, meaning it always used the Low Blur shader, regardless of what the FX controller asked for.
• The FXBlurLow fragment shader didn't have the offset uniform. This is now passed in and applued to the resulting blur, preventing it from creating 45 degree artifacts (thanks Wayfinder)
• The Tilemap.createFromObjects method wouldn't always copy custom properties to the target objects or Data Manager. Fix #6391 (thanks @samme @paxperscientiam)
• The scale.min and scale.max width and height properties in Game Config were ignored by the Game constructor, which was expecting minWidth and minHeight. This now matches the documnentation. Fix #6501 (thanks @NikitaShpanko @wpederzoli)
• Due to a copy-paste bug, the Actions.GetLast function had the same code as the GetFirst function. It now does what you'd expect it to do. Fix #6513 (thanks @dmokel)
• The TilemapLayer.PutTileAt method would use an incorrect local GID if the Tilemap Layer wasn't using all available tilesets. Fix #5931 (thanks @christianvoigt @wjaykim)
• The TextureManager.addSpriteSheet method would fail if a Texture instance was given as the second parameter, throwing a Cannot read property 'key' of null (thanks @charlieschwabacher)
• The HexagonalCullBounds function incorrectly referenced this within it, instead of layer (thanks @DaliborTrampota)
• The HexagonalGetTileCorners function incorrectly referenced this within it, instead of layer (thanks @DaliborTrampota)
• The HexagonalTileToWorldXY function incorrectly referenced this within it, instead of layer (thanks @DaliborTrampota)
• The BitmapText Game Object will now reset the WebGL Texture unit on flush, which fixes an issue of a flush happened part-way during the rendering a BitmapText (thanks @EmilSV)
• When using interpolation for a Particle Emitter operation, such as: x: { values: [ 50, 500, 200, 800 ] } it would fail to set the final value unless you specified the interpolation property as well. It now defaults to linear if not given. Fix #6551 (thanks @orcomarcio)
• The Matter Physics ignoreGravity boolean is now checked during the Matter Engine internal functions, allowing this property to now work again. Fix #6473 (thanks @peer2p)
• Group.createFromConfig will now check to see if the config contains either internalCreateCallback or internalRemoveCallback and set them accordingly. This fixes an issue where the callbacks would never be set if specified in an array of single configuration objects. Fix #6519 (thanks @samme)
• PhysicsGroup will now set the classType and null the config when an array of single configuration objects is given in the constructor. Fix #6519 (thanks @samme)
• The PathFollower.pathUpdate method will now check if the tween property has a valid data component before running the update. This prevents a call to PathFollower.stopFollow from throwing a Cannot read properties of null (reading '0') error as it tried to do a single update post stop. Fix #6508 (thanks @francois-dibulo)

Examples, Documentation, Beta Testing and TypeScript

My thanks to the following for helping with the Phaser 3 Examples, Beta Testing, Docs, and TypeScript definitions, either by reporting errors, fixing them, or helping author the docs:

@samme

Phaser v3.60.0

Due to the size and importance of the v3.60 release, we have split the Change Log up into multiple sections.

This makes it easier for you to browse and find the information you need.

New Features

These are the headliner features in this release:

• 14 bundled Special FX including Bloom, Blur, Distort, Glow, Wipe, and more
• Vastly improved Mobile Rendering Performance - over 7000% faster!
• New Timeline Sequencer for creating complex flows of events
• New Plane Game Object for perspective distortions
• New Nine Slice Game Object for perfect UI scaling
• Built-in Spector JS for WebGL debugging on desktop and mobile
• Brand new Video Game Object handles videos and media streams with ease
• Brand new Particle Emitter comes with explosive new features
• Support for Spatial Audio and distance-based volume
• New Spine 4 Plugin support
• Upgraded to Matter Physics v0.19
• New Tween Manager with better performance and memory management
• New Dynamic Textures for rendering to textures at runtime
• New TimeStep features and Timer Event Updates for enforcing fps rates and more
• Support for Compressed Textures
• ESM Module Support

System and Plugins

Pick any of the following sections to see the breaking changes, new features, updates, and bug fixes for that area of the API.

• Animation System
• Arcade Physics
• Bitmap and Geometry Masks
• Camera System
• Canvas Renderer
• WebGL Renderer
• Colors and Display
• Game, Device and Game Config
• Geometry, Paths and Curves
• Input System
• Loader System
• Scale Manager
• Scenes and Scene Manager
• Sound System
• Spine 3 Plugin
• Texture Manager
• Utils, Math and Actions
• Build Config and Browser Updates

Game Object Updates

Finally, here are the updates related to Game Objects:

• Bitmap Text Game Object
• Container Game Object
• Graphics Game Object
• Mesh Game Object, Vertices and Faces
• Text Game Object
• Tilemap Game Object
• All other Game Object related Updates

Examples, Documentation, Beta Testing and TypeScript

My thanks to the following for helping with the Phaser 3 Examples, Beta Testing, Docs, and TypeScript definitions, either by reporting errors, fixing them, or helping author the docs:

💖	💖	💖	💖
@0day-oni	@201flaviosilva	@AlbertMontagutCasero	@Arcanorum
@arosemena	@austinlyon	@chrisl8	@christian-post
@danfoster	@darrylpizarro	@DeweyHur	@drunkcat
@ef4	@eltociear	@EsteFilipe	@etherealmachine
@EmilSV	@Fake	@florestankorp	@hacheraw
@hanzooo	@jerricko	@joegaffey	@jonasrundberg
@kainage	@kootoopas	@lolimay	@MaffDev
@michalfialadev	@monteiz	@necrokot	@Nero0
@OdinvonDoom	@orjandh	@pavle-goloskokovic	@PhaserEditor2D
@Pythux	@quocsinh	@rgk	@rollinsafary-inomma
@rstanuwijaya	👑 @samme 👑	@Smirnov48	@steveja42
@sylvainpolletvillard	@twoco	@ubershmekel	@ultimoistante
@VanaMartin	@vforsh	@Vidminas	@x-wk
@xmahle	@xuxucode	@YeloPartyHat	@ZekeLu
FromChris	Golen	OmniOwl	and you ...

📖 Read the Phaser 3 API Docs 💻 Browse 2000+ Code Examples 🤝 Join the awesome Phaser Discord

Phaser v3.60 Beta 23

Version 3.60.0 - Miku - in development

New Features - Timeline Class

Phaser 3.60 has a new Timeline Class which allows for fine-grained control of sequenced events. Previously in 3.55 the Timeline was part of the Tween system and it never quite worked as intended. In 3.60 it has been removed from Tweens entirely, replaced with the much more solid and reliable Tween Chains and Timeline has now becomes its own first-class citizen within Phaser. It allows you to sequence any event you like, not just tweens.

A Timeline is a way to schedule events to happen at specific times in the future. You can think of it as an event sequencer for your game, allowing you to schedule the running of callbacks, events and other actions at specific times in the future.

A Timeline is a Scene level system, meaning you can have as many Timelines as you like, each belonging to a different Scene. You can also have multiple Timelines running at the same time.

If the Scene is paused, the Timeline will also pause. If the Scene is destroyed, the Timeline will be automatically destroyed. However, you can control the Timeline directly, pausing, resuming and stopping it at any time.

Create an instance of a Timeline via the Game Object Factory:

const timeline = this.add.timeline();

The Timeline always starts paused. You must call play on it to start it running.

You can also pass in a configuration object on creation, or an array of them:

const timeline = this.add.timeline({
    at: 1000,
    run: () => {
        this.add.sprite(400, 300, 'logo');
    }
});

timeline.play();

In this example we sequence a few different events:

const timeline = this.add.timeline([
    {
        at: 1000,
        run: () => { this.logo = this.add.sprite(400, 300, 'logo'); },
        sound: 'TitleMusic'
    },
    {
        at: 2500,
        tween: {
            targets: this.logo,
            y: 600,
            yoyo: true
        },
        sound: 'Explode'
    },
    {
        at: 8000,
        event: 'HURRY_PLAYER',
        target: this.background,
        set: {
            tint: 0xff0000
        }
    }
]);

timeline.play();

There are lots of options available to you via the configuration object. See the TimelineEventConfig typedef for more details.

New Features - ESM Support

Phaser 3.60 uses the new release of Webpack 5 in order to handle the builds. The configurations have been updated to follow the new format this upgrade introduced. As a bonus, Webpack 5 also bought a new experimental feature called 'output modules', which will take a CommonJS code-base, like Phaser uses and wrap the output in modern ES Module declarations.

We are now using this as part of our build. You will find in the dist folder a new phaser.esm.js file, which is also linked in from our package.json module property. Using this build you can access any of the Phaser modules directly via named imports, meaning you can code like this:

import { AUTO, Scene, Game } from './phaser.esm.js';

class Test extends Scene
{
    constructor ()
    {
        super();
    }

    create ()
    {
        this.add.text(10, 10, 'Welcome to Phaser ESM');
    }
}

const config = {
    type: AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: [ Test ]
};

const game = new Game(config);

Note that we're importing from the local esm bundle. By using this approach you don't need to even use a bundler for quick local prototyping or testing, you can simply import and code directly.

The dist folder still also contains phaser.js which, as before, uses a UMD export.

Because the Webpack feature is experimental we won't make the ESM version the default just yet, but if you're curious and want to explore, please go ahead!

New Features - Built-in Special FX

We have decided to bundle a selection of highly flexible special effect shaders in to Phaser 3.60 and provide access to them via an easy to use set of API calls. The FX included are:

• Barrel - A nice pinch / bulge distortion effect.
• Bloom - Add bloom to any Game Object, with custom offset, blur strength, steps and color.
• Blur - 3 different levels of gaussian blur (low, medium and high) and custom distance and color.
• Bokeh / TiltShift - A bokeh and tiltshift effect, with intensity, contrast and distance settings.
• Circle - Add a circular ring around any Game Object, useful for masking / avatar frames, with custom color, width and background color.
• ColorMatrix - Add a ColorMatrix to any Game Object with access to all of its methods, such as sepia, greyscale, lsd and lots more.
• Displacement - Use a displacement texture, such as a noise texture, to drastically (or subtly!) alter the appearance of a Game Object.
• Glow - Add a smooth inner or outer glow, with custom distance, strength and color.
• Gradient - Draw a gradient between two colors across any Game Object, with optional 'chunky' mode for classic retro style games.
• Pixelate - Make any Game Object appear pixelated, to a varying degree.
• Shadow - Add a drop shadow behind a Game Object, with custom depth and color.
• Shine - Run a 'shine' effect across a Game Object, either additively or as part of a reveal.
• Vignette - Apply a vignette around a Game Object, with custom offset position, radius and color.
• Wipe - Set a Game Object to 'wipe' or 'reveal' with custom line width, direction and axis of the effect.

What's more, the FX can be stacked up. You could add, for example, a Barrel followed by a Blur and then topped-off with a Circle effect. Just by adjusting the ordering you can achieve some incredible and unique effects, very quickly.

We've worked hard to make the API as easy to use as possible, too. No more messing with pipelines or importing plugins. You can simply do:

const player = this.add.sprite(x, y, texture);

player.preFX.addGlow(0xff0000, 32);

This will add a 32 pixel red glow around the player Sprite.

Each effect returns a new FX Controller instance, allowing you to easily adjust the special effects in real-time via your own code, tweens and similar:

const fx = container.postFX.addWipe();

this.tweens.add({
    targets: fx,
    progress: 1
});

This will add a Wipe Effect to a Container instance and then tween its progress value from 0 to 1, causing the wipe to play out.

All texture-based Game Objects have access to Pre FX (so that includes Images, Sprites, TileSprites, Text, RenderTexture and Video). However, all Game Objects have access to Post FX, as do cameras. The difference is just when the effect is applied. For a 'pre' effect, it is applied before the Game Object is drawn. For a 'post' effect, it's applied after it has been drawn. All of the same effects are available to both.

this.cameras.main.postFX.addTiltShift();

For example, this will apply a Tilt Shift effect to everything being rendered by the Camera. Which is a much faster way of doing it than applying the same effect to every child in a Scene. You can also apply them to Containers, allowing more fine-grained control over the display.

The full list of new methods are as follows:

Available only to texture-based Game Objects:

• GameObject.preFX an instance of the FX Controller, which allows you to add and remove Pre FX from the Game Object. It features methods such as add, remove and clear. Plus the following:

• GameObject.preFX.addGlow adds a Glow Pre FX effect to the Game Object.

• GameObject.preFX.addShadow adds a Shadow Pre FX effect to the Game Object.

• GameObject.preFX.addPixelate adds a Pixelate Pre FX effect to the Game Object.

• GameObject.preFX.addVignette adds a Vignette Pre FX effect to the Game Object.

• GameObject.preFX.addShine adds a Shine Pre FX effect to the Game Object.

• GameObject.preFX.addBlur adds a Blur Pre FX effect to the Game Object.

• GameObject.preFX.addGradient adds a Gradient Pre FX effect to the Game Object.

• GameObject.preFX.addBloom adds a Bloom Pre FX effect to the Game Object.

• GameObject.preFX.addColorMatrix adds a ColorMatrix Pre FX effect to the Game Object.

• GameObject.preFX.addCircle adds a Circle Pre FX effect to the Game Object.

• GameObject.preFX.addBarrel adds a Barrel Pre FX effect to the Game Object.

• GameObject.preFX.addDisplacement adds a Displacement Pre FX effect to the Game Object.

• GameObject.preFX.addWipe adds a Wipe Pre FX effect to the Game Object.

• GameObject.preFX.addReveal adds a Reveal Pre FX effect to the Game Object.

• GameObject.preFX.addBokeh adds a Bokeh Pre FX effect to the Game Object.

• GameObject.preFX.addTiltShift adds a TiltShift Pre FX effect to the Game Object.

Available to all Game Objects:

• GameObject.clearFX removes both Pre and Post FX from the Game Object.

• GameObject.postFX an instance of the FX Controller, which allows you to add and remove Post FX from the Game Object. It features methods such as add, remove and clear. Plus the following:

• GameObject.postFX.addGlow adds a Glow Post FX effect to the Game Object.

• GameObject.postFX.addShadow adds a Shadow Post FX effect to the Game Object.

• GameObject.postFX.addPixelate adds a Pixelate Post FX effect to the Game Object.

• GameObject.postFX.addVignette adds a Vignette Post FX effect to the Game Object.

• GameObject.postFX.addShine adds a Shine Post FX effect to the Game Object.

• GameObject.postFX.addBlur adds a Blur Post FX effect to the Game Object.

• GameObject.postFX.addGradient adds a Gradient Post FX effect to the Game Object.

• GameObject.postFX.addBloom adds a Bloom Post FX effect to the Game Object.

• GameObject.postFX.addColorMatrix adds a ColorMatrix Post FX effect to the Game Object.

• GameObject.postFX.addCircle adds a Circl...

Phaser v3.60.0 Beta 22

Version 3.60.0 - Miku - in development

New Features - Timeline Class

Phaser 3.60 has a new Timeline Class which allows for fine-grained control of sequenced events. Previously in 3.55 the Timeline was part of the Tween system and it never quite worked as intended. In 3.60 it has been removed from Tweens entirely, replaced with the much more solid and reliable Tween Chains and Timeline has now becomes its own first-class citizen within Phaser. It allows you to sequence any event you like, not just tweens.

A Timeline is a way to schedule events to happen at specific times in the future. You can think of it as an event sequencer for your game, allowing you to schedule the running of callbacks, events and other actions at specific times in the future.

A Timeline is a Scene level system, meaning you can have as many Timelines as you like, each belonging to a different Scene. You can also have multiple Timelines running at the same time.

If the Scene is paused, the Timeline will also pause. If the Scene is destroyed, the Timeline will be automatically destroyed. However, you can control the Timeline directly, pausing, resuming and stopping it at any time.

Create an instance of a Timeline via the Game Object Factory:

const timeline = this.add.timeline();

The Timeline always starts paused. You must call play on it to start it running.

You can also pass in a configuration object on creation, or an array of them:

const timeline = this.add.timeline({
    at: 1000,
    run: () => {
        this.add.sprite(400, 300, 'logo');
    }
});

timeline.play();

In this example we sequence a few different events:

const timeline = this.add.timeline([
    {
        at: 1000,
        run: () => { this.logo = this.add.sprite(400, 300, 'logo'); },
        sound: 'TitleMusic'
    },
    {
        at: 2500,
        tween: {
            targets: this.logo,
            y: 600,
            yoyo: true
        },
        sound: 'Explode'
    },
    {
        at: 8000,
        event: 'HURRY_PLAYER',
        target: this.background,
        set: {
            tint: 0xff0000
        }
    }
]);

timeline.play();

There are lots of options available to you via the configuration object. See the TimelineEventConfig typedef for more details.

New Features - ESM Support

Phaser 3.60 uses the new release of Webpack 5 in order to handle the builds. The configurations have been updated to follow the new format this upgrade introduced. As a bonus, Webpack 5 also bought a new experimental feature called 'output modules', which will take a CommonJS code-base, like Phaser uses and wrap the output in modern ES Module declarations.

We are now using this as part of our build. You will find in the dist folder a new phaser.esm.js file, which is also linked in from our package.json module property. Using this build you can access any of the Phaser modules directly via named imports, meaning you can code like this:

import { AUTO, Scene, Game } from './phaser.esm.js';

class Test extends Scene
{
    constructor ()
    {
        super();
    }

    create ()
    {
        this.add.text(10, 10, 'Welcome to Phaser ESM');
    }
}

const config = {
    type: AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: [ Test ]
};

const game = new Game(config);

Note that we're importing from the local esm bundle. By using this approach you don't need to even use a bundler for quick local prototyping or testing, you can simply import and code directly.

The dist folder still also contains phaser.js which, as before, uses a UMD export.

Because the Webpack feature is experimental we won't make the ESM version the default just yet, but if you're curious and want to explore, please go ahead!

New Features - Built-in Special FX

We have decided to bundle a selection of highly flexible special effect shaders in to Phaser 3.60 and provide access to them via an easy to use set of API calls. The FX included are:

• Barrel - A nice pinch / bulge distortion effect.
• Bloom - Add bloom to any Game Object, with custom offset, blur strength, steps and color.
• Blur - 3 different levels of gaussian blur (low, medium and high) and custom distance and color.
• Bokeh / TiltShift - A bokeh and tiltshift effect, with intensity, contrast and distance settings.
• Circle - Add a circular ring around any Game Object, useful for masking / avatar frames, with custom color, width and background color.
• ColorMatrix - Add a ColorMatrix to any Game Object with access to all of its methods, such as sepia, greyscale, lsd and lots more.
• Displacement - Use a displacement texture, such as a noise texture, to drastically (or subtly!) alter the appearance of a Game Object.
• Glow - Add a smooth inner or outer glow, with custom distance, strength and color.
• Gradient - Draw a gradient between two colors across any Game Object, with optional 'chunky' mode for classic retro style games.
• Pixelate - Make any Game Object appear pixelated, to a varying degree.
• Shadow - Add a drop shadow behind a Game Object, with custom depth and color.
• Shine - Run a 'shine' effect across a Game Object, either additively or as part of a reveal.
• Vignette - Apply a vignette around a Game Object, with custom offset position, radius and color.
• Wipe - Set a Game Object to 'wipe' or 'reveal' with custom line width, direction and axis of the effect.

What's more, the FX can be stacked up. You could add, for example, a Barrel followed by a Blur and then topped-off with a Circle effect. Just by adjusting the ordering you can achieve some incredible and unique effects, very quickly.

We've worked hard to make the API as easy to use as possible, too. No more messing with pipelines or importing plugins. You can simply do:

const player = this.add.sprite(x, y, texture);

player.preFX.addGlow(0xff0000, 32);

This will add a 32 pixel red glow around the player Sprite.

Each effect returns a new FX Controller instance, allowing you to easily adjust the special effects in real-time via your own code, tweens and similar:

const fx = container.postFX.addWipe();

this.tweens.add({
    targets: fx,
    progress: 1
});

This will add a Wipe Effect to a Container instance and then tween its progress value from 0 to 1, causing the wipe to play out.

All texture-based Game Objects have access to Pre FX (so that includes Images, Sprites, TileSprites, Text, RenderTexture and Video). However, all Game Objects have access to Post FX, as do cameras. The difference is just when the effect is applied. For a 'pre' effect, it is applied before the Game Object is drawn. For a 'post' effect, it's applied after it has been drawn. All of the same effects are available to both.

this.cameras.main.postFX.addTiltShift();

For example, this will apply a Tilt Shift effect to everything being rendered by the Camera. Which is a much faster way of doing it than applying the same effect to every child in a Scene. You can also apply them to Containers, allowing more fine-grained control over the display.

The full list of new methods are as follows:

Available only to texture-based Game Objects:

• GameObject.preFX.addGlow adds a Glow Pre FX effect to the Game Object.
• GameObject.preFX.addShadow adds a Shadow Pre FX effect to the Game Object.
• GameObject.preFX.addPixelate adds a Pixelate Pre FX effect to the Game Object.
• GameObject.preFX.addVignette adds a Vignette Pre FX effect to the Game Object.
• GameObject.preFX.addShine adds a Shine Pre FX effect to the Game Object.
• GameObject.preFX.addBlur adds a Blur Pre FX effect to the Game Object.
• GameObject.preFX.addGradient adds a Gradient Pre FX effect to the Game Object.
• GameObject.preFX.addBloom adds a Bloom Pre FX effect to the Game Object.
• GameObject.preFX.addColorMatrix adds a ColorMatrix Pre FX effect to the Game Object.
• GameObject.preFX.addCircle adds a Circle Pre FX effect to the Game Object.
• GameObject.preFX.addBarrel adds a Barrel Pre FX effect to the Game Object.
• GameObject.preFX.addDisplacement adds a Displacement Pre FX effect to the Game Object.
• GameObject.preFX.addWipe adds a Wipe Pre FX effect to the Game Object.
• GameObject.preFX.addReveal adds a Reveal Pre FX effect to the Game Object.
• GameObject.preFX.addBokeh adds a Bokeh Pre FX effect to the Game Object.
• GameObject.preFX.addTiltShift adds a TiltShift Pre FX effect to the Game Object.

Available to all Game Objects:

• GameObject.postFX.addGlow adds a Glow Post FX effect to the Game Object.
• GameObject.postFX.addShadow adds a Shadow Post FX effect to the Game Object.
• GameObject.postFX.addPixelate adds a Pixelate Post FX effect to the Game Object.
• GameObject.postFX.addVignette adds a Vignette Post FX effect to the Game Object.
• GameObject.postFX.addShine adds a Shine Post FX effect to the Game Object.
• GameObject.postFX.addBlur adds a Blur Post FX effect to the Game Object.
• GameObject.postFX.addGradient adds a Gradient Post FX effect to the Game Object.
• GameObject.postFX.addBloom adds a Bloom Post FX effect to the Game Object.
• GameObject.postFX.addColorMatrix adds a ColorMatrix Post FX effect to the Game Object.
• GameObject.postFX.addCircle adds a Circle Post FX effect to the Game Object.
• GameObject.postFX.addBarrel adds a Barrel Post FX effect to the Game Object.
• GameObject.postFX.addDisplacement adds a Displacement Post FX effect to the Game Object.
• GameObject.postFX.addWipe adds a Wipe Post FX effect to the Game Object.
• GameObject.postFX.addReveal adds a Reveal Post FX effect to the Game Object.
• GameObject.postFX.addBokeh adds a Bokeh Post FX effect to the Game Object.
• `GameObject.postFX.ad...

Phaser 3.60.0 Beta 21

Version 3.60.0 - Miku - in development

New Features - ESM Support

Phaser 3.60 uses the new release of Webpack 5 in order to handle the builds. The configurations have been updated to follow the new format this upgrade introduced. As a bonus, Webpack 5 also bought a new experimental feature called 'output modules', which will take a CommonJS code-base, like Phaser uses and wrap the output in modern ES Module declarations.

We are now using this as part of our build. You will find in the dist folder a new phaser.esm.js file, which is also linked in from our package.json module property. Using this build you can access any of the Phaser modules directly via named imports, meaning you can code like this:

import { AUTO, Scene, Game } from './phaser.esm.js';

class Test extends Scene
{
    constructor ()
    {
        super();
    }

    create ()
    {
        this.add.text(10, 10, 'Welcome to Phaser ESM');
    }
}

const config = {
    type: AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: [ Test ]
};

const game = new Game(config);

Note that we're importing from the local esm bundle. By using this approach you don't need to even use a bundler for quick local prototyping or testing, you can simply import and code directly.

The dist folder still also contains phaser.js which, as before, uses a UMD export.

Because the Webpack feature is experimental we won't make the ESM version the default just yet, but if you're curious and want to explore, please go ahead!

New Features - Built-in Special FX

We have decided to bundle a selection of highly flexible special effect shaders in to Phaser 3.60 and provide access to them via an easy to use set of API calls. The FX included are:

• Barrel - A nice pinch / bulge distortion effect.
• Bloom - Add bloom to any Game Object, with custom offset, blur strength, steps and color.
• Blur - 3 different levels of gaussian blur (low, medium and high) and custom distance and color.
• Bokeh / TiltShift - A bokeh and tiltshift effect, with intensity, contrast and distance settings.
• Circle - Add a circular ring around any Game Object, useful for masking / avatar frames, with custom color, width and background color.
• ColorMatrix - Add a ColorMatrix to any Game Object with access to all of its methods, such as sepia, greyscale, lsd and lots more.
• Displacement - Use a displacement texture, such as a noise texture, to drastically (or subtly!) alter the appearance of a Game Object.
• Glow - Add a smooth inner or outer glow, with custom distance, strength and color.
• Gradient - Draw a gradient between two colors across any Game Object, with optional 'chunky' mode for classic retro style games.
• Pixelate - Make any Game Object appear pixelated, to a varying degree.
• Shadow - Add a drop shadow behind a Game Object, with custom depth and color.
• Shine - Run a 'shine' effect across a Game Object, either additively or as part of a reveal.
• Vignette - Apply a vignette around a Game Object, with custom offset position, radius and color.
• Wipe - Set a Game Object to 'wipe' or 'reveal' with custom line width, direction and axis of the effect.

What's more, the FX can be stacked up. You could add, for example, a Barrel followed by a Blur and then topped-off with a Circle effect. Just by adjusting the ordering you can achieve some incredible and unique effects, very quickly.

We've worked hard to make the API as easy to use as possible, too. No more messing with pipelines or importing plugins. You can simply do:

const player = this.add.sprite(x, y, texture);

player.preFX.addGlow(0xff0000, 32);

This will add a 32 pixel red glow around the player Sprite.

Each effect returns a new FX Controller instance, allowing you to easily adjust the special effects in real-time via your own code, tweens and similar:

const fx = container.postFX.addWipe();

this.tweens.add({
    targets: fx,
    progress: 1
});

This will add a Wipe Effect to a Container instance and then tween its progress value from 0 to 1, causing the wipe to play out.

All texture-based Game Objects have access to Pre FX (so that includes Images, Sprites, TileSprites, Text, RenderTexture and Video). However, all Game Objects have access to Post FX, as do cameras. The difference is just when the effect is applied. For a 'pre' effect, it is applied before the Game Object is drawn. For a 'post' effect, it's applied after it has been drawn. All of the same effects are available to both.

this.cameras.main.postFX.addTiltShift();

For example, this will apply a Tilt Shift effect to everything being rendered by the Camera. Which is a much faster way of doing it than applying the same effect to every child in a Scene. You can also apply them to Containers, allowing more fine-grained control over the display.

The full list of new methods are as follows:

Available only to texture-based Game Objects:

• GameObject.preFX.addGlow adds a Glow Pre FX effect to the Game Object.
• GameObject.preFX.addShadow adds a Shadow Pre FX effect to the Game Object.
• GameObject.preFX.addPixelate adds a Pixelate Pre FX effect to the Game Object.
• GameObject.preFX.addVignette adds a Vignette Pre FX effect to the Game Object.
• GameObject.preFX.addShine adds a Shine Pre FX effect to the Game Object.
• GameObject.preFX.addBlur adds a Blur Pre FX effect to the Game Object.
• GameObject.preFX.addGradient adds a Gradient Pre FX effect to the Game Object.
• GameObject.preFX.addBloom adds a Bloom Pre FX effect to the Game Object.
• GameObject.preFX.addColorMatrix adds a ColorMatrix Pre FX effect to the Game Object.
• GameObject.preFX.addCircle adds a Circle Pre FX effect to the Game Object.
• GameObject.preFX.addBarrel adds a Barrel Pre FX effect to the Game Object.
• GameObject.preFX.addDisplacement adds a Displacement Pre FX effect to the Game Object.
• GameObject.preFX.addWipe adds a Wipe Pre FX effect to the Game Object.
• GameObject.preFX.addReveal adds a Reveal Pre FX effect to the Game Object.
• GameObject.preFX.addBokeh adds a Bokeh Pre FX effect to the Game Object.
• GameObject.preFX.addTiltShift adds a TiltShift Pre FX effect to the Game Object.

Available to all Game Objects:

• GameObject.postFX.addGlow adds a Glow Post FX effect to the Game Object.
• GameObject.postFX.addShadow adds a Shadow Post FX effect to the Game Object.
• GameObject.postFX.addPixelate adds a Pixelate Post FX effect to the Game Object.
• GameObject.postFX.addVignette adds a Vignette Post FX effect to the Game Object.
• GameObject.postFX.addShine adds a Shine Post FX effect to the Game Object.
• GameObject.postFX.addBlur adds a Blur Post FX effect to the Game Object.
• GameObject.postFX.addGradient adds a Gradient Post FX effect to the Game Object.
• GameObject.postFX.addBloom adds a Bloom Post FX effect to the Game Object.
• GameObject.postFX.addColorMatrix adds a ColorMatrix Post FX effect to the Game Object.
• GameObject.postFX.addCircle adds a Circle Post FX effect to the Game Object.
• GameObject.postFX.addBarrel adds a Barrel Post FX effect to the Game Object.
• GameObject.postFX.addDisplacement adds a Displacement Post FX effect to the Game Object.
• GameObject.postFX.addWipe adds a Wipe Post FX effect to the Game Object.
• GameObject.postFX.addReveal adds a Reveal Post FX effect to the Game Object.
• GameObject.postFX.addBokeh adds a Bokeh Post FX effect to the Game Object.
• GameObject.postFX.addTiltShift adds a TiltShift Post FX effect to the Game Object.

New Features - Spatial Sound

Thanks to a contribution from @alxwest the Web Audio Sound system now supports spatial sound.

TODO - List all of the new properties and methods!

New Features - Spine 4 Support

Thanks to a contribution from @justintien we now have a Spine 4 Plugin available.

You can find it in the plugins/spine4.1 folder in the main repository. There are also a bunch of new npm scripts to help build this plugin:

npm run plugin.spine4.1.full.dist - To build new dist files for both canvas and WebGL.
npm run plugin.spine4.1.dist - To build new dist files.
npm run plugin.spine4.1.watch - To enter watch mode when doing dev work on the plugin.
npm run plugin.spine4.1.runtimes - To build new versions of the Spine 4 runtimes.

The core plugin API remains largely the same. You can find lots of updated examples in the Phaser 3 Examples repo in the 3.60/spine4.1 folder.

We will maintain both the Spine 3 and 4 plugins for the forseeable future.

Additional Spine 3 Bug Fixes

• Using drawDebug on a Spine Game Object to view its skeleton would cause the next object in the display list to be skipped for rendering, if it wasn't a Spine Game Object too. This is because the Spine 3 skeleton debug draw ends the spine batch but the Scene Renderer wasn't rebound. Fix #6380 (thanks @spayton)
• The Spine Plugin add and make functions didn't clear and rebind the WebGL pipeline. This could cause two different visual issues: The first is that a Phaser Game Object (such as a Sprite) could be seen to change its texture to display the Spine atlas texture instead for a single frame, and then on the next pass revert back to normal again. The second issue is that if the Spine skeleton wasn't added to the display list, but just created (via addToScene: false) then the Sprite would take on the texture frame entirely from that point on. Fix #6362 (thanks @frissonlabs)
• Previously, it wasn't possible for multiple Spine Atlases to use PNGs with the exact same filename, even if they were in different folders. The SpineFile loader has now been updated so that the always-unique Spine key is pre-pended to the filename, for example if the key was bonus and the PNG in the at...

Phaser 3.60.0 Beta 20

Version 3.60.0 - Miku - in development

New Features - Built-in Special FX

We have decided to bundle a selection of highly flexible special effect shaders in to Phaser 3.60 and provide access to them via an easy to use set of API calls. The FX included are:

• Barrel - A nice pinch / bulge distortion effect.
• Bloom - Add bloom to any Game Object, with custom offset, blur strength, steps and color.
• Blur - 3 different levels of gaussian blur (low, medium and high) and custom distance and color.
• Bokeh / TiltShift - A bokeh and tiltshift effect, with intensity, contrast and distance settings.
• Circle - Add a circular ring around any Game Object, useful for masking / avatar frames, with custom color, width and background color.
• ColorMatrix - Add a ColorMatrix to any Game Object with access to all of its methods, such as sepia, greyscale, lsd and lots more.
• Displacement - Use a displacement texture, such as a noise texture, to drastically (or subtly!) alter the appearance of a Game Object.
• Glow - Add a smooth inner or outer glow, with custom distance, strength and color.
• Gradient - Draw a gradient between two colors across any Game Object, with optional 'chunky' mode for classic retro style games.
• Pixelate - Make any Game Object appear pixelated, to a varying degree.
• Shadow - Add a drop shadow behind a Game Object, with custom depth and color.
• Shine - Run a 'shine' effect across a Game Object, either additively or as part of a reveal.
• Vignette - Apply a vignette around a Game Object, with custom offset position, radius and color.
• Wipe - Set a Game Object to 'wipe' or 'reveal' with custom line width, direction and axis of the effect.

What's more, the FX can be stacked up. You could add, for example, a Barrel followed by a Blur and then topped-off with a Circle effect. Just by adjusting the ordering you can achieve some incredible and unique effects, very quickly.

We've worked hard to make the API as easy to use as possible, too. No more messing with pipelines or importing plugins. You can simply do:

const player = this.add.sprite(x, y, texture);

player.preFX.addGlow(0xff0000, 32);

This will add a 32 pixel red glow around the player Sprite.

Each effect returns a new FX Controller instance, allowing you to easily adjust the special effects in real-time via your own code, tweens and similar:

const fx = container.postFX.addWipe();

this.tweens.add({
    targets: fx,
    progress: 1
});

This will add a Wipe Effect to a Container instance and then tween its progress value from 0 to 1, causing the wipe to play out.

All texture-based Game Objects have access to Pre FX (so that includes Images, Sprites, TileSprites, Text, RenderTexture and Video). However, all Game Objects have access to Post FX, as do cameras. The difference is just when the effect is applied. For a 'pre' effect, it is applied before the Game Object is drawn. For a 'post' effect, it's applied after it has been drawn. All of the same effects are available to both.

this.cameras.main.postFX.addTiltShift();

For example, this will apply a Tilt Shift effect to everything being rendered by the Camera. Which is a much faster way of doing it than applying the same effect to every child in a Scene. You can also apply them to Containers, allowing more fine-grained control over the display.

The full list of new methods are as follows:

Available only to texture-based Game Objects:

• GameObject.preFX.addGlow adds a Glow Pre FX effect to the Game Object.
• GameObject.preFX.addShadow adds a Shadow Pre FX effect to the Game Object.
• GameObject.preFX.addPixelate adds a Pixelate Pre FX effect to the Game Object.
• GameObject.preFX.addVignette adds a Vignette Pre FX effect to the Game Object.
• GameObject.preFX.addShine adds a Shine Pre FX effect to the Game Object.
• GameObject.preFX.addBlur adds a Blur Pre FX effect to the Game Object.
• GameObject.preFX.addGradient adds a Gradient Pre FX effect to the Game Object.
• GameObject.preFX.addBloom adds a Bloom Pre FX effect to the Game Object.
• GameObject.preFX.addColorMatrix adds a ColorMatrix Pre FX effect to the Game Object.
• GameObject.preFX.addCircle adds a Circle Pre FX effect to the Game Object.
• GameObject.preFX.addBarrel adds a Barrel Pre FX effect to the Game Object.
• GameObject.preFX.addDisplacement adds a Displacement Pre FX effect to the Game Object.
• GameObject.preFX.addWipe adds a Wipe Pre FX effect to the Game Object.
• GameObject.preFX.addReveal adds a Reveal Pre FX effect to the Game Object.
• GameObject.preFX.addBokeh adds a Bokeh Pre FX effect to the Game Object.
• GameObject.preFX.addTiltShift adds a TiltShift Pre FX effect to the Game Object.

Available to all Game Objects:

• GameObject.postFX.addGlow adds a Glow Post FX effect to the Game Object.
• GameObject.postFX.addShadow adds a Shadow Post FX effect to the Game Object.
• GameObject.postFX.addPixelate adds a Pixelate Post FX effect to the Game Object.
• GameObject.postFX.addVignette adds a Vignette Post FX effect to the Game Object.
• GameObject.postFX.addShine adds a Shine Post FX effect to the Game Object.
• GameObject.postFX.addBlur adds a Blur Post FX effect to the Game Object.
• GameObject.postFX.addGradient adds a Gradient Post FX effect to the Game Object.
• GameObject.postFX.addBloom adds a Bloom Post FX effect to the Game Object.
• GameObject.postFX.addColorMatrix adds a ColorMatrix Post FX effect to the Game Object.
• GameObject.postFX.addCircle adds a Circle Post FX effect to the Game Object.
• GameObject.postFX.addBarrel adds a Barrel Post FX effect to the Game Object.
• GameObject.postFX.addDisplacement adds a Displacement Post FX effect to the Game Object.
• GameObject.postFX.addWipe adds a Wipe Post FX effect to the Game Object.
• GameObject.postFX.addReveal adds a Reveal Post FX effect to the Game Object.
• GameObject.postFX.addBokeh adds a Bokeh Post FX effect to the Game Object.
• GameObject.postFX.addTiltShift adds a TiltShift Post FX effect to the Game Object.

New Features - Spatial Sound

Thanks to a contribution from @alxwest the Web Audio Sound system now supports spatial sound.

TODO - List all of the new properties and methods!

New Features - Spine 4 Support

Thanks to a contribution from @justintien we now have a Spine 4 Plugin available.

You can find it in the plugins/spine4.1 folder in the main repository. There are also a bunch of new npm scripts to help build this plugin:

npm run plugin.spine4.1.full.dist - To build new dist files for both canvas and WebGL.
npm run plugin.spine4.1.dist - To build new dist files.
npm run plugin.spine4.1.watch - To enter watch mode when doing dev work on the plugin.
npm run plugin.spine4.1.runtimes - To build new versions of the Spine 4 runtimes.

The core plugin API remains largely the same. You can find lots of updated examples in the Phaser 3 Examples repo in the 3.60/spine4.1 folder.

We will maintain both the Spine 3 and 4 plugins for the forseeable future.

Additional Spine 3 Bug Fixes

• Using drawDebug on a Spine Game Object to view its skeleton would cause the next object in the display list to be skipped for rendering, if it wasn't a Spine Game Object too. This is because the Spine 3 skeleton debug draw ends the spine batch but the Scene Renderer wasn't rebound. Fix #6380 (thanks @spayton)
• The Spine Plugin add and make functions didn't clear and rebind the WebGL pipeline. This could cause two different visual issues: The first is that a Phaser Game Object (such as a Sprite) could be seen to change its texture to display the Spine atlas texture instead for a single frame, and then on the next pass revert back to normal again. The second issue is that if the Spine skeleton wasn't added to the display list, but just created (via addToScene: false) then the Sprite would take on the texture frame entirely from that point on. Fix #6362 (thanks @frissonlabs)
• Previously, it wasn't possible for multiple Spine Atlases to use PNGs with the exact same filename, even if they were in different folders. The SpineFile loader has now been updated so that the always-unique Spine key is pre-pended to the filename, for example if the key was bonus and the PNG in the atlas was coin.png then the final key (as stored in the Texture Manager) is now bonus:coin.png. The SpinePlugin.getAtlasCanvas and getAtlasWebGL methods have been updated to reflect this change. Fix #6022 (thanks @orjandh)
• If a SpineContainer had a mask applied to it and the next immediate item on the display list was another Spine object (outside of the Container) then it would fail to rebind the WebGL pipeline, causing the mask to break. It will now rebind the renderer at the end of the SpineContainer batch, no matter what, if it has a mask. Fix #5627 (thanks @FloodGames)

New Features - Plane Game Object

Phaser v3.60 contains a new native Plane Game Object. The Plane Game Object is a helper class that takes the Mesh Game Object and extends it, allowing for fast and easy creation of Planes. A Plane is a one-sided grid of cells, where you specify the number of cells in each dimension. The Plane can have a texture that is either repeated (tiled) across each cell, or applied to the full Plane.

The Plane can then be manipulated in 3D space, with rotation across all 3 axis.

This allows you to create effects not possible with regular Sprites, such as perspective distortion. You can also adjust the vertices on a per-vertex basis. Plane data becomes part of the WebGL batch, just like standard Sprites, so doesn't introduce any additional shader overhead. Because the Plane just generates vertices into the WebGL batch, like any other Sprite, you can use all of the common Game Object components o...

Phaser 3.60 Beta 19

Version 3.60.0 - Miku - in development

New Features - Built-in Special FX

We have decided to bundle a selection of highly flexible special effect shaders in to Phaser 3.60 and provide access to them via an easy to use set of API calls. The FX included are:

• Barrel - A nice pinch / bulge distortion effect.
• Bloom - Add bloom to any Game Object, with custom offset, blur strength, steps and color.
• Blur - 3 different levels of gaussian blur (low, medium and high) and custom distance and color.
• Bokeh / TiltShift - A bokeh and tiltshift effect, with intensity, contrast and distance settings.
• Circle - Add a circular ring around any Game Object, useful for masking / avatar frames, with custom color, width and background color.
• ColorMatrix - Add a ColorMatrix to any Game Object with access to all of its methods, such as sepia, greyscale, lsd and lots more.
• Displacement - Use a displacement texture, such as a noise texture, to drastically (or subtly!) alter the appearance of a Game Object.
• Glow - Add a smooth inner or outer glow, with custom distance, strength and color.
• Gradient - Draw a gradient between two colors across any Game Object, with optional 'chunky' mode for classic retro style games.
• Pixelate - Make any Game Object appear pixelated, to a varying degree.
• Shadow - Add a drop shadow behind a Game Object, with custom depth and color.
• Shine - Run a 'shine' effect across a Game Object, either additively or as part of a reveal.
• Vignette - Apply a vignette around a Game Object, with custom offset position, radius and color.
• Wipe - Set a Game Object to 'wipe' or 'reveal' with custom line width, direction and axis of the effect.

What's more, the FX can be stacked up. You could add, for example, a Barrel followed by a Blur and then topped-off with a Circle effect. Just by adjusting the ordering you can achieve some incredible and unique effects, very quickly.

We've worked hard to make the API as easy to use as possible, too. No more messing with pipelines or importing plugins. You can simply do:

const player = this.add.sprite(x, y, texture);

player.preFX.addGlow(0xff0000, 32);

This will add a 32 pixel red glow around the player Sprite.

Each effect returns a new FX Controller instance, allowing you to easily adjust the special effects in real-time via your own code, tweens and similar:

const fx = container.postFX.addWipe();

this.tweens.add({
    targets: fx,
    progress: 1
});

This will add a Wipe Effect to a Container instance and then tween its progress value from 0 to 1, causing the wipe to play out.

All texture-based Game Objects have access to Pre FX (so that includes Images, Sprites, TileSprites, Text, RenderTexture and Video). However, all Game Objects have access to Post FX, as do cameras. The difference is just when the effect is applied. For a 'pre' effect, it is applied before the Game Object is drawn. For a 'post' effect, it's applied after it has been drawn. All of the same effects are available to both.

this.cameras.main.postFX.addTiltShift();

For example, this will apply a Tilt Shift effect to everything being rendered by the Camera. Which is a much faster way of doing it than applying the same effect to every child in a Scene. You can also apply them to Containers, allowing more fine-grained control over the display.

The full list of new methods are as follows:

Available only to texture-based Game Objects:

• GameObject.preFX.addGlow adds a Glow Pre FX effect to the Game Object.
• GameObject.preFX.addShadow adds a Shadow Pre FX effect to the Game Object.
• GameObject.preFX.addPixelate adds a Pixelate Pre FX effect to the Game Object.
• GameObject.preFX.addVignette adds a Vignette Pre FX effect to the Game Object.
• GameObject.preFX.addShine adds a Shine Pre FX effect to the Game Object.
• GameObject.preFX.addBlur adds a Blur Pre FX effect to the Game Object.
• GameObject.preFX.addGradient adds a Gradient Pre FX effect to the Game Object.
• GameObject.preFX.addBloom adds a Bloom Pre FX effect to the Game Object.
• GameObject.preFX.addColorMatrix adds a ColorMatrix Pre FX effect to the Game Object.
• GameObject.preFX.addCircle adds a Circle Pre FX effect to the Game Object.
• GameObject.preFX.addBarrel adds a Barrel Pre FX effect to the Game Object.
• GameObject.preFX.addDisplacement adds a Displacement Pre FX effect to the Game Object.
• GameObject.preFX.addWipe adds a Wipe Pre FX effect to the Game Object.
• GameObject.preFX.addReveal adds a Reveal Pre FX effect to the Game Object.
• GameObject.preFX.addBokeh adds a Bokeh Pre FX effect to the Game Object.
• GameObject.preFX.addTiltShift adds a TiltShift Pre FX effect to the Game Object.

Available to all Game Objects:

• GameObject.postFX.addGlow adds a Glow Post FX effect to the Game Object.
• GameObject.postFX.addShadow adds a Shadow Post FX effect to the Game Object.
• GameObject.postFX.addPixelate adds a Pixelate Post FX effect to the Game Object.
• GameObject.postFX.addVignette adds a Vignette Post FX effect to the Game Object.
• GameObject.postFX.addShine adds a Shine Post FX effect to the Game Object.
• GameObject.postFX.addBlur adds a Blur Post FX effect to the Game Object.
• GameObject.postFX.addGradient adds a Gradient Post FX effect to the Game Object.
• GameObject.postFX.addBloom adds a Bloom Post FX effect to the Game Object.
• GameObject.postFX.addColorMatrix adds a ColorMatrix Post FX effect to the Game Object.
• GameObject.postFX.addCircle adds a Circle Post FX effect to the Game Object.
• GameObject.postFX.addBarrel adds a Barrel Post FX effect to the Game Object.
• GameObject.postFX.addDisplacement adds a Displacement Post FX effect to the Game Object.
• GameObject.postFX.addWipe adds a Wipe Post FX effect to the Game Object.
• GameObject.postFX.addReveal adds a Reveal Post FX effect to the Game Object.
• GameObject.postFX.addBokeh adds a Bokeh Post FX effect to the Game Object.
• GameObject.postFX.addTiltShift adds a TiltShift Post FX effect to the Game Object.

New Features - Spatial Sound

Thanks to a contribution from @alxwest the Web Audio Sound system now supports spatial sound.

TODO - List all of the new properties and methods!

New Features - Spine 4 Support

Thanks to a contribution from @justintien we now have a Spine 4 Plugin available.

You can find it in the plugins/spine4.1 folder in the main repository. There are also a bunch of new npm scripts to help build this plugin:

npm run plugin.spine4.1.full.dist - To build new dist files for both canvas and WebGL.
npm run plugin.spine4.1.dist - To build new dist files.
npm run plugin.spine4.1.watch - To enter watch mode when doing dev work on the plugin.
npm run plugin.spine4.1.runtimes - To build new versions of the Spine 4 runtimes.

The core plugin API remains largely the same. You can find lots of updated examples in the Phaser 3 Examples repo in the 3.60/spine4.1 folder.

We will maintain both the Spine 3 and 4 plugins for the forseeable future.

Additional Spine 3 Bug Fixes

• Using drawDebug on a Spine Game Object to view its skeleton would cause the next object in the display list to be skipped for rendering, if it wasn't a Spine Game Object too. This is because the Spine 3 skeleton debug draw ends the spine batch but the Scene Renderer wasn't rebound. Fix #6380 (thanks @spayton)
• The Spine Plugin add and make functions didn't clear and rebind the WebGL pipeline. This could cause two different visual issues: The first is that a Phaser Game Object (such as a Sprite) could be seen to change its texture to display the Spine atlas texture instead for a single frame, and then on the next pass revert back to normal again. The second issue is that if the Spine skeleton wasn't added to the display list, but just created (via addToScene: false) then the Sprite would take on the texture frame entirely from that point on. Fix #6362 (thanks @frissonlabs)
• Previously, it wasn't possible for multiple Spine Atlases to use PNGs with the exact same filename, even if they were in different folders. The SpineFile loader has now been updated so that the always-unique Spine key is pre-pended to the filename, for example if the key was bonus and the PNG in the atlas was coin.png then the final key (as stored in the Texture Manager) is now bonus:coin.png. The SpinePlugin.getAtlasCanvas and getAtlasWebGL methods have been updated to reflect this change. Fix #6022 (thanks @orjandh)
• If a SpineContainer had a mask applied to it and the next immediate item on the display list was another Spine object (outside of the Container) then it would fail to rebind the WebGL pipeline, causing the mask to break. It will now rebind the renderer at the end of the SpineContainer batch, no matter what, if it has a mask. Fix #5627 (thanks @FloodGames)

New Features - Plane Game Object

Phaser v3.60 contains a new native Plane Game Object. The Plane Game Object is a helper class that takes the Mesh Game Object and extends it, allowing for fast and easy creation of Planes. A Plane is a one-sided grid of cells, where you specify the number of cells in each dimension. The Plane can have a texture that is either repeated (tiled) across each cell, or applied to the full Plane.

The Plane can then be manipulated in 3D space, with rotation across all 3 axis.

This allows you to create effects not possible with regular Sprites, such as perspective distortion. You can also adjust the vertices on a per-vertex basis. Plane data becomes part of the WebGL batch, just like standard Sprites, so doesn't introduce any additional shader overhead. Because the Plane just generates vertices into the WebGL batch, like any other Sprite, you can use all of the common Game Object components o...