MC_CatMaster

Collisions not detecting with Phaser

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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()`

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.