Create Nine Slice

Demonstrates how to create and display Nine Slice Game Objects using textures from an atlas, allowing for resizable UI elements with preserved corners.

Create Nine Slice, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.atlas('buttons', 'assets/ui/nine-slice.png', 'assets/ui/nine-slice.json');
    }

    create ()
    {
        this.add.nineslice(400, 300, 'buttons', 'blue-box', 600, 400, 16, 16, 32, 16);

        this.add.nineslice(400, 300, 'buttons', 'button-bg', 400, 110, 64, 64);
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Nine Slice8 examples