Collisions not detecting with Phaser

[MC_CatMaster]

I've started using the Coding with Chrome extension to code Phaser on my Chromebook.

I've added gravity and I'm trying to detect when things collide using physics.arcade.overlap(), but the function I provide for when it collides is never called.

What I do is I make a matrix of objects and then detect collisions between each of them and the player. I think there's a better way to do this with groups but I'll look into that later.

Here's my code:

var player, map, mapObjs;

map = [['b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b'],
          ['b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b'],
          ['b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b'],
          ['b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b'],
          ['b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b'],
          ['b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b'],
          ['b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b'],
          ['b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b', 'b']];
mapObjs = new Array(map[0].length);

var game = new Phaser.Game(768, 768, Phaser.AUTO, 'Unnamed Game');
game.state.add('main', {
  preload: function(e) {
    game.load.image('background', '{{ file:background.png }}');
    game.load.image('player', '{{ file:download.jpeg }}');
    game.load.image('block', '{{ file:Brick_Block.png }}');
  },
  create: function(e) {
    if (navigator.userAgent == 'CwC sandbox') {game.time.desiredFps = 30;}
    var backgroundImage = game.add.image(0, 0, 'background');
    backgroundImage.width = 768;
    backgroundImage.height = 768;
    
    player = game.add.sprite(50, 100, 'player');
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.physics.arcade.enable(player);
    player.body.gravity.y = 9;
    player.body.bounce.y = 0.1;
    player.width = 100;
    player.height = 100;
    player.body.collideWorldBounds = true;
    
    for(var i = 0; i < map[0].length; i++) {
   	  mapObjs[i] = [];
      for(var j = 0; j < map.length; j++) {
        mapObjs[i][j] = game.add.sprite(32*i, 300+32*j, 'block');
        mapObjs[i][j].width = 32;
        mapObjs[i][j].height = 32;
      }
    }
  },
  input_: function(e) {
  },
  update: function(e) {
    this.input_(e);
    for(var i = 0; i < mapObjs.length; i++) {
      for(var j = 0; j < mapObjs[i].length; j++) {
        game.physics.arcade.overlap(player, mapObjs[i][j], function(object1, object2) {
          console.log('hi'); // This never happens for some reason even thought the objects are visibly overlapping
          player.body.gravity.y = 0;
          player.body.accelerationY = 20;
        }, null, this);
      }
    }
  },
  render: function(e) {
  },
}, true);
game.state.start('main');

The '{{ file:background.png }}' is just the way that the editor references images so you can ignore it.

[Greenmoonbase]

Try change

game.physics.arcade.overlap

to

game.physics.add.overlap

 

[MC_CatMaster]

22 hours ago, Greenmoonbase said:

Try change

game.physics.arcade.overlap

to

game.physics.add.overlap

 

game.physics.add

does not exist. You have to use arcade to specify which physics engine to use.

[B3L7]

It looks like your blocks don't have bodies. Try:

for(var j = 0; j < map.length; j++) {
        mapObjs[i][j] = game.physics.add.sprite(32*i, 300+32*j, 'block');
        mapObjs[i][j].width = 32;
        mapObjs[i][j].height = 32;
}

 

Of course I think you are doing a lot of extra work (not to mention an unnecessary loop in your update method) by not using groups:

Group Example

[MC_CatMaster]

2 hours ago, B3L7 said:

It looks like your blocks don't have bodies. Try:

for(var j = 0; j < map.length; j++) {
        mapObjs[i][j] = game.physics.add.sprite(32*i, 300+32*j, 'block');
        mapObjs[i][j].width = 32;
        mapObjs[i][j].height = 32;
}

 

Of course I think you are doing a lot of extra work (not to mention an unnecessary loop in your update method) by not using groups:

Group Example

That’s the same code I already have. And I will switch to groups later. At this point I just want to get this working so I know what’s going wrong.

[B3L7]

19 minutes ago, MC_CatMaster said:

That’s the same code I already have. And I will switch to groups later. At this point I just want to get this working so I know what’s going wrong.

It's not the same code. Notice game.physics.add.sprite as opposed to what you have: game.add.sprite. Big difference.

You could of course use game.add.sprite and add a body on as a separate line.

 

Either way in order for two game objects to collide they either need to have physics bodies or be apart of a physics group.

[MC_CatMaster]

On 12/12/2018 at 3:18 PM, B3L7 said:

It's not the same code. Notice game.physics.add.sprite as opposed to what you have: game.add.sprite. Big difference.

You could of course use game.add.sprite and add a body on as a separate line.

 

Either way in order for two game objects to collide they either need to have physics bodies or be apart of a physics group.

I tried doing these

game.physics.add.sprite(32*i, 300+32*j, 'block');
game.physics.add(mapObjs[i][j]);

But neither worked. `game.physics.add()` isn't a method and neither is `game.physics.add.sprite()`

[B3L7]

physics.add.sprite is definitely a method:

https://labs.phaser.io/edit.html?src=src\physics\arcade\simple body.js

 

I think the problem is you are calling the physics system through the game namespace instead of the scene. Try this.physics instead of game.physics

 

[MC_CatMaster]

1 hour ago, B3L7 said:

physics.add.sprite is definitely a method:

https://labs.phaser.io/edit.html?src=src\physics\arcade\simple body.js

 

I think the problem is you are calling the physics system through the game namespace instead of the scene. Try this.physics instead of game.physics

 

this.physics.add.sprite(32*i, 300+32*j, 'block'); didn't work either. It says: Cannot read property 'sprite' of undefined.

Is this something that changed between phaser versions? There's a possibility I could be using a different version.

[B3L7]

9 minutes ago, MC_CatMaster said:

this.physics.add.sprite(32*i, 300+32*j, 'block'); didn't work either. It says: Cannot read property 'sprite' of undefined.

Is this something that changed between phaser versions? There's a possibility I could be using a different version.

 

Are you using Phaser 2 or 3? You do not want to use any Phaser 2 tutorials or documentation when writing Phaser 3 games. This can be tricky because for years people wrote tutorials that simply referenced Phaser so there is a lot out there that is actually for Phaser 2.

 

Here are some good references for 3:

https://phaser.io/tutorials/getting-started-phaser3

https://phaser.io/tutorials/making-your-first-phaser-3-game

https://labs.phaser.io/

https://photonstorm.github.io/phaser3-docs/

 

As well nkholski's repo was one of the early Phaser 3 projects that lead the way:

https://github.com/nkholski/phaser3-es6-webpack

and I always recommend my repo as an example ?:

https://github.com/B3L7/phaser3-tilemap-pack

 

[MC_CatMaster]

On 12/14/2018 at 11:28 AM, B3L7 said:

 

Are you using Phaser 2 or 3? You do not want to use any Phaser 2 tutorials or documentation when writing Phaser 3 games. This can be tricky because for years people wrote tutorials that simply referenced Phaser so there is a lot out there that is actually for Phaser 2.

 

Here are some good references for 3:

https://phaser.io/tutorials/getting-started-phaser3

https://phaser.io/tutorials/making-your-first-phaser-3-game

https://labs.phaser.io/

https://photonstorm.github.io/phaser3-docs/

 

As well nkholski's repo was one of the early Phaser 3 projects that lead the way:

https://github.com/nkholski/phaser3-es6-webpack

and I always recommend my repo as an example ?:

https://github.com/B3L7/phaser3-tilemap-pack

 

How can I tell which version I have? The editor I'm using doesn't seem to list it anywhere. Can I do it programmatically?

[B3L7]

The browser's console should show a banner saying the Phaser version.

 

What editor are you using? That may provide a clue.

[MC_CatMaster]

51 minutes ago, B3L7 said:

The browser's console should show a banner saying the Phaser version.

 

What editor are you using? That may provide a clue.

I'm using Coding with Chrome on my school Chromebook. https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed?hl=en-US

I checked the console and it says Phaser CE v2.11.0. I didn't really notice that before.

What do you recommend as a resource for Phaser 2?

[B3L7]

2 hours ago, MC_CatMaster said:

I'm using Coding with Chrome on my school Chromebook. https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed?hl=en-US

I checked the console and it says Phaser CE v2.11.0. I didn't really notice that before.

What do you recommend as a resource for Phaser 2?

For Phaser 2:

http://phaser.io/tutorials/making-your-first-phaser-2-game

https://phaser.io/examples

https://phaser.io/docs/2.6.2/index

https://phaser.discourse.group/c/phaser2