# How to detect overlapping images with any screen element using matter as default physics?

**URL:** <https://phaser.discourse.group/t/how-to-detect-overlapping-images-with-any-screen-element-using-matter-as-default-physics/11166>\
**Category:** Phaser 3\
**Created:** [February 3, 2022, 6:01pm UTC](https://phaser.discourse.group/t/how-to-detect-overlapping-images-with-any-screen-element-using-matter-as-default-physics/11166 "2022-02-03T18:01:10Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Saulo-Felipe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/saulo-felipe/32/6168_2.png) [@Saulo-Felipe](https://phaser.discourse.group/u/Saulo-Felipe)\
**Post date:** [February 3, 2022, 6:01pm UTC](https://phaser.discourse.group/t/how-to-detect-overlapping-images-with-any-screen-element-using-matter-as-default-physics/11166/1 "2022-02-03T18:01:10Z")

</div>

I’m creating a game and I need to add shots, I managed to do that but now I don’t know how to detect the collision of these bullets with any other body.

```javascript
var Bullet = new Phaser.Class({
  Extends: Phaser.GameObjects.Image,

  initialize: function Bullet(scene) {
    Phaser.GameObjects.Image.call(this, scene, 0, 0, "bullet")
    
    this.speed = Phaser.Math.GetSpeed(1000, 1)
    this.isFlip = false
  },

  fire: function (x, y, scaleX) {
    console.log(this)
    if (scaleX === -1) {
      this.isFlip = true
      this.setPosition(x - 50, y)
    } else {
      this.isFlip = false
      this.setPosition(x + 50, y)
    }
    
    this.setActive(true)
    this.setVisible(true)
  },
  
  update: function(time, delta) {
    if (!this.isFlip) {
      this.x += this.speed * delta

      if (this.x > 6000) {
        console.log("Exit screen")
        this.setActive(false)
        this.setVisible(false)
      }
    } else {
      this.x -= this.speed * delta

      if (this.x < -50) {
        console.log("Exit screen")
        this.setActive(false)
        this.setVisible(false)
      }
    }
  }
})

this.bullets = this.add.group({
    classType: Bullet,
    maxSize: 1000,
    runChildUpdate: true
})

```

Basically this code generates this:

![ezgif.com-gif-maker](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e61ff5fb6be39b8c3c48626b7e8d791ac6a414d8.gif)

OBS: Observe well, the shots are small and in black color

Using the  
`var body = this.matter.add.image(100, 100, "image")`

I can add a body to it, and the collision automatically works with my whole map:

`body.setCircle(10)`

However, I can’t add a body to detect collisions, as in the example above, is there any way to do this?