Check if a body is next to another body (but not overlapping)?

[Neighbours]

Is there any decent way to check if two sprites are next to each other and

then call something in Phaser? So sort of like overlaps, but without

actually overlapping.

 

At the moment I've made the sprites' physics bodies a pixel larger on the

side where I need to check if they're next to another sprite, but it's really hacky.

 

 

[lewster32]

The sprite.body.touching object contains information about which sides of a body are colliding with another body. If you check this on collision rather than overlap, I believe you'll get the desired result, as Phaser will handle the separation of the objects accordingly so they don't overlap. If on the other hand your objects never collide (i.e. they brush past one another without intersecting, but you want to still detect the proximity) then maybe you will need to extend your sprite to have another body 1 pixel larger in each direction to use as a 'trigger', and check its body.touching object via the overlap method.

[Neighbours]

They don't really ever collide, and they aren't really affected by gravity either. I'll probably just check it manually, as I tried extending the body with 1 pixel and using overlap, but it seemed to create a few unwanted side effects from time to time. 

 

 

[ragnarok]

You could attach a transparent sprite and use that body for a 'near enough' check:

var myGameState= {        ...create: function () {        ...        this.halo = this.add.sprite(0, 0, 'invisibleBlock'); //invisibleBlock is a 1x1 px transparent png        this.halo.anchor.setTo(0.5, 0.5);        this.player.addChild(this.halo);        this.physics.enable(this.halo, Phaser.Physics.ARCADE);        this.halo.body.setSize(this.player.width +10, this.player.height +10, 0, 0);},update:function () {        ...        this.game.physics.arcade.overlap(this.halo, this.enemies, this.checkNear, function(){}, this);}checkNear:function(chkObject){  console.log(chkObject, 'is near');}

[lewster32]

This is likely the approach I'd use too. For the record, you don't have to specify a key or texture to make a sprite - it can just have an x and y position specified, and the game will run faster because it's not having to compose and render the sprite.

[Neighbours]

This is likely the approach I'd use too. For the record, you don't have to specify a key or texture to make a sprite - it can just have an x and y position specified, and the game will run faster because it's not having to compose and render the sprite.

 

Do you mean if I don't actually have anything to render but if I just wanted to use a sprite for collision? Wouldn't it be easier to use a rectangle or something then? I do need to show the sprites though (as squares), which is what I'm doing now. 

[lewster32]

An empty sprite isn't (to my knowledge) rendered, but still can have a body which will allow you to do all of the normal checks to it. You must manually set the body's size via body.setSize but otherwise it's the easiest way to create a 'trigger'. Having a 1x1 pixel transparent .png is unnecessary and in fact will reduce performance slightly, unless you set sprite.visible = false. The former method of just leaving out the key is cleaner, and if you need to visualise the sprite for debugging, you can still use game.debug.body to see the collision box.

[Elgan]

i think the best way is to use some maths, or a rectangle, rather than an empty sprite.

 

im terrible at maths but you could use dot vector to get if its on the left, right, up or down. I have never done this in 2d, but can try and translate from 3d.

DO you need that?

 

or you could simply use distance?

var pointA = obja.body.centre.clone();var pointB = objb.body.centre.clone();var dist = pointA .distance(pointB); //this may be wrong, may need like distance A- Bvar thresh_hold = 10;//leave only the distance on the outer sidedist -= obja.width / 2;dist -= objb.width / 2;//assume its squareif(dist  <= thresh_hold) // are they less 10 units apart {true}

[ragnarok]

For a game of mine I have done something smiliar, with (mostly) in-built functions:

function create(){   ...   this.player.anchor.setTo(0.5, 0.5);   this.enemies = this.add.group();           for (var i = 0; i < 5; i++) {      this.enemy = this.add.sprite(50*i , 50*i, 'zombine');      this.enemy.anchor.setTo(0.5, 0.5);      this.enemy.noticeRange=300;      this.enemy.noticeReaction='Shout Alarm';      this.game.physics.enable(this.enemy, Phaser.Physics.ARCADE);      this.enemies.add(this.enemy);      }  }function update() {   this.enemies.forEach(checkDistance, this);}function checkDistance(entity) {        if (this.game.physics.arcade.distanceBetween(this.player, entity) < entity.noticeRange) {            console.log(this.entity.noticeReaction || "I don't know hat to do");        }}

However, not sure which (distanceBetween vs. overlap vs. DIY) is easier on the cpu.