Collision detection not working, and I'm not sure why

[maxshuty]

 

For simplicity I have a game and I'm trying to get my car to hit a wall. I've tried searching and I've tried several things as you'll see below, I'm not sure why I can't get it to work.

Here is the code in my create function:

        create: function () {
            game.physics.startSystem(Phaser.Physics.ARCADE);
    
            this.carSprite = game.add.sprite(game.world.centerX, game.world.centerY, 'car');
            game.physics.arcade.enable(this.carSprite);
        this.timer = game.time.events.loop(300,
            this.addRoad, this);
        }

Then in my update function:

        update: function () {
            game.physics.arcade.overlap(this.carSprite, this.wallSprite, this.scoring, null, this);
    }

I am creating the wallSprite like this:

     addOneRoadSection: function (x, y) {
    this.scoreCalculator += 1;
            if (this.scoreCalculator == 10) {
                this.scoreCalculator = 0;
    
                this.wallSprite = game.add.sprite(x + 100, y, 'wall');
                game.physics.arcade.enable(this.wallSprite);
                this.wallAnimation = this.wallSprite .animations.add('wallAnimation');
                this.wallSprite.animations.play('wallAnimation', 30, true);
                this.wallSprite.body.velocity.y = 100;
                this.wallSprite.checkWorldBounds = true;
                this.wallSprite.outOfBoundsKill = true;
            }
    }

I am calling addOneRoadSection like this:

        addRoad: function () {
            this.addOneRoadSection(this.xValue, 0);
    }

addRoad is being called in create using this.timer` 

So in summary what this is doing is that when the scoreCalculator is ten, it add's a wall. That works fine, the wall is animated fine, but the collision detection does not work at all.

I tried moving the code inside of the if statement to my create function and it works fine with collision detection (but other things break so I can't keep it there). What am I doing wrong? I have a suspicion that this.wallSprite may be referring to something else at the time it is called in update?

 

 

[maxshuty]

So I figured this out. What was happening was that my initial inclination of me of me creating a new sprite and that over writing the other one was right.

Here is how I solved the issue:

in `create`:

    create: function(){ 
     //Create a wallSprite array
     var wallSprite = [];
    }

Now that I have an array when I add a new `wallSprite` in `addOneRoadSection` I can add the physics to each sprite like this:

 

       addOneRoadSection: function (x, y) {
    
                this.wallSprite.push(game.add.sprite(x + 100, y, 'wall'));
                game.physics.arcade.enable(this.wallSprite[this.wallSprite.length -1]);
                this.wallAnimation = this.wallSprite[this.wallSprite.length - 1].animations.add('wallAnimation');
                this.wallSprite[this.wallSprite.length - 1].animations.play('wallAnimation', 30, true);
                this.wallSprite[this.wallSprite.length -1].body.velocity.y = 100;
                this.wallSprite[this.wallSprite.length - 1].checkWorldBounds = true;
                this.wallSprite[this.wallSprite.length -1].outOfBoundsKill = true;
    }

Finally in `update` I just need to do this:

        for (var i = 0; i < this.wallSprite.length; i++) {
            game.physics.arcade.overlap(this.car, this.wallSprite, this.scoring, null, this);
        }

Voila - collision detection works for every sprite now. 

[drhayes]

I'm glad you solved this! You can also use a group instead of an Array. That will give you utility methods like getFirstAlive, which you can use for object pooling, which is something I think you'll need as you create lots of walls.