how to set up complex colliders

Phaser 3
1

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

Thanks

2

:wave:

Arcade Physics bodies inside containers should work OK.

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

3

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

4

Are you using Arcade Physics or Matter Physics?

5

Arcade

6

This is the code I have at the moment

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

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

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

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:

8

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

9

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.