# How to create a Polygon Dropzone?

**URL:** <https://phaser.discourse.group/t/how-to-create-a-polygon-dropzone/9846>\
**Category:** Phaser 3\
**Created:** [June 25, 2021, 6:16pm UTC](https://phaser.discourse.group/t/how-to-create-a-polygon-dropzone/9846 "2021-06-25T18:16:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mark/32/177_2.png) [@Mark](https://phaser.discourse.group/u/Mark)\
**Post date:** [June 25, 2021, 6:16pm UTC](https://phaser.discourse.group/t/how-to-create-a-polygon-dropzone/9846/1 "2021-06-25T18:16:27Z")

</div>

I am trying to create a polygon dropzone and can’t seem to figure it out, any help would be greatly appreciated.

I’ve attached my code below which is a modified version of the dropzone example on [labs.phaser.io](http://labs.phaser.io). You should be able to copy and paste the code into [Phaser 3 Examples](https://labs.phaser.io/edit.html) to see it in action. If you look at the console logs it is hitting the hitAreaCallback function with every mouse move. Should it be doing that, or should that only be called when dropping or at the maximum while you are dragging?

```javascript
var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};
// hitAreaCallback to determine if point is in polygon
function insidePolygon(polygon, x, y, gameObject) {
    console.log("game object");
        console.log(gameObject);
        // ray-casting algorithm based on
        // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html/pnpoly.html
        console.log(polygon.geom.points);
        console.log(x,y);
        var vs = polygon.geom.points;
        var inside = false;
        for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
            var xi = vs[i].x, yi = vs[i].y;
            var xj = vs[j].x, yj = vs[j].y;
            
            var intersect = ((yi > y) != (yj > y))
                && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
            if (intersect) inside = !inside;
        }
        console.log("in polygon", inside);
        return inside;
    };

var game = new Phaser.Game(config);

function preload ()
{
    this.load.atlas('cards', 'assets/atlas/cards.png', 'assets/atlas/cards.json');
}

function create ()
{
    // Create a stack of random cards
    var frames = this.textures.get('cards').getFrameNames();
    var x = 100;
    var y = 100;
    for (var i = 0; i < 64; i++)
    {
        var image = this.add.image(x, y, 'cards', Phaser.Math.RND.pick(frames)).setInteractive();
        this.input.setDraggable(image);
        y += 6;
    }

    // POLYGON DROPZONE CODE HERE
    var color = new Phaser.Display.Color();
    color.random(50);
    var polygon = [{"x":203,"y":369},{"x":200,"y":380},{"x":204,"y":391},{"x":185,"y":389},{"x":138,"y":417},{"x":148,"y":445},{"x":201,"y":435},{"x":226,"y":370}];
    var shape = this.add.polygon(300,0,polygon).setFillStyle(color.color);
    var zone = this.add.zone(0, 0, 100, 100)
        .setName("dropzone")
        .setDropZone(shape, insidePolygon);
    // END CODE HERE

    this.input.on('dragstart', function (pointer, gameObject) {
        this.children.bringToTop(gameObject);
    }, this);

    this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
        gameObject.x = dragX;
        gameObject.y = dragY;
    });

    this.input.on('drop', function (pointer, gameObject, dropZone) {
        gameObject.x = dropZone.x;
        gameObject.y = dropZone.y;
        gameObject.input.enabled = false;
    });

    this.input.on('dragend', function (pointer, gameObject, dropped) {
        if (!dropped)
        {
            gameObject.x = gameObject.input.dragStartX;
            gameObject.y = gameObject.input.dragStartY;
        }
    });
}

```

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [June 25, 2021, 6:57pm UTC](https://phaser.discourse.group/t/how-to-create-a-polygon-dropzone/9846/2 "2021-06-25T18:57:27Z")

</div>

I think all you need is

```javascript
    var shape = this.add.polygon(300, 0, polygon).setFillStyle(color.color)
        .setInteractive(new Phaser.Geom.Polygon(polygon), Phaser.Geom.Polygon.Contains, true)

```

No need for a separate zone.

---

<div class="post-metadata">

**Author:** ![Mark](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mark/32/177_2.png) [@Mark](https://phaser.discourse.group/u/Mark)\
**Post date:** [June 25, 2021, 7:12pm UTC](https://phaser.discourse.group/t/how-to-create-a-polygon-dropzone/9846/3 "2021-06-25T19:12:26Z")

</div>

Awesome, thanks for your help @Milton !