Rectangle.ContainsPoint is not working for me

Phaser 3
1

I’m drawing a selection box around a circle and when the circle is inside the box, the console message should be “true” but it always returns false… not sure what I am doing wrong here.

I’ve already tried looking at the Contains Rect (https://phaser.io/examples/v3/view/geom/circle/contains-rect) example.

Very new to this so feel free to give me any tips in terms of how my code is structured…

var config = { 
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: {
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

var graphicsSelectionBoxTemp 
var graphicsSelectionBox 
var graphicsCircle

function create () {
    var that = this
    
    this.input.on('pointerdown', function(pointer) {
        pointerStartX = pointer.worldX;
        pointerStartY = pointer.worldY;
    })

    graphicsCircle = this.add.graphics({
        fillStyle: {
            color: 0x00ff00
        }
    });

    circle = new Phaser.Geom.Circle(400, 300, 10);

    this.input.on('pointerup', function(pointer) {
        pointerEndX = pointer.worldX
        pointerEndY = pointer.worldY

        selectionBox = new Phaser.Geom.Rectangle(pointerStartX, pointerStartY, pointerEndX - pointerStartX, pointerEndY - pointerStartY);

        graphicsSelectionBox = that.add.graphics({
        lineStyle: { 
            width: 1,
            color: 0x00ff00,
            alpha: 1
        }
        });
        graphicsSelectionBox.strokeRectShape(selectionBox);

        console.log(Phaser.Geom.Rectangle.ContainsPoint(selectionBox, circle))
    })
}

function update() {
    var pointer = this.input.activePointer;

    graphicsCircle.fillCircleShape(circle);

    if (pointer.isDown) {

        if(graphicsSelectionBoxTemp){
        graphicsSelectionBoxTemp.clear()
        }
        if(graphicsSelectionBox) {
        graphicsSelectionBox.clear()
        }
        selectionBoxTemp = new Phaser.Geom.Rectangle(pointerStartX, pointerStartY, pointer.worldX - pointerStartX, pointer.worldY - pointerStartY);
        graphicsSelectionBoxTemp = this.add.graphics({
        lineStyle: { 
            width: 1,
            color: 0x00ff00,
            alpha: 0.5
        }
        });

        graphicsSelectionBoxTemp.strokeRectShape(selectionBoxTemp);
    }
}
2

I’ve updated the code and now it does work but only if the mouse input starts above and to the left of the circle…

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create
  }
};

var game = new Phaser.Game(config);
var graphicsCircle 

var graphicsCircle
var circle

var graphicsSelectionBox 
var selectionBox

var graphicsSelectionBoxTemp
var selectionBoxTemp

var text1
var text2
var text3

var pointerStartX
var pointerStartY

var pointer

function preload () {
}

function create () {

  var that = this
  var draw = false;
  
  pointer = this.input.activePointer;

  text1 = this.add.text(10, 10, '', { fill: '#00ff00' });
  text2 = this.add.text(500, 10, '', { fill: '#00ff00' });
  text3 = this.add.text(10, 100, '', { fill: '#00ff00' });
  text4 = this.add.text(10, 150, '', { fill: '#00ff00' });

  graphicsSelectionBox = that.add.graphics({
    lineStyle: { 
      width: 1,
      color: 0x00ff00,
      alpha: 1
    }
  });

  graphicsSelectionBoxTemp = this.add.graphics({
    lineStyle: { 
      width: 1,
      color: 0x00ff00,
      alpha: 0.4
    }
  });


  graphicsCircle = this.add.graphics({
    fillStyle: {
      color: 0x00ff00
    }
  });

  this.input.mouse.disableContextMenu();

  this.input.on('pointerdown', function(pointer) {
    pointerStartX = pointer.worldX;
    pointerStartY = pointer.worldY;
    
    draw = true;

    text3.setText([
      'x start: ' + pointerStartX,
      'y start: ' + pointerStartY
    ]);

    text4.setText([
      'x end: -',
      'y end: -'
    ]);


  })

  this.input.on('pointermove', function(pointer) {
    if (draw) {
      graphicsSelectionBox.clear()
      graphicsSelectionBoxTemp.clear()
      selectionBoxTemp = new Phaser.Geom.Rectangle(pointer.downX, pointer.downY, pointer.x - pointer.downX, pointer.y - pointer.downY);
      graphicsSelectionBoxTemp.strokeRectShape(selectionBoxTemp);
    }

    text1.setText([
      'x: ' + pointer.worldX,
      'y: ' + pointer.worldY,
      'isDown: ' + pointer.isDown
    ]);

  })

  this.input.on('pointerup', function (pointer) {
    pointerEndX = pointer.worldX;
    pointerEndY = pointer.worldY;

    draw = false;

    graphicsSelectionBoxTemp.clear()

    selectionBox = new Phaser.Geom.Rectangle(pointer.downX, pointer.downY, pointer.x - pointer.downX, pointer.y - pointer.downY);
    graphicsSelectionBox.strokeRectShape(selectionBox);
    graphicsCircle.clear();

    if (Phaser.Geom.Rectangle.ContainsPoint(selectionBox, circle)) {
      graphicsCircle = that.add.graphics({
        fillStyle: {
          color: 0xbdff00
        }
      });
      graphicsCircle.fillCircleShape(circle);
    } else {
      graphicsCircle = that.add.graphics({
        fillStyle: {
          color: 0x00ff00
        }
      });
      graphicsCircle.fillCircleShape(circle);
    }

    text4.setText([
      'x end: ' + pointerEndX,
      'y end: ' + pointerEndY
    ]);

    if (pointer.leftButtonReleased()) {
      text2.setText('Left Button was released');
    }
    else if (pointer.rightButtonReleased()) {
      text2.setText('Right Button was released');
    }
    else if (pointer.middleButtonReleased()) {
      text2.setText('Middle Button was released');
    }
    else if (pointer.backButtonReleased()) {
      text2.setText('Back Button was released');
    }
    else if (pointer.forwardButtonReleased()) {
      text2.setText('Forward Button was released');
    }
  });

  circle = new Phaser.Geom.Circle(400, 300, 10);
  graphicsCircle.fillCircleShape(circle);

}
3

Hi @DavidChan,
Tested. Your code works fine for me. True when circle is in rectangle, false when not.

4

I just realized the issue is it only works if you start boxing up and to the left, it does not work if your mouse is to the right or below the circle.

5

Here’s one way:

Phaser.Geom.Rectangle.FromPoints(
  [
    { x: pointerStartX, y: pointerStartY },
    { x: pointer.worldX, y: pointer.worldY }
  ],
  RECT
);
6

I think you’ll want to avoid recreating graphicsSelectionBoxTemp in update(); instead clear it and redraw.