Is it possible to identify which of the lines the rectangle touches using intersections?

Hello!
This is my first post, first of all congratulations to the phaser team, I decided to enter the world of games using phaser which from what I read is very versatile opening up a world of applying ideas in games, my knowledge in this area is Adobe Flash - Action Script 3, graphic design, some Java Script.

***** My doubts *****
I have 3 lines (line1, line2 and line3) that intersect between them, I also have 1 rectangle (rect1) that goes down the vertical line, although I need to identify which of the lines he intercepted,
I use Phaser.Geom.Intersects.LineToRectangle (); to detect interceptions without problem but how to identify which of the lines the rectangle has intercepted.
thanks in advance.

Hi @FlashDroid , I have a solution, see of it works for you.
The method GetLineToRectangle(line, rect [, out]) passes three arguments. Now you can do one of 2 things, with the line and rect objects.

  1. From these arguments you can find the which line the rectangle intersects with based on its position.
  2. You can store the name in each line and use that to identify the lines.

To Store the name in line object, do one of the following:

  1. Just add it to the line object

     let line = Phaser.Geom.Line(x1, y1, x2, y2);
     line.name = "line1"
    
  2. Extend your own Line class from the existing one

     Class Line extends from Phaser.Geom.Line{
         public name: string;
         constructor(x1, y1,x2,y2){
             super(x1,y1, x2,y2);
         }
     }
    

Update :

The “name” attribute is present by default in almost all the GameObject instances that can be created in Phaser 3. This name attribute is for the coder’s use and is not internally used by Phaser. So you don’t have to extend a separate class just to add the name attribute, in those cases.

Say if you are creating a Non GameObject instance like Phaser.Geom.Line, those do not have name attribute built in, so in those cases you can extend them into a separate class.

But then again you can also create the same Line instance as a GameObject.
Example: scene.add.line( x, y, x1, y1, x2, y2, strokeColor, strokeAlpha)

1 Like

Hi @123survesh, First of all thanks for your quick reply, I didn’t answer right away because I had to learn more javascript Es6 and phaser in order to move forward.

I read the How to extend a sprite in Phaser 3 By William
Based on that i created a new class extended from the base line class and put that in my js file like you can see below.
The console log don’t report any error but the line is not generate visualmente, whats hapening? can some one help me.

var config = {
   width: 400,
   height: 300,
   type: Phaser.AUTO,
   parent: 'phaser-example',
   scene: {
      create: create
   }
};
var game = new Phaser.Game(config);

var graphics;

// Begin extend Geom Line
class NewLine extends Phaser.Geom.Line{
constructor(config, name) {
    super(config.scene, config.x1, config.y1, config.x2, config.y2);
    this.name = name;
    // Add the class to the scene
    config.scene.add.existing(this);
}
doName() {
    return super.doName()  + 'in' + this.name;
}
} // END extended Geom Line

function create () {       
    graphics = this.add.graphics( {
        lineStyle: { width: 2, color: 0x0000ff },
    });

    // lineA from my extended class NewLine
    let lineA = new NewLine({
        scene: this,
        x1: 10,
        y1: 50,
        x2: 200,
        y2:300
    });
    // lineA rendering
    graphics.strokeLineShape(lineA);
}

What’s wrong, graphics?

I don’t think you need to extend a class for this, but if you do, the super() arguments need to match the constructor: https://photonstorm.github.io/phaser3-docs/Phaser.Geom.Line.html#Line

Hi @samme
My goal is to identify which of the lines is intercepted by a rectangular object,
If I don’t need to extend the Class Line what can I do to identify by name which of the lines I intersect other than by their x, y coordinates?

Oh, that’s fine, but the super() call should be

super(config.x1, config.y1, config.x2, config.y2);

Maybe I don’t understand, but can you just do

if (Phaser.Geom.Intersects.LineToRectangle(line1, rect) {/* … */} 
if (Phaser.Geom.Intersects.LineToRectangle(line2, rect) {/* … */} 
if (Phaser.Geom.Intersects.LineToRectangle(line3, rect) {/* … */} 
1 Like

Hi @FlashDroid,

As @samme pointed out, config.scene is not required in your call to Phaser.Geom.Line’s super(). Removing that should make your line graphic work.

Also as @samme pointed out you dont need a name attribute to uniquely identify your line if you are using Phaser.Geom.Intersects.LineToRectangle. Since you use that function with a specific line object (say line1), you could just use that object to identify it uniquely.