sprite overlap of different shapes without physics arcade

[bblef91]

Hi everyone,

I wanted to test if two sprites are overlaping withouth physics2d. Sprites are of a different shape.

I found this function in phaser docs. If I understand right, it should check if first sprite overlaps given object, in my case another sprite.
Phaser.Sprite.overlap(displayObject) : boolean;

I use this like

if (player1.overlap(player2)) ... else ...

where both players are sprites. Am I using this wrong, or this function is deprecated because I get an error that this function does not exist.

If is possible to check overlap with this function please tell, because i made a project without physics2d and i don't want to make a lot of changes now.

Thanks ahead.

[lukaMis]

This should help.

[bblef91]

2 hours ago, lukaMis said:

This should help.

This is how it should work in the background, but sadly it's only for rectangle shaped sprites. Probably if something is rotated, or of a different shape it wouldn't work as it should. Since no one else has been replying, my guess is I have to use physics and bodies  thanks for reply anyway  

[fire7side]

It would be easier to do it with a physics engine.  Without it, you could use polygons to approx the shape and use sat.js, but it would change during rotation, so you would have to get the point position of th e rotated polygon.

[bblef91]

Yeah, but what about the function I mentioned earlier?

If I decide to use physics do I have to change a lot of code for it to work?

[fire7side]

No, you can't use overlap from the phaser library.  You would have to add a collision library for polygons called sat.js and you would still need to compute the new point positions of the polygon during rotation.  Yeah, your code will be different because you use force to move things and assign friction and things.  It can be really annoying for things like jumping games because they don't use natural gravity.  When it works, it's all right.  When it doesn't, it drives you nuts.   Personally, I hate it and think it ruins games.  I don't even like arcade physics.  If you make a game like angry birds or something, it's all right.  Actually, it probably won't be that much different from arcade physics now that I think about it, but you will need to change your code.

[bblef91]

Awesome answer, just what I needed.

PS. I'm making top-down game, and in my case gravity and friction are not needed at all. That is the reason why I decided to go without physics arcade.
I'ts my first time making a game in Phaser but not in general. I know how everything with and without physics work, but not sure what Phaser has to offer.
One more question, if I include physics in my game, could and should I mix it with raw code for sprite's (position, angle and such) update? 

[fire7side]

Well, when you get a collision in the physics engine, you can call your own function, but you still need to use the physics engine for motion calls, I believe.  You can set linear velocity and do direct control things as far as I know.  You'll have to get on the site of whatever physics engine you choose and ask them there.  You really just have to experiment to decide which way to take it.  I know for me, I would use it the least amount possible because nothing looks right or acts right, but that might make it harder to program.  I'm sure you'll work it out.

[bblef91]

I will look into it, and I will work it out. Thanks for replies. I'll post info here for anything valuable I figure out. 

[bblef91]

Log entry 739: Still no clue xD

If it will help anyone, I tried migrating current code to one that would use physics, but it backfired. It has a lot of problems, being the top-down game, I'm not able to do a lot of stuff I need. Also, things like movement doesn't do well. So in the end, I improvised and checked overlap of rotated sprites of different shapes by checking distance and angle between sprites. If it is in certain range, and under certain angle -> overlaping. It takes more computing and it's not general solution but it works for me.

Also, no one seems to know the answer about using this function which I mentioned in the first post

[AzraelTycka]

Hello,

you can use Phaser tweens for movement, it's pretty common and you get a lot of extra things you can profit from.

As mentioned above for oriented boxes or polygons in general there is SAT method very often used to determine collision / overlap. The method itself is fairly simple to implement so I advise you to follow the advice you got before and make one yourself. If you want you can try one in jsfiddle I wrote it purely in javascript (link below). I tried to name and place everything so it's easy to understand if you know the method or if you have some description of SAT next to you.

jsfiddle link to working SAT. (red rectangle is left to see the place of collision while the purple rectangle is where the red would should be after collision, there is currently only recntagle version implemented or more precisely version for 2d polygons, for collision between circles or circle and polygon a slight adjustment is needed as is explained in the link below)

Here is an exmplanation with some code and nice pictures to give you ideas about what's going on.

Phaser overlap without physics has an example though still with rectangles as collision bodies. You can check it here or the same thing with tweens.

EDIT: Oh I just checked that you alredy used pahser as your base for the project sry different forum section confused me. WIth Phaser I would guess p2 physics to be the choice it probably uses SAT anyways.

 

Back to you initial question with sprite.overlap.

Go to official phaser sandbox with templates pick Single Sprite template (top line, middle one).

Now add this into create function:

    sprite = game.add.sprite(0, 0, 'phaser');
    sprite2 = game.add.sprite(40, 0, 'phaser');
    sprite2.inputEnabled = true;
    sprite2.input.enableDrag();
    text = game.add.text(16, 60, 'Drag the sprites. Overlapping: false', { fill: '#ffffff' });
    overlp = function checkOverlap(spriteA, spriteB) {
     return spriteA.overlap(spriteB);
    };

This to update function:

    if (overlp(sprite, sprite2))
    {
        text.text = 'Drag the sprites. Overlapping: true';
    }
    else
    {
        text.text = 'Drag the sprites. Overlapping: false';
    }

Now go to play tab and you should be able to drag the right sprite, drag it over the left one and you will see that it works perfectly fine.