How to drag a TileSprite

Phaser 3
1

this code will show you how to drag a TileSprite, so that it extends its dimensions on the drag. No assets included :zipper_mouth_face:
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)

1 Like
2

:+1: