setInteractive doesn't play nice with setScale

[carlos-molero]

Hi, I’m trying to create an interaction area for the cursor in a clicker game. The problem is that all my sprites interact with the cursor on click except one. This is my code so far:

this.sprite = this.physics.add.sprite(
      center.x - this.minion.positionModifier.x,
      center.y - this.minion.positionModifier.y,
      this.minion.key
    );
    this.sprite.name = this.minion.key;

    this.sprite
      .setSize(
        this.sprite.width * this.minion.sizeFactor.x,
        this.sprite.height * this.minion.sizeFactor.y
      )
      .setOffset(
        this.sprite.body.offset.x * this.minion.offsetFactor.x,
        this.sprite.body.offset.y * this.minion.offsetFactor.y
      )
      .setScale(this.minion.scale.x, this.minion.scale.y)
      .setAlpha(0);

    const cursorHitbox = new Geom.Rectangle(
      this.minion.cursorHitbox.x,
      this.minion.cursorHitbox.y,
      this.sprite.width * this.minion.sizeFactor.x,
      this.sprite.height * this.minion.sizeFactor.y
    );

    this.sprite.setInteractive(cursorHitbox, Geom.Rectangle.Contains);

    this.sprite.anims.play(`${this.minion.key}-idle`);

    this.input.enableDebug(this.sprite);

    this.sprite.on('pointerover', () => this.onPointerOver());
    this.sprite.on('pointerout', () => this.onPointerOut());
    this.sprite.on('pointerdown', () => this.onPointerDown(), this);
    this.sprite.on(
      'animationcomplete',
      (anim: Types.Animations.Animation) => this.onAnimationComplete(anim),
      this
    );

    UIUtils.fadeIn(this, [this.sprite]);

This is how sprites are created from this json object:

const MINIONS: Minion[] = [
  {
    key: 'minion01',
    hp: Math.Between(10000, 20000),
    positionModifier: {
      x: 0,
      y: 0,
      healthBar: {
        x: 0,
        y: 0
      }
    },
    offsetFactor: {
      x: 1,
      y: 1.5
    },
    cursorHitbox: {
      x: 215,
      y: 72
    },
    sizeFactor: {
      x: 0.4,
      y: 0.8
    },
    scale: {
      x: 1,
      y: 1
    }
  },
  {
    key: 'minion02',
    hp: Math.Between(10000, 20000),
    positionModifier: {
      x: 0,
      y: 0,
      healthBar: {
        x: 0,
        y: 0
      }
    },
    offsetFactor: {
      x: 1,
      y: 1.5
    },
    cursorHitbox: {
      x: 215,
      y: 72
    },
    sizeFactor: {
      x: 0.4,
      y: 0.8
    },
    scale: {
      x: 1,
      y: 1
    }
  },
  {
    key: 'minion03',
    hp: Math.Between(10000, 20000),
    positionModifier: {
      x: 0,
      y: 0,
      healthBar: {
        x: 0,
        y: 0
      }
    },
    offsetFactor: {
      x: 1,
      y: 1.5
    },
    cursorHitbox: {
      x: 215,
      y: 72
    },
    sizeFactor: {
      x: 0.4,
      y: 0.8
    },
    scale: {
      x: 1,
      y: 1
    }
  },
  {
    key: 'minion04',
    hp: Math.Between(10000, 20000),
    positionModifier: {
      x: 50,
      y: 100,
      healthBar: {
        x: -50,
        y: -100
      }
    },
    offsetFactor: {
      x: 1.3,
      y: 1.9
    },
    cursorHitbox: {
      x: 165,
      y: 275
    },
    sizeFactor: {
      x: 0.5,
      y: 0.4
    },
    scale: {
      x: 5,
      y: 5
    }
  }
];

The last minion won’t react to clicks, the others work perfectly, it’s the only one which is scaled.

First screenshot: Sprite which reacts to pointer events.
Second screenshot: Sprite which won’t react (scaled).

[samme]

Try removing this.sprite.setSize(…) first.

What does sizeFactor represent?

[carlos-molero]

Thanks Samme, will try it tonight.

sizeFactor is probably an incorrect way of naming the multiply value I use in each sprite to adjust the bodybox to it

I’m relatively new around here! Thanks again

[carlos-molero]

Ok, I tried to remove setSize and no luck. I read that the problem is that the rectangle doesn’t scale with the sprite but I don’t know why it should be a problem since I’m using a correct size for it. It’s like is overlaping.