# How to create a collider for a drag event

**URL:** <https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363>\
**Category:** Phaser 3\
**Created:** [April 21, 2021, 9:03pm UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363 "2021-04-21T21:03:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![camouflaged\_penguin](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@camouflaged\_penguin](https://phaser.discourse.group/u/camouflaged_penguin)\
**Post date:** [April 21, 2021, 9:03pm UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363/1 "2021-04-21T21:03:44Z")

</div>

now while the drag event is workiing (i can trag an item around) i want that something happens, when the basket in this code collides with another item (bananaGroup)

I am not sure how to get this done and tried this. As you can see i want the basket changes it color when the item banana hits it and the game to pause.

```
  this.physics.add.collider(bananaGroup, this.basket, this.hitBasket);

  }
  update() {
    // everything that is constantly checked
    //kommentar hier
  }

    hitBasket()
    {

    this.physics.pause();

    this.basket.setTint(0xff0000);
    console.log("stop")

    };
```

---

<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:** [April 22, 2021, 4:16am UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363/2 "2021-04-22T04:16:21Z")

</div>

This is actually quite difficult, because the body velocity is not set when dragging. The (arcade) physics engine doesn’t do collisions without velocity. So use overlap, maybe even without physics, like so:

https://codepen.io/samme/embed/preview/QWErXxP?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=QWErXxP

---

<div class="post-metadata">

**Author:** ![camouflaged\_penguin](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@camouflaged\_penguin](https://phaser.discourse.group/u/camouflaged_penguin)\
**Post date:** [April 22, 2021, 7:45am UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363/3 "2021-04-22T07:45:31Z")

</div>

1. why do you need to clear the gfx here?

2. if i want to do this with my game objects. can i put it like this in the —\>()

How does the overlap setting work? Its like if it is not empty-\>  
get intersection (what does intersection do? and what does strokeRectShape do?)

---

<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:** [April 22, 2021, 8:16am UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363/4 "2021-04-22T08:16:34Z")

</div>

First of, you don’t need any of the gfx stuff. You only need RectangleToRectangle.

> [@camouflaged\_penguin](#):
>
> 1. why do you need to clear the gfx here?

Try it without doing this 🙂

> [@](#):
>
> 1. if i want to do this with my game objects. can i put it like this in the —\>()

No. You’ll have to check for each sprite in the group.

> [@](#):
>
> How does the overlap setting work? Its like if it is not empty-\>  
> get intersection (what does intersection do? and what does strokeRectShape do?)

```javascript
overlap.setEmpty(); // Clear the Rectangle, since GetRectangleIntersection doesn't clear it.
GetRectangleIntersection(rect1, rect2, overlap);
if (!overlap.isEmpty()) { // If there is an overlap, draw the overlap rectangle.
    gfx.strokeRectShape(overlap);
}

```

[https://photonstorm.github.io/phaser3-docs/Phaser.Geom.Intersects.html#.GetRectangleIntersection\_\_anchor](https://photonstorm.github.io/phaser3-docs/Phaser.Geom.Intersects.html#.GetRectangleIntersection__anchor)

---

<div class="post-metadata">

**Author:** ![camouflaged\_penguin](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@camouflaged\_penguin](https://phaser.discourse.group/u/camouflaged_penguin)\
**Post date:** [April 22, 2021, 8:42am UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363/5 "2021-04-22T08:42:43Z")

</div>

i am not sure where the rectangle gets the data that it is as big as the Eye IMG but i think thats one thing Geom does.

As for the best solution here:  
When i want colliders behind my Images (like circles and stuff) that actually collide and do something (like i your example). Is it better to use .graphics or Geom?

---

<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:** [April 22, 2021, 9:05am UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363/6 "2021-04-22T09:05:25Z")

</div>

> [@camouflaged\_penguin](#):
>
> i am not sure where the rectangle gets the data that it is as big as the Eye IMG but i think thats one thing Geom does.

Every GameObject has its containing rectangle bounds set on creation. Geom is just a utility class to define geometry objects and methods.

> [@](#):
>
> As for the best solution here:  
> When i want colliders behind my Images (like circles and stuff) that actually collide and do something (like i your example). Is it better to use .graphics or Geom?

It’s @samme 's example 🙂  
Graphics are for display purposes only.  
Geom can work, see [Phaser 3 Examples](https://labs.phaser.io/edit.html?src=src/input%5Cmouse%5Cshape%20hit%20tests.js)  
Maybe also look at [https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs](https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs)

---

<div class="post-metadata">

**Author:** ![camouflaged\_penguin](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@camouflaged\_penguin](https://phaser.discourse.group/u/camouflaged_penguin)\
**Post date:** [April 22, 2021, 7:35pm UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363/7 "2021-04-22T19:35:51Z")

</div>

> [@Milton](#):
>
> This is actually quite difficult, because the body velocity is not set when dragging. The (arcade) physics engine doesn’t do collisions without velocity. So use overlap, maybe even without physics, like so:

but it actually worked like this.  
here is the code where the collision worked correctly:

```
this.physics.add.collider(bananaGroup, this.basket, this.hitBasket);
      this.physics.add.collider(groundplane, this.basket);

      // this.physics.add.collider(groundplane, bananaGroup);

  }
  update() {
    // everything that is constantly checked
    //kommentar hier
  }

    hitBasket(basket,bananaGroup)
    {

    //this.physics.pause();

    basket.setTint(0xff0000);
    console.log("stop")

    };

```

---

<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:** [April 23, 2021, 6:15am UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363/8 "2021-04-23T06:15:10Z")

</div>

It depends on what you call collision. It registers overlap, but there is no physics ‘reaction’. So no ‘air hockey’, by dragging your sprite very fast against an other sprite, because there is no velocity…

---

<div class="post-metadata">

**Author:** ![camouflaged\_penguin](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@camouflaged\_penguin](https://phaser.discourse.group/u/camouflaged_penguin)\
**Post date:** [April 23, 2021, 7:06am UTC](https://phaser.discourse.group/t/how-to-create-a-collider-for-a-drag-event/9363/9 "2021-04-23T07:06:27Z")

</div>

ah ok…  
thx, now i get it. for my purpose i just need a timed event when to objects collide. And thats working now.