Draggable TileSprites

Examples
1

This is an example I made for the Phaser Patreon Backers that shows you how to drag a TileSprite, so that it extends its dimensions on the drag. No assets included this time (if you want them, back Phaser on Patreon and you can download them immediately) but you should get the idea from the code itself :slight_smile:

004%20resize%20tilesprite%20on%20drag
004 resize tilesprite on drag.png800×600 49.5 KB 

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.image('background', 'assets/background-desert.png');
        this.load.image('cactusTop', 'assets/cactus-top.png');
        this.load.image('cactusBase', 'assets/cactus-base.png');
        this.load.atlas('tiles', 'assets/platform-desert.png', 'assets/platform-desert.json');
    }

    create ()
    {
        this.add.image(400, 100, 'background');

        this.add.tileSprite(400, 562, 800, 128, 'tiles', '2');

        this.createExpandingSprite(220, 498, 110);
        this.createExpandingSprite(400, 498);
        this.createExpandingSprite(580, 498, 260);

        this.add.text(10, 10, 'Drag the cactus tops', { fill: '#000' });
    }

    createExpandingSprite (x, baseY, startHeight = 48)
    {
        //  The 'base' image, which we use as our tilesprite, is 64 x 48 pixels in size.

        let base = this.add.tileSprite(x, baseY, 64, startHeight, 'cactusBase').setOrigin(0.5, 1);

        let top = this.add.image(x, baseY - startHeight, 'cactusTop').setOrigin(0.5, 1);

        top.setInteractive({ draggable: true, useHandCursor: true });

        top.on('drag', function (pointer, dragX, dragY) {

            if (dragY <= baseY)
            {
                this.y = dragY;

                //  Resize the 'base' tilesprite so it's the height from the floor,
                //  up to where-ever they dragged it
                let height = (baseY - dragY);

                base.setSize(64, height);
            }

        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#08538a',
    parent: 'phaser-example',
    scene: Example
};

let game = new Phaser.Game(config);
6 Likes
2

Nice very handy, especially for editors and stuff!

1 Like