Sign in to follow this  
lars

Collision between one and multiple object

Recommended Posts

Hello Everybody

Trying to make a collision detection between two object.

I have one object there is going to catch another object. Theres a new obejct to catcht every 10 seconds, and every thing goes fine when i catchs one object at time. But when theres multiple object on stage, something going wrong:

 

Heres what im doing:

Creating a "collector":

this.spr_Con = new PIXI.Container();
this.scene.addChild(this.spr_Con);

//Then creating the hitarea

  this.spr_hitArea = new PIXI.Graphics();
                this.spr_hitArea.beginFill("0xffffff");
                this.spr_hitArea.alpha= 0.5;
                this.spr_hitArea.drawRect(-20, 0, 40, 40);
                this.spr_Con.addChild(this.spr_hitArea);


 

Then creating some objects to collide with:

  this.setNinja = setInterval(() => {


 this.spr_ninjaCon = new PIXI.Container();
 this.scene.addChild(this.spr_ninjaCon);

this.ninja_hitArea = new PIXI.Graphics();
                        this.ninja_hitArea.beginFill("0x000000");
                        this.ninja_hitArea.alpha= 0.5;
                        this.ninja_hitArea.drawRect(-20, -20, 40, 40);
                        this.spr_ninjaCon.addChild(this.ninja_hitArea);


}, 10); //END interval

So every 10 seconds i spawn a new object. Then I have a simple hittest class:

 

export default class Hittest {


    constructor() {
   
    }


    checkme(a,b){

        var ab = a.getBounds();
        var bb = b.getBounds();
        return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;

    }

};

 

And check for intersection:

  this.app.ticker.add(() => {

 if (  this.collectNinjas.length > 0) { // is there any object

   if (this.ht.checkme(this.spr_hitArea, this.ninja_hitArea)) {

console.log('intersection true');

    this.scene.removeChild(this.spr_ninjaCon);

}
}

 }); //End app.ticker

Every things goes fine as long as there is only one object "living" on stage, but as soon I have multiple object on stage it cant allways recognize the intersection. Is it my Hittest.js class that fails om multiple object? Hope someone can help me.

Share this post


Link to post
Share on other sites

Sorry. Theres only one comparison. So maybe thats the problem. But how do I compare with multiple object. I tried something like looping through my comparison

 

  this.setNinja = setInterval(() => {


 this.spr_ninjaCon = new PIXI.Container();
 this.scene.addChild(this.spr_ninjaCon);

this.ninja_hitArea = new PIXI.Graphics();
                        this.ninja_hitArea.beginFill("0x000000");
                        this.ninja_hitArea.alpha= 0.5;
                        this.ninja_hitArea.drawRect(-20, -20, 40, 40);
                        this.spr_ninjaCon.addChild(this.ninja_hitArea);

   this.collectNinjas.push(this.spr_ninjaCon); // pushing object into a array

}, 10); //END interval

These are drawn to stage in a interval

And then I tried to compare intersection in a for loop like this:
 
this.app.ticker.add(() => {

 if (  this.collectNinjas.length > 0) { // is there any object


for(let ii = 0; ii < collectNinjas.length; ii++){

   if (this.ht.checkme(this.spr_hitArea, collectNinjas[ii])) {

console.log('intersection true');

    this.scene.removeChild(this.spr_ninjaCon);

}
}
}

 }); //End app.ticker

But that did'nt do it.

 

I will send you a clean working app 🙂

 
31/5000
 
 
 
 
 
 
 
31/5000
 
 
 
 

 

Share this post


Link to post
Share on other sites

Ok solved it, or my college did 🙂

this.collectNinjas.forEach(ninja =>{

                            if (this.ht.checkme(this.spr_hitArea,  ninja )) {

                               
    
                                this.scene.removeChild(ninja);



    
                            }

                        }

Thank you very much for the help Ivan. Super nice to have guys like you around 🙂

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.