# how to set up complex colliders

**URL:** <https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037>\
**Category:** Phaser 3\
**Created:** [January 4, 2025, 2:07pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037 "2025-01-04T14:07:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![devcoder](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@devcoder](https://phaser.discourse.group/u/devcoder)\
**Post date:** [January 4, 2025, 2:07pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/1 "2025-01-04T14:07:34Z")

</div>

Hi,

I’m new to Phaser and trying to set myself some smallish starter projects. The first project I’m trying to create a simple 2D basketball game (from a side on view) but I’m struggling with the best way to setup the physics and colliders for some objects.

Specifically for the net, at present I have one sprite that includes the backboard and the hoop. I want the ball to be able to bounce off the backboard and the “rim” of the hoop at either side (left and right), but to be able to pass through the middle and trigger a score event.

Do I ultimately need to split the sprite into multiple pieces and manually place them together? (I tried using a container but that seems to suffer from issues when adding physics bodies to the children).

I also looked at adding multiple static images of “nothing” with physics bodies attached, again I would obviously need to position these manually with the hoop. After the player “scores” I want to move the position of the net to the other side of the screen and set a random height (and continue this every time they score) so I wanted to try and group as much pieces as possible so I’m not having the reposition multiple elements every time (hence trying to use a container).

Can someone advise on how I should approach this? For reference I’m trying to recreate something like this [https://youtube.com/shorts/-HYLBuEPbus?si=yINRot-xPmReYh0P](https://youtube.com/shorts/-HYLBuEPbus?si=yINRot-xPmReYh0P)

Thanks

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 4, 2025, 3:22pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/2 "2025-01-04T15:22:46Z")

</div>

👋

[Arcade Physics bodies inside containers](https://phaser.io/examples/v3.85.0/game-objects/container/view/arcade-physics-sprite-test) should work OK.

If you have one sprite image I would first try using physics-enabled Zone game objects for the different collidable parts.

---

<div class="post-metadata">

**Author:** ![devcoder](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@devcoder](https://phaser.discourse.group/u/devcoder)\
**Post date:** [January 4, 2025, 3:36pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/3 "2025-01-04T15:36:18Z")

</div>

Hey,

Thanks for replying, when I try adding a physics body to an item inside a container the physics body shows up in the top left of the screen rather than on the sprite in question.

Also as I need multiple physics bodies I assume (backboard and either side of the hoop) what’s the best way to do that?

Zones look like the way to go for scoring, though can they be setup to only trigger from one side? E.g just the top?

Thanks

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 4, 2025, 3:39pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/4 "2025-01-04T15:39:10Z")

</div>

Are you using Arcade Physics or Matter Physics?

---

<div class="post-metadata">

**Author:** ![devcoder](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@devcoder](https://phaser.discourse.group/u/devcoder)\
**Post date:** [January 4, 2025, 4:12pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/5 "2025-01-04T16:12:03Z")

</div>

Arcade

---

<div class="post-metadata">

**Author:** ![devcoder](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@devcoder](https://phaser.discourse.group/u/devcoder)\
**Post date:** [January 4, 2025, 4:58pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/6 "2025-01-04T16:58:48Z")

</div>

This is the code I have at the moment

```javascript
export default class Game extends Phaser.Scene {
  preload() {
    this.load.image("ball", "/hoops/ball.png");
    this.load.image("net", "/hoops/net.png");
    this.floor = this.add
      .rectangle(0, this.scale.height - 50, 320, 50, "0000ff")
      .setOrigin(0, 0);
  }
  create() {
    this.physics.add.existing(this.floor, true);
    this.player = this.physics.add
      .image(160, 100, "ball")
      .setVelocity(0, 200)
      .setBounce(1, 0.75)
      .setDamping(true);
    this.container = this.add.container(0, this.scale.height / 2);
    this.physics.add.collider(this.player, this.floor);
    this.player.setDrag(0.75, 0.75);
    this.player.setFriction(0.75);
    this.net = this.physics.add
      .staticImage(0, this.scale.height / 2, "net")
      .setOrigin(0, 0);
    this.s1 = this.physics.add
      .staticImage(0, this.scale.height / 2)
      .setOrigin(0, 0);
    this.physics.world.add(this.s1);
    this.net.body.setCircle(20);

    this.s1.setBounce(1);
    this.s1.setDebugBodyColor(0xffff00);
    this.physics.add.collider(this.player, this.s1.body);
    /* const l = Object.create({
      x: 0,
      y: 0,
      width: 64,
      height: 64,
      displayOriginX: 0,
      displayOriginY: 0,
    });*/
    //this.s1 = this.physics.world.enable(l, Phaser.Physics.Arcade.STATIC_BODY);
    // this.s1.setDebugBodyColor(0xffff00);
    //this.container.add(this.net);
    // this.container.add(this.s1);
  }

  update() {
    if (this.player.x < 0) {
      this.player.setX(this.scale.width);
    }

    this.input.on(
      "pointerdown",
      function (pointer) {
        this.player.setVelocityY(-200);
        this.player.setVelocityX(-60);
      },
      this
    );
  }
}

```

You can see some commented code where I’ve tried different things. When I add stuff to the container instead the debug lines appear much further away. Note when I add the items to the container I set the child items positions to 0,0 and position the container

and here’s a sample from my config

```javascript
zoom: 2,
      pixelArt: true,
      type: Phaser.AUTO, // automatically detect browser WebGL suppor
      dom: {
        createContainer: true,
      },

      physics: {
        default: "arcade",
        arcade: {
          gravity: { y: 350 },
          debug: true,
        },

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 4, 2025, 5:07pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/7 "2025-01-04T17:07:52Z")

</div>

> [@devcoder](#):
>
> When I add stuff to the container instead the debug lines appear much further away.

For static bodies I think you’ll have to do, e.g.,

```
this.net.body.updateFromGameObject()

```

after you add it to a container. Static bodies never automatically sync to their game object’s position.

Here’s what I was thinking with Zones:

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

---

<div class="post-metadata">

**Author:** ![devcoder](https://avatars.discourse-cdn.com/v4/letter/d/a9adbd/32.png) [@devcoder](https://phaser.discourse.group/u/devcoder)\
**Post date:** [January 4, 2025, 7:25pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/8 "2025-01-04T19:25:30Z")

</div>

Thanks so much for this, I’ll go over it and see how I get on

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 4, 2025, 7:32pm UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/9 "2025-01-04T19:32:35Z")

</div>

You don’t need to use a Zone for the ball, but I did that in the example because I didn’t have a good sprite.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 30, 2025, 12:06am UTC](https://phaser.discourse.group/t/how-to-set-up-complex-colliders/15037/10 "2025-01-30T00:06:16Z")

</div>

#### Basketball with damping (drag)

[https://codepen.io/samme/pen/vEBWvBV](https://codepen.io/samme/pen/vEBWvBV)