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...

Phaser 3.60 Beta 18

Version 3.60.0 - Miku - in development

New Features - Nine Slice Game Object

Phaser 3.60 contains a new native Nine Slice Game Object. A Nine Slice Game Object allows you to display a texture-based object that can be stretched both horizontally and vertically, but that retains fixed-sized corners. The dimensions of the corners are set via the parameters to the class. When you resize a Nine Slice Game Object only the middle sections of the texture stretch. This is extremely useful for UI and button-like elements, where you need them to expand to accommodate the content without distorting the texture.

The texture you provide for this Game Object should be based on the following layout structure:

    A                          B
  +---+----------------------+---+
C | 1 |          2           | 3 |
  +---+----------------------+---+
  |   |                      |   |
  | 4 |          5           | 6 |
  |   |                      |   |
  +---+----------------------+---+
D | 7 |          8           | 9 |
  +---+----------------------+---+

When changing this objects width and / or height:

areas 1, 3, 7 and 9 (the corners) will remain unscaled
areas 2 and 8 will be stretched horizontally only
areas 4 and 6 will be stretched vertically only
area 5 will be stretched both horizontally and vertically

You can also create a 3 slice Game Object:

This works in a similar way, except you can only stretch it horizontally. Therefore, it requires less configuration:

    A                          B
  +---+----------------------+---+
  |   |                      |   |
C | 1 |          2           | 3 |
  |   |                      |   |
  +---+----------------------+---+

When changing this objects width (you cannot change its height)

areas 1 and 3 will remain unscaled
area 2 will be stretched horizontally

The above configuration concept is adapted from the Pixi NineSlicePlane.

To specify a 3 slice object instead of a 9 slice you should only provide the leftWidth and rightWidth parameters. To create a 9 slice
you must supply all parameters.

The minimum width this Game Object can be is the total of leftWidth + rightWidth. The minimum height this Game Object
can be is the total of topHeight + bottomHeight. If you need to display this object at a smaller size, you can scale it.

In terms of performance, using a 3 slice Game Object is the equivalent of having 3 Sprites in a row. Using a 9 slice Game Object is the equivalent
of having 9 Sprites in a row. The vertices of this object are all batched together and can co-exist with other Sprites and graphics on the display
list, without incurring any additional overhead.

As of Phaser 3.60 this Game Object is WebGL only. Please see the new examples and documentation for how to use it.

New Features - Sprite FX

• When defining the renderTargets in a WebGL Pipeline config, you can now set optional width and height properties, which will create a Render Target of that exact size, ignoring the scale value (if also given).
• WebGLPipeline.isSpriteFX is a new boolean property that defines if the pipeline is a Sprite FX Pipeline, or not. The default is false.
• GameObjects.Components.FX is a new component that provides access to FX specific properties and methods. The Image and Sprite Game Objects have this component by default.
• fxPadding and its related method setFXPadding allow you to set extra padding to be added to the texture the Game Object renders with. This is especially useful for Sprite FX shaders that modify the sprite beyond its bounds, such as glow or shadow effects.
• The WebGLPipeline.setShader method has a new optional parameter buffer that allows you to set the vertex buffer to be bound before the shader is activated.
• The WebGLPipeline.setVertexBuffer method has a new optional parameter buffer that allows you to set the vertex buffer to be bound if you don't want to bind the default one.
• The WebGLRenderer.createTextureFromSource method has a new optional boolean parameter forceClamp that will for the clamp wrapping mode even if the texture is a power-of-two.
• RenderTarget will now automatically set the wrapping mode to clamp.
• WebGLPipeline.flipProjectionMatrix is a new method that allows you to flip the y and bottom projection matrix values via a parameter.
• PipelineManager.renderTargets is a new property that holds an array of RenderTarget objects that all SpriteFX pipelines can share, to keep texture memory as low as possible.
• PipelineManager.maxDimension is a new property that holds the largest possible target dimension.
• PipelineManager.frameInc is a new property that holds the amount the RenderTargets will increase in size in each iteration. The default value is 32, meaning it will create targets of size 32, 64, 96, etc. You can control this via the pipeline config object.
• PipelineManager.targetIndex is a new property that holds the internal target array offset index. Treat it as read-only.
• The Pipeline Manager will now create a bunch of RenderTarget objects during its boot method. These are sized incrementally from 32px and up (use the frameInc value to alter this). These targets are shared by all Sprite FX Pipelines.
• PipelineManager.getRenderTarget is a new method that will return the a RenderTarget that best fits the dimensions given. This is typically called by Sprite FX Pipelines, rather than directly.
• PipelineManager.getSwapRenderTarget is a new method that will return a 'swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.
• PipelineManager.getAltSwapRenderTarget is a new method that will return a 'alternative swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.

New Features - Compressed Texture Support

Phaser 3.60 contains support for Compressed Textures. It can parse both KTX and PVR containers and within those has support for the following formats: ETC, ETC1, ATC, ASTC, BPTC, RGTC, PVRTC, S3TC and S3TCSRB. Compressed Textures differ from normal textures in that their structure is optimized for fast GPU data reads and lower memory consumption. Popular tools that can create compressed textures include PVRTexTool, ASTC Encoder and Texture Packer.

Compressed Textures are loaded using the new this.load.texture method, which takes a texture configuration object that maps the formats to the files. The browser will then download the first file in the object that it knows it can support. You can also provide Texture Atlas JSON data, or Multi Atlas JSON data, too, so you can use compressed texture atlases. Currently, Texture Packer is the best tool for creating these type of files.

• TextureSoure.compressionAlgorithm is now populated with the compression format used by the texture.
• Types.Textures.CompressedTextureData is the new compressed texture configuration object type.
• TextureManager.addCompressedTexture is a new method that will add a compressed texture, and optionally atlas data into the Texture Manager and return a Texture object than any Sprite can use.
• Textures.Parsers.KTXParser is a new parser for the KTX compression container format.
• Textures.Parsers.PVRParser is a new parser for the PVR compression container format.
• The WebGLRenderer.compression property now holds a more in-depth object containing supported compression formats.
• The WebGLRenderer.createTextureFromSource method now accepts the CompressedTextureData data objects and creates WebGL textures from them.
• WebGLRenderer.getCompressedTextures is a new method that will populate the WebGLRenderer.compression object and return its value. This is called automatically when the renderer boots.
• WebGLRenderer.getCompressedTextureName is a new method that will return a compressed texture format GLenum based on the given format.

New Features - Updated Particle System

The Particle system has been mostly rewritten to give it a much needed overhaul. This makes the API cleaner, the Game Objects a lot more memory efficient and also introduces several great new features. In order to do this, we had to make some breaking changes. The largest being the way in which particles are now created.

Previously when you used the this.add.particles command it would create a ParticleEmitterManager instance. You would then use this to create an Emitter, which would actually emit the particles. While this worked and did allow a Manager to control multiple emitters we found that in discussion developers seldom used this feature and it was common for a Manager to own just one single Emitter.

In order to streamline memory and the display list we have removed the ParticleEmitterManager entirely. When you call this.add.particles you're now creating a ParticleEmitter instance, which is being added directly to the display list and can be manipulated just like any other Game Object, i.e. scaled, rotated, positioned, added to a Container, etc. It now extends the GameObject base class, meaning it's also an event emitter, which allowed us to create some handy new events for particles.

So, to create an emitter, you now give it an xy coordinate, a texture and an emitter configuration object (you can also set this later, but most commonly you'd do it on creation). I.e.:

const emitter = this.add.particles(100, 300, 'flares', {
    frame: 'red',
    angle: { min: -30, max: 30 },
    speed: 150
});

This will create a 'red flare' emitter at 100 x 300.

Prior to 3.60 it would have looked like:

const manager = this.add.particles('flares');

const emitter = manager.createEmitter({
    x: 100,
    y: 300,
    frame: 'r...

Phaser 3.60 Beta 17

Version 3.60.0 - Miku - in development

New Features - Nine Slice Game Object

Phaser 3.60 contains a new native Nine Slice Game Object. A Nine Slice Game Object allows you to display a texture-based object that can be stretched both horizontally and vertically, but that retains fixed-sized corners. The dimensions of the corners are set via the parameters to the class. When you resize a Nine Slice Game Object only the middle sections of the texture stretch. This is extremely useful for UI and button-like elements, where you need them to expand to accomodate the content without distorting the texture.

The texture you provide for this Game Object should be based on the following layout structure:

    A                          B
  +---+----------------------+---+
C | 1 |          2           | 3 |
  +---+----------------------+---+
  |   |                      |   |
  | 4 |          5           | 6 |
  |   |                      |   |
  +---+----------------------+---+
D | 7 |          8           | 9 |
  +---+----------------------+---+

When changing this objects width and / or height:

areas 1, 3, 7 and 9 (the corners) will remain unscaled
areas 2 and 8 will be stretched horizontally only
areas 4 and 6 will be stretched vertically only
area 5 will be stretched both horizontally and vertically

You can also create a 3 slice Game Object:

This works in a similar way, except you can only stretch it horizontally. Therefore, it requires less configuration:

    A                          B
  +---+----------------------+---+
  |   |                      |   |
C | 1 |          2           | 3 |
  |   |                      |   |
  +---+----------------------+---+

When changing this objects width (you cannot change its height)

areas 1 and 3 will remain unscaled
area 2 will be stretched horizontally

The above configuration concept is adapted from the Pixi NineSlicePlane.

To specify a 3 slice object instead of a 9 slice you should only provide the leftWidth and rightWidth parameters. To create a 9 slice
you must supply all parameters.

The minimum width this Game Object can be is the total of leftWidth + rightWidth. The minimum height this Game Object
can be is the total of topHeight + bottomHeight. If you need to display this object at a smaller size, you can scale it.

In terms of performance, using a 3 slice Game Object is the equivalent of having 3 Sprites in a row. Using a 9 slice Game Object is the equivalent
of having 9 Sprites in a row. The vertices of this object are all batched together and can co-exist with other Sprites and graphics on the display
list, without incurring any additional overhead.

As of Phaser 3.60 this Game Object is WebGL only. Please see the new examples and documentation for how to use it.

New Features - Sprite FX

• When defining the renderTargets in a WebGL Pipeline config, you can now set optional width and height properties, which will create a Render Target of that exact size, ignoring the scale value (if also given).
• WebGLPipeline.isSpriteFX is a new boolean property that defines if the pipeline is a Sprite FX Pipeline, or not. The default is false.
• GameObjects.Components.FX is a new component that provides access to FX specific properties and methods. The Image and Sprite Game Objects have this component by default.
• fxPadding and its related method setFXPadding allow you to set extra padding to be added to the texture the Game Object renders with. This is especially useful for Sprite FX shaders that modify the sprite beyond its bounds, such as glow or shadow effects.
• The WebGLPipeline.setShader method has a new optional parameter buffer that allows you to set the vertex buffer to be bound before the shader is activated.
• The WebGLPipeline.setVertexBuffer method has a new optional parameter buffer that allows you to set the vertex buffer to be bound if you don't want to bind the default one.
• The WebGLRenderer.createTextureFromSource method has a new optional boolean parameter forceClamp that will for the clamp wrapping mode even if the texture is a power-of-two.
• RenderTarget will now automatically set the wrapping mode to clamp.
• WebGLPipeline.flipProjectionMatrix is a new method that allows you to flip the y and bottom projection matrix values via a parameter.
• PipelineManager.renderTargets is a new property that holds an array of RenderTarget objects that all SpriteFX pipelines can share, to keep texture memory as low as possible.
• PipelineManager.maxDimension is a new property that holds the largest possible target dimension.
• PipelineManager.frameInc is a new property that holds the amount the RenderTargets will increase in size in each iteration. The default value is 32, meaning it will create targets of size 32, 64, 96, etc. You can control this via the pipeline config object.
• PipelineManager.targetIndex is a new property that holds the internal target array offset index. Treat it as read-only.
• The Pipeline Manager will now create a bunch of RenderTarget objects during its boot method. These are sized incrementally from 32px and up (use the frameInc value to alter this). These targets are shared by all Sprite FX Pipelines.
• PipelineManager.getRenderTarget is a new method that will return the a RenderTarget that best fits the dimensions given. This is typically called by Sprite FX Pipelines, rather than directly.
• PipelineManager.getSwapRenderTarget is a new method that will return a 'swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.
• PipelineManager.getAltSwapRenderTarget is a new method that will return a 'alternative swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.

New Features - Compressed Texture Support

Phaser 3.60 contains support for Compressed Textures. It can parse both KTX and PVR containers and within those has support for the following formats: ETC, ETC1, ATC, ASTC, BPTC, RGTC, PVRTC, S3TC and S3TCSRB. Compressed Textures differ from normal textures in that their structure is optimized for fast GPU data reads and lower memory consumption. Popular tools that can create compressed textures include PVRTexTool, ASTC Encoder and Texture Packer.

Compressed Textures are loaded using the new this.load.texture method, which takes a texture configuration object that maps the formats to the files. The browser will then download the first file in the object that it knows it can support. You can also provide Texture Atlas JSON data, or Multi Atlas JSON data, too, so you can use compressed texture atlases. Currently, Texture Packer is the best tool for creating these type of files.

• TextureSoure.compressionAlgorithm is now populated with the compression format used by the texture.
• Types.Textures.CompressedTextureData is the new compressed texture configuration object type.
• TextureManager.addCompressedTexture is a new method that will add a compressed texture, and optionally atlas data into the Texture Manager and return a Texture object than any Sprite can use.
• Textures.Parsers.KTXParser is a new parser for the KTX compression container format.
• Textures.Parsers.PVRParser is a new parser for the PVR compression container format.
• The WebGLRenderer.compression property now holds a more in-depth object containing supported compression formats.
• The WebGLRenderer.createTextureFromSource method now accepts the CompressedTextureData data objects and creates WebGL textures from them.
• WebGLRenderer.getCompressedTextures is a new method that will populate the WebGLRenderer.compression object and return its value. This is called automatically when the renderer boots.
• WebGLRenderer.getCompressedTextureName is a new method that will return a compressed texture format GLenum based on the given format.

New Features - Vastly Improved Mobile Performance and WebGL Pipeline Changes

WebGL Renderer Updates

Due to all of the changes with how WebGL texture batching works a lot of mostly internal methods and properties have been removed. This is the complete list:

• The WebGLRenderer.currentActiveTexture property has been removed.
• The WebGLRenderer.startActiveTexture property has been removed.
• The WebGLRenderer.tempTextures property has been removed.
• The WebGLRenderer.textureZero property has been removed.
• The WebGLRenderer.normalTexture property has been removed.
• The WebGLRenderer.textueFlush property has been removed.
• The WebGLRenderer.isTextureClean property has been removed.
• The WebGLRenderer.setBlankTexture method has been removed.
• The WebGLRenderer.setTextureSource method has been removed.
• The WebGLRenderer.isNewNormalMap method has been removed.
• The WebGLRenderer.setTextureZero method has been removed.
• The WebGLRenderer.clearTextureZero method has been removed.
• The WebGLRenderer.setNormalMap method has been removed.
• The WebGLRenderer.clearNormalMap method has been removed.
• The WebGLRenderer.unbindTextures method has been removed.
• The WebGLRenderer.resetTextures method has been removed.
• The WebGLRenderer.setTexture2D method has been removed.
• The WebGLRenderer.pushFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.setFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.popFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.deleteTexture method has had the reset argument removed.
• The Textures.TextureSource.glIndex property has been removed.
• The Textures.TextureSource.glIndexCounter property has be...

Phaser 3.60 Beta 16

Version 3.60.0 - Miku - in development

New Features - Sprite FX

• When defining the renderTargets in a WebGL Pipeline config, you can now set optional width and height properties, which will create a Render Target of that exact size, ignoring the scale value (if also given).
• WebGLPipeline.isSpriteFX is a new boolean property that defines if the pipeline is a Sprite FX Pipeline, or not. The default is false.
• GameObjects.Components.FX is a new component that provides access to FX specific properties and methods. The Image and Sprite Game Objects have this component by default.
• fxPadding and its related method setFXPadding allow you to set extra padding to be added to the texture the Game Object renders with. This is especially useful for Sprite FX shaders that modify the sprite beyond its bounds, such as glow or shadow effects.
• The WebGLPipeline.setShader method has a new optional parameter buffer that allows you to set the vertex buffer to be bound before the shader is activated.
• The WebGLPipeline.setVertexBuffer method has a new optional parameter buffer that allows you to set the vertex buffer to be bound if you don't want to bind the default one.
• The WebGLRenderer.createTextureFromSource method has a new optional boolean parameter forceClamp that will for the clamp wrapping mode even if the texture is a power-of-two.
• RenderTarget will now automatically set the wrapping mode to clamp.
• WebGLPipeline.flipProjectionMatrix is a new method that allows you to flip the y and bottom projection matrix values via a parameter.
• PipelineManager.renderTargets is a new property that holds an array of RenderTarget objects that all SpriteFX pipelines can share, to keep texture memory as low as possible.
• PipelineManager.maxDimension is a new property that holds the largest possible target dimension.
• PipelineManager.frameInc is a new property that holds the amount the RenderTargets will increase in size in each iteration. The default value is 32, meaning it will create targets of size 32, 64, 96, etc. You can control this via the pipeline config object.
• PipelineManager.targetIndex is a new property that holds the internal target array offset index. Treat it as read-only.
• The Pipeline Manager will now create a bunch of RenderTarget objects during its boot method. These are sized incrementally from 32px and up (use the frameInc value to alter this). These targets are shared by all Sprite FX Pipelines.
• PipelineManager.getRenderTarget is a new method that will return the a RenderTarget that best fits the dimensions given. This is typically called by Sprite FX Pipelines, rather than directly.
• PipelineManager.getSwapRenderTarget is a new method that will return a 'swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.
• PipelineManager.getAltSwapRenderTarget is a new method that will return a 'alternative swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.

New Features - Compressed Texture Support

Phaser 3.60 contains support for Compressed Textures. It can parse both KTX and PVR containers and within those has support for the following formats: ETC, ETC1, ATC, ASTC, BPTC, RGTC, PVRTC, S3TC and S3TCSRB. Compressed Textures differ from normal textures in that their structure is optimized for fast GPU data reads and lower memory consumption. Popular tools that can create compressed textures include PVRTexTool, ASTC Encoder and Texture Packer.

Compressed Textures are loaded using the new this.load.texture method, which takes a texture configuration object that maps the formats to the files. The browser will then download the first file in the object that it knows it can support. You can also provide Texture Atlas JSON data, or Multi Atlas JSON data, too, so you can use compressed texture atlases. Currently, Texture Packer is the best tool for creating these type of files.

• TextureSoure.compressionAlgorithm is now populated with the compression format used by the texture.
• Types.Textures.CompressedTextureData is the new compressed texture configuration object type.
• TextureManager.addCompressedTexture is a new method that will add a compressed texture, and optionally atlas data into the Texture Manager and return a Texture object than any Sprite can use.
• Textures.Parsers.KTXParser is a new parser for the KTX compression container format.
• Textures.Parsers.PVRParser is a new parser for the PVR compression container format.
• The WebGLRenderer.compression property now holds a more in-depth object containing supported compression formats.
• The WebGLRenderer.createTextureFromSource method now accepts the CompressedTextureData data objects and creates WebGL textures from them.
• WebGLRenderer.getCompressedTextures is a new method that will populate the WebGLRenderer.compression object and return its value. This is called automatically when the renderer boots.
• WebGLRenderer.getCompressedTextureName is a new method that will return a compressed texture format GLenum based on the given format.

New Features - Vastly Improved Mobile Performance and WebGL Pipeline Changes

WebGL Renderer Updates

Due to all of the changes with how WebGL texture batching works a lot of mostly internal methods and properties have been removed. This is the complete list:

• The WebGLRenderer.currentActiveTexture property has been removed.
• The WebGLRenderer.startActiveTexture property has been removed.
• The WebGLRenderer.tempTextures property has been removed.
• The WebGLRenderer.textureZero property has been removed.
• The WebGLRenderer.normalTexture property has been removed.
• The WebGLRenderer.textueFlush property has been removed.
• The WebGLRenderer.isTextureClean property has been removed.
• The WebGLRenderer.setBlankTexture method has been removed.
• The WebGLRenderer.setTextureSource method has been removed.
• The WebGLRenderer.isNewNormalMap method has been removed.
• The WebGLRenderer.setTextureZero method has been removed.
• The WebGLRenderer.clearTextureZero method has been removed.
• The WebGLRenderer.setNormalMap method has been removed.
• The WebGLRenderer.clearNormalMap method has been removed.
• The WebGLRenderer.unbindTextures method has been removed.
• The WebGLRenderer.resetTextures method has been removed.
• The WebGLRenderer.setTexture2D method has been removed.
• The WebGLRenderer.pushFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.setFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.popFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.deleteTexture method has had the reset argument removed.
• The Textures.TextureSource.glIndex property has been removed.
• The Textures.TextureSource.glIndexCounter property has been removed.

Previously, WebGLRenderer.whiteTexture and WebGLRenderer.blankTexture had a data-type of WebGLTexture but they were actually Phaser.Textures.Frame instances. This has now been corrected and the two properties are now actually WebGLTexture instances, not Frames. If your code relies on this mistake being present, please adapt it.

• The RenderTarget class will now create a Framebuffer that includes a Depth Stencil Buffer attachment by default. Previously, it didn't. By attaching a stencil buffer it allows things like Geometry Masks to work in combination with Post FX and other Pipelines. Fix #5802 (thanks @mijinc0)
• When calling PipelineManager.clear and rebind it will now check if the vao extension is available, and if so, it'll bind a null vertex array. This helps clean-up from 3rd party libs that don't do this directly, such as ThreeJS.

Mobile Pipeline

• The Mobile Pipeline is a new pipeline that extends the Multi Tint pipeline, but uses customized shaders and a single-bound texture specifically for mobile GPUs. This should restore mobile performance back to the levels it was around v3.22, before Multi Tint improved it all for desktop at the expense of mobile.
• shaders/Mobile.vert and shaders/Mobile.frag are the two shaders used for the Mobile Pipeline.
• PipelineManager#MOBILE_PIPELINE is a new constant-style reference to the Mobile Pipeline instance.
• autoMobilePipeline is a new Game Configuration boolean that toggles if the Mobile Pipeline should be automatically deployed, or not. By default it is enabled, but you can set it to false to force use of the Multi Tint pipeline (or if you need more advanced conditions to check when to enable it)
• defaultPipeline is a new Game Configuration property that allows you to set the default Game Object Pipeline. This is set to Multi Tint as standard, but you can set it to your own pipeline from this value.
• PipelineManager.default is a new propery that is used by most Game Objects to determine which pipeline they will init with.
• PipelineManager.setDefaultPipeline is a new method that allows you to change the default Game Object pipeline. You could use this to allow for more fine-grained conditional control over when to use Multi or Mobile (or another pipeline)
• The PipelineManager.boot method is now passed the default pipeline and auto mobile setting from the Game Config.

Multi Tint Pipeline

• The batchLine method in the Multi Pipeline will now check to see if the dxdy len is zero, and if so, it will abort drawing the line. This fixes issues on older Android devices, such as the Samsung Galaxy S6 or Kindle 7, where it would draw erroneous lines leading up to the top-left of the canvas under WebGL when rendering a stroked rounded rectangle. Fix #5429 (thanks @fkoch-tg...

Phaser v3.60 Beta 15

Version 3.60.0 - Miku - in development

New Features - Sprite FX

• When defining the renderTargets in a WebGL Pipeline config, you can now set optional width and height properties, which will create a Render Target of that exact size, ignoring the scale value (if also given).
• WebGLPipeline.isSpriteFX is a new boolean property that defines if the pipeline is a Sprite FX Pipeline, or not. The default is false.
• GameObjects.Components.FX is a new component that provides access to FX specific properties and methods. The Image and Sprite Game Objects have this component by default.
• fxPadding and its related method setFXPadding allow you to set extra padding to be added to the texture the Game Object renders with. This is especially useful for Sprite FX shaders that modify the sprite beyond its bounds, such as glow or shadow effects.
• The WebGLPipeline.setShader method has a new optional parameter buffer that allows you to set the vertex buffer to be bound before the shader is activated.
• The WebGLPipeline.setVertexBuffer method has a new optional parameter buffer that allows you to set the vertex buffer to be bound if you don't want to bind the default one.
• The WebGLRenderer.createTextureFromSource method has a new optional boolean parameter forceClamp that will for the clamp wrapping mode even if the texture is a power-of-two.
• RenderTarget will now automatically set the wrapping mode to clamp.
• WebGLPipeline.flipProjectionMatrix is a new method that allows you to flip the y and bottom projection matrix values via a parameter.
• PipelineManager.renderTargets is a new property that holds an array of RenderTarget objects that all SpriteFX pipelines can share, to keep texture memory as low as possible.
• PipelineManager.maxDimension is a new property that holds the largest possible target dimension.
• PipelineManager.frameInc is a new property that holds the amount the RenderTargets will increase in size in each iteration. The default value is 32, meaning it will create targets of size 32, 64, 96, etc. You can control this via the pipeline config object.
• PipelineManager.targetIndex is a new property that holds the internal target array offset index. Treat it as read-only.
• The Pipeline Manager will now create a bunch of RenderTarget objects during its boot method. These are sized incrementally from 32px and up (use the frameInc value to alter this). These targets are shared by all Sprite FX Pipelines.
• PipelineManager.getRenderTarget is a new method that will return the a RenderTarget that best fits the dimensions given. This is typically called by Sprite FX Pipelines, rather than directly.
• PipelineManager.getSwapRenderTarget is a new method that will return a 'swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.
• PipelineManager.getAltSwapRenderTarget is a new method that will return a 'alternative swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.

New Features - Compressed Texture Support

Phaser 3.60 contains support for Compressed Textures. It can parse both KTX and PVR containers and within those has support for the following formats: ETC, ETC1, ATC, ASTC, BPTC, RGTC, PVRTC, S3TC and S3TCSRB. Compressed Textures differ from normal textures in that their structure is optimized for fast GPU data reads and lower memory consumption. Popular tools that can create compressed textures include PVRTexTool, ASTC Encoder and Texture Packer.

Compressed Textures are loaded using the new this.load.texture method, which takes a texture configuration object that maps the formats to the files. The browser will then download the first file in the object that it knows it can support. You can also provide Texture Atlas JSON data, or Multi Atlas JSON data, too, so you can use compressed texture atlases. Currently, Texture Packer is the best tool for creating these type of files.

• TextureSoure.compressionAlgorithm is now populated with the compression format used by the texture.
• Types.Textures.CompressedTextureData is the new compressed texture configuration object type.
• TextureManager.addCompressedTexture is a new method that will add a compressed texture, and optionally atlas data into the Texture Manager and return a Texture object than any Sprite can use.
• Textures.Parsers.KTXParser is a new parser for the KTX compression container format.
• Textures.Parsers.PVRParser is a new parser for the PVR compression container format.
• The WebGLRenderer.compression property now holds a more in-depth object containing supported compression formats.
• The WebGLRenderer.createTextureFromSource method now accepts the CompressedTextureData data objects and creates WebGL textures from them.
• WebGLRenderer.getCompressedTextures is a new method that will populate the WebGLRenderer.compression object and return its value. This is called automatically when the renderer boots.
• WebGLRenderer.getCompressedTextureName is a new method that will return a compressed texture format GLenum based on the given format.

New Features - Vastly Improved Mobile Performance and WebGL Pipeline Changes

WebGL Renderer Updates

Due to all of the changes with how WebGL texture batching works a lot of mostly internal methods and properties have been removed. This is the complete list:

• The WebGLRenderer.currentActiveTexture property has been removed.
• The WebGLRenderer.startActiveTexture property has been removed.
• The WebGLRenderer.tempTextures property has been removed.
• The WebGLRenderer.textureZero property has been removed.
• The WebGLRenderer.normalTexture property has been removed.
• The WebGLRenderer.textueFlush property has been removed.
• The WebGLRenderer.isTextureClean property has been removed.
• The WebGLRenderer.setBlankTexture method has been removed.
• The WebGLRenderer.setTextureSource method has been removed.
• The WebGLRenderer.isNewNormalMap method has been removed.
• The WebGLRenderer.setTextureZero method has been removed.
• The WebGLRenderer.clearTextureZero method has been removed.
• The WebGLRenderer.setNormalMap method has been removed.
• The WebGLRenderer.clearNormalMap method has been removed.
• The WebGLRenderer.unbindTextures method has been removed.
• The WebGLRenderer.resetTextures method has been removed.
• The WebGLRenderer.setTexture2D method has been removed.
• The WebGLRenderer.pushFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.setFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.popFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.deleteTexture method has had the reset argument removed.
• The Textures.TextureSource.glIndex property has been removed.
• The Textures.TextureSource.glIndexCounter property has been removed.

Previously, WebGLRenderer.whiteTexture and WebGLRenderer.blankTexture had a data-type of WebGLTexture but they were actually Phaser.Textures.Frame instances. This has now been corrected and the two properties are now actually WebGLTexture instances, not Frames. If your code relies on this mistake being present, please adapt it.

• The RenderTarget class will now create a Framebuffer that includes a Depth Stencil Buffer attachment by default. Previously, it didn't. By attaching a stencil buffer it allows things like Geometry Masks to work in combination with Post FX and other Pipelines. Fix #5802 (thanks @mijinc0)
• When calling PipelineManager.clear and rebind it will now check if the vao extension is available, and if so, it'll bind a null vertex array. This helps clean-up from 3rd party libs that don't do this directly, such as ThreeJS.

Mobile Pipeline

• The Mobile Pipeline is a new pipeline that extends the Multi Tint pipeline, but uses customized shaders and a single-bound texture specifically for mobile GPUs. This should restore mobile performance back to the levels it was around v3.22, before Multi Tint improved it all for desktop at the expense of mobile.
• shaders/Mobile.vert and shaders/Mobile.frag are the two shaders used for the Mobile Pipeline.
• PipelineManager#MOBILE_PIPELINE is a new constant-style reference to the Mobile Pipeline instance.
• autoMobilePipeline is a new Game Configuration boolean that toggles if the Mobile Pipeline should be automatically deployed, or not. By default it is enabled, but you can set it to false to force use of the Multi Tint pipeline (or if you need more advanced conditions to check when to enable it)
• defaultPipeline is a new Game Configuration property that allows you to set the default Game Object Pipeline. This is set to Multi Tint as standard, but you can set it to your own pipeline from this value.
• PipelineManager.default is a new propery that is used by most Game Objects to determine which pipeline they will init with.
• PipelineManager.setDefaultPipeline is a new method that allows you to change the default Game Object pipeline. You could use this to allow for more fine-grained conditional control over when to use Multi or Mobile (or another pipeline)
• The PipelineManager.boot method is now passed the default pipeline and auto mobile setting from the Game Config.

Multi Tint Pipeline

• The batchLine method in the Multi Pipeline will now check to see if the dxdy len is zero, and if so, it will abort drawing the line. This fixes issues on older Android devices, such as the Samsung Galaxy S6 or Kindle 7, where it would draw erroneous lines leading up to the top-left of the canvas under WebGL when rendering a stroked rounded rectangle. Fix #5429 (thanks @fkoch-tg...

Phaser v3.60.0 Beta 14

Version 3.60.0 - Miku - in development

New Features - Sprite FX

• When defining the renderTargets in a WebGL Pipeline config, you can now set optional width and height properties, which will create a Render Target of that exact size, ignoring the scale value (if also given).
• WebGLPipeline.isSpriteFX is a new boolean property that defines if the pipeline is a Sprite FX Pipeline, or not. The default is false.
• GameObjects.Components.FX is a new component that provides access to FX specific properties and methods. The Image and Sprite Game Objects have this component by default.
• fxPadding and its related method setFXPadding allow you to set extra padding to be added to the texture the Game Object renders with. This is especially useful for Sprite FX shaders that modify the sprite beyond its bounds, such as glow or shadow effects.
• The WebGLPipeline.setShader method has a new optional parameter buffer that allows you to set the vertex buffer to be bound before the shader is activated.
• The WebGLPipeline.setVertexBuffer method has a new optional parameter buffer that allows you to set the vertex buffer to be bound if you don't want to bind the default one.
• The WebGLRenderer.createTextureFromSource method has a new optional boolean parameter forceClamp that will for the clamp wrapping mode even if the texture is a power-of-two.
• RenderTarget will now automatically set the wrapping mode to clamp.
• WebGLPipeline.flipProjectionMatrix is a new method that allows you to flip the y and bottom projection matrix values via a parameter.
• PipelineManager.renderTargets is a new property that holds an array of RenderTarget objects that all SpriteFX pipelines can share, to keep texture memory as low as possible.
• PipelineManager.maxDimension is a new property that holds the largest possible target dimension.
• PipelineManager.frameInc is a new property that holds the amount the RenderTargets will increase in size in each iteration. The default value is 32, meaning it will create targets of size 32, 64, 96, etc. You can control this via the pipeline config object.
• PipelineManager.targetIndex is a new property that holds the internal target array offset index. Treat it as read-only.
• The Pipeline Manager will now create a bunch of RenderTarget objects during its boot method. These are sized incrementally from 32px and up (use the frameInc value to alter this). These targets are shared by all Sprite FX Pipelines.
• PipelineManager.getRenderTarget is a new method that will return the a RenderTarget that best fits the dimensions given. This is typically called by Sprite FX Pipelines, rather than directly.
• PipelineManager.getSwapRenderTarget is a new method that will return a 'swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.
• PipelineManager.getAltSwapRenderTarget is a new method that will return a 'alternative swap' RenderTarget that matches the size of the main target. This is called by Sprite FX pipelines and not typically called directly.

New Features - Compressed Texture Support

Phaser 3.60 contains support for Compressed Textures. It can parse both KTX and PVR containers and within those has support for the following formats: ETC, ETC1, ATC, ASTC, BPTC, RGTC, PVRTC, S3TC and S3TCSRB. Compressed Textures differ from normal textures in that their structure is optimized for fast GPU data reads and lower memory consumption. Popular tools that can create compressed textures include PVRTexTool, ASTC Encoder and Texture Packer.

Compressed Textures are loaded using the new this.load.texture method, which takes a texture configuration object that maps the formats to the files. The browser will then download the first file in the object that it knows it can support. You can also provide Texture Atlas JSON data, or Multi Atlas JSON data, too, so you can use compressed texture atlases. Currently, Texture Packer is the best tool for creating these type of files.

• TextureSoure.compressionAlgorithm is now populated with the compression format used by the texture.
• Types.Textures.CompressedTextureData is the new compressed texture configuration object type.
• TextureManager.addCompressedTexture is a new method that will add a compressed texture, and optionally atlas data into the Texture Manager and return a Texture object than any Sprite can use.
• Textures.Parsers.KTXParser is a new parser for the KTX compression container format.
• Textures.Parsers.PVRParser is a new parser for the PVR compression container format.
• The WebGLRenderer.compression property now holds a more in-depth object containing supported compression formats.
• The WebGLRenderer.createTextureFromSource method now accepts the CompressedTextureData data objects and creates WebGL textures from them.
• WebGLRenderer.getCompressedTextures is a new method that will populate the WebGLRenderer.compression object and return its value. This is called automatically when the renderer boots.
• WebGLRenderer.getCompressedTextureName is a new method that will return a compressed texture format GLenum based on the given format.

New Features - Vastly Improved Mobile Performance and WebGL Pipeline Changes

WebGL Renderer Updates

Due to all of the changes with how WebGL texture batching works a lot of mostly internal methods and properties have been removed. This is the complete list:

• The WebGLRenderer.currentActiveTexture property has been removed.
• The WebGLRenderer.startActiveTexture property has been removed.
• The WebGLRenderer.tempTextures property has been removed.
• The WebGLRenderer.textureZero property has been removed.
• The WebGLRenderer.normalTexture property has been removed.
• The WebGLRenderer.textueFlush property has been removed.
• The WebGLRenderer.isTextureClean property has been removed.
• The WebGLRenderer.setBlankTexture method has been removed.
• The WebGLRenderer.setTextureSource method has been removed.
• The WebGLRenderer.isNewNormalMap method has been removed.
• The WebGLRenderer.setTextureZero method has been removed.
• The WebGLRenderer.clearTextureZero method has been removed.
• The WebGLRenderer.setNormalMap method has been removed.
• The WebGLRenderer.clearNormalMap method has been removed.
• The WebGLRenderer.unbindTextures method has been removed.
• The WebGLRenderer.resetTextures method has been removed.
• The WebGLRenderer.setTexture2D method has been removed.
• The WebGLRenderer.pushFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.setFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.popFramebuffer method has had the resetTextures argument removed.
• The WebGLRenderer.deleteTexture method has had the reset argument removed.
• The Textures.TextureSource.glIndex property has been removed.
• The Textures.TextureSource.glIndexCounter property has been removed.

Previously, WebGLRenderer.whiteTexture and WebGLRenderer.blankTexture had a data-type of WebGLTexture but they were actually Phaser.Textures.Frame instances. This has now been corrected and the two properties are now actually WebGLTexture instances, not Frames. If your code relies on this mistake being present, please adapt it.

Mobile Pipeline

• The Mobile Pipeline is a new pipeline that extends the Multi Tint pipeline, but uses customized shaders and a single-bound texture specifically for mobile GPUs. This should restore mobile performance back to the levels it was around v3.22, before Multi Tint improved it all for desktop at the expense of mobile.
• shaders/Mobile.vert and shaders/Mobile.frag are the two shaders used for the Mobile Pipeline.
• PipelineManager#MOBILE_PIPELINE is a new constant-style reference to the Mobile Pipeline instance.
• autoMobilePipeline is a new Game Configuration boolean that toggles if the Mobile Pipeline should be automatically deployed, or not. By default it is enabled, but you can set it to false to force use of the Multi Tint pipeline (or if you need more advanced conditions to check when to enable it)
• defaultPipeline is a new Game Configuration property that allows you to set the default Game Object Pipeline. This is set to Multi Tint as standard, but you can set it to your own pipeline from this value.
• PipelineManager.default is a new propery that is used by most Game Objects to determine which pipeline they will init with.
• PipelineManager.setDefaultPipeline is a new method that allows you to change the default Game Object pipeline. You could use this to allow for more fine-grained conditional control over when to use Multi or Mobile (or another pipeline)
• The PipelineManager.boot method is now passed the default pipeline and auto mobile setting from the Game Config.

Multi Tint Pipeline

• The Multi.frag shader now uses a highp precision, or mediump if the device doesn't support it (thanks @arbassic)
• The WebGL.Utils.checkShaderMax function will no longer use a massive if/else glsl shader check and will instead rely on the value given in gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS).
• The internal WebGL Utils function GenerateSrc has been removed as it's no longer required internally.
• Previously, the Multi Tint methods batchSprite, batchTexture, batchTextureFrame and batchFillRect would all make heavy use of the TransformMatrix.getXRound and getYRound methods, which in turn called getX and getY and applied optional rounding to them. This is all now handled by one single function (setQuad) with no branching, meaning rendering one single sprite has cut down 16 function calls and 48 getters to just 1 function.

Lights Pipeline

• The Light Pipe...