How to create a collider for a drag event

Phaser 3
1

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")


    };
2

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:

3

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

    function update() {

    gfx.clear();

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

       GetBounds(this.basket, rect1);
   GetBounds(bananaGroup, rect2);

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

4

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

Try it without doing this :slight_smile:

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

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

1 Like
5

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?

6

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

It’s @samme 's example :slight_smile:
Graphics are for display purposes only.
Geom can work, see Phaser 3 Examples
Maybe also look at https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs

1 Like
7

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")


    };
8

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…

9

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