detect collision with sprites in Container

[Petar]

I am creating the following container with multiple sprites:

 

Quote

    const rectangles = new PIXI.Container();
    const interactionManager = new PIXI.interaction.InteractionManager(stage, renderer.view);

    rectanglesToRender.forEach((rectangle, i) => {
      window['rectangle'+i] = new PIXI.Sprite(texture);
      window['rectangle'+i].width = note.width;
      window['rectangle'+i].position.x = rectangle.positionX;
      window['rectangle'+i].position.y = rectangle.positionY;
      window['rectangle'+i].interactive = true;
      window['rectangle'+i].hitArea = new PIXI.Rectangle(0, 0, 5, 400);
      rectangles.addChild(window['rectangle'+i]);
    });

    stage.addChild(rectangles);

And I am trying to figure out how to detect when any sprite has collided with a specific point on the stage:

 

Quote

    const update = () => {
      const currentTime = new Date().getTime();
      const delta = (currentTime-lastTime)/1000;
      rectangles.position.x -= VELOCITY*delta;
      // update rectangle position
      rectanglesBeginning = rectangles.position.x;
      rectanglesEnd = rectanglesBeginning + rectangles.width;

      // check if line is within rectangle
      const point = new PIXI.Point(0, 300);
      const hit = interactionManager.hitTest(point);
      console.log(hit);

      renderer.render(stage);
      requestAnimationFrame(update);
      lastTime = currentTime;
    };

    requestAnimationFrame(update);

  };

I've done a lot of Googling and a lot of experimentation, and I have not been able to figure it out.

Any help is all is very much appreciated.

[ivan.popelyshev]

I really hope that we'll change pixi the way you specified. Tell me if you have a time machine.

Right now InteractionManager is already created inside renderer and you dont have to create it. Constructor does not accept stage and canvas as two params  https://github.com/pixijs/pixi.js/blob/dev/src/interaction/InteractionManager.js#L43

The instance you're looking for is stored inside "renderer.plugins.interaction". You can use "renderer.plugins.interaction.hitTest"

[Petar]

Man.. I wasn't trying to tell anyone how to code PIXI.. it's just that I'm very poor at understanding how to use it very well, so I just thought that the easiest way to ask for help would be to show everyone what it is that I am trying to do, and how I am trying to do it... I'm just not very good at understanding the docs, no matter how much I try to read them... please don't take it the wrong way, and thanks for your suggestions.

[Petar]

I hope that we did not start off on the wrong foot, I really appreciate PIXI and the people who have made it possible. 

Here is what I am trying to do now:

 

Quote

    const texture = new PIXI.RenderTexture(renderer);
    const rectangle = new Rectangle(1000);
    renderer.render(rectangle, texture)

    const rectangles = new PIXI.Container();

   rectanglesToRender.forEach((rectangle, i) => {
      window['rectangle'+i] = new PIXI.Sprite(texture);
      window['rectangle'+i].width = rectangle.width;
      window['rectangle'+i].position.x = rectangle.positionX;
      window['rectangle'+i].position.y = rectangle.positionY;
      window['rectangle'+i].interactive = true;
      window['rectangle'+i].hitArea = new PIXI.Rectangle(0, 0, rectangle.width, 10);
      rectangles.addChild(window['rectangle'+i]);
    });

    stage.addChild(rectangles);

    let lastTime = new Date().getTime();
    let rectanglesBeginning;
    let rectanglesEnd;
    const update = () => {
      const currentTime = new Date().getTime();
      const delta = (currentTime-lastTime)/1000;
      rectangles.position.x -= VELOCITY*delta;
      // update rectangle position
      rectanglesBeginning = rectangles.position.x;
      rectanglesEnd = rectanglesBeginning + rectangles.width;

      // collision test
      const point = new PIXI.Point(1, 305);
      const test = renderer.plugins.interaction.hitTest(point);
      console.log(test);

      renderer.render(stage);
      requestAnimationFrame(update);
      lastTime = currentTime;
    };

    requestAnimationFrame(update);

  };

I'm trying to test for any child rectangle that is hitting the PIXI.point that I have created, but my console.log is simply returning a constant stream of nulls.

[ivan.popelyshev]

I'm not joking. InteractionManager is supposed to have a stage and canvas as input, but, currently in PIXI its a "plugin" to a renderer, which adds some difficulty. Your interpretation is exactly how I see it in future  

Your code looks ok, but I cant just run it and test, because you havent provide "rectanglesToRender" input. Can you make a fiddle (https://jsfiddle.net/)?

Btw, using "window" here is strange for most people. I understand what do you want to do, and I think you cant create it in local variable and put in the window in last line , like "var rect = ... ; window['rectangle'+i] = rect"