# Draggable TileSprites

**URL:** <https://phaser.discourse.group/t/draggable-tilesprites/23>\
**Category:** Examples\
**Created:** [December 7, 2018, 12:43pm UTC](https://phaser.discourse.group/t/draggable-tilesprites/23 "2018-12-07T12:43:53Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rich](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rich/32/4_2.png) [@rich](https://phaser.discourse.group/u/rich)\
**Post date:** [December 7, 2018, 12:43pm UTC](https://phaser.discourse.group/t/draggable-tilesprites/23/1 "2018-12-07T12:43:53Z")

</div>

This is an example I made for the [Phaser Patreon Backers](https://www.patreon.com/photonstorm/) 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 🙂

 ![004%20resize%20tilesprite%20on%20drag](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/086eb213f67946a7f3b7ae8b2e54783474ec2e43.png)

```
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);
```

---

<div class="post-metadata">

**Author:** ![netgfx](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/netgfx/32/17_2.png) [@netgfx](https://phaser.discourse.group/u/netgfx)\
**Post date:** [December 7, 2018, 1:16pm UTC](https://phaser.discourse.group/t/draggable-tilesprites/23/2 "2018-12-07T13:16:30Z")

</div>

Nice very handy, especially for editors and stuff!