Body Overlap Detection

[mkhan074]

Hi everyone, I am new to Phaser framework and it's great! I have made a lot of progress on this Street Fighter game I am doing.

A little background of my problem:

I have my code set up that when I press W (Medium Punch), I increase the width of the sprite by via setRectangle

 playerKen.body.setRectangle(70, 80, -18);

once I expanded the hitbox , I play the sprite, then set the width back to its original size once the animation has finished playing:

    kenAnimation = playerKen.animations.play('standingMediumPunch', 10, false).onComplete.add(function () {
      
        //reset the graphics back
        playerKen.body.setRectangle(35, 80, -18);
      
        playerKen.body.setCollisionGroup(kenCollisionGroup);
        playerKen.body.collides(mBisonCollisionGroup, hitEnemy, this);
        kenAttacking = false;

        playerKen.body.velocity.x = 0;
        playerKen.animations.play('standing', 7, true);
        playerKen.body.static = false;
    
      
        //console.log('punching');
    }, this);

 

I have also programmed the AI too, won't get into that. But my issue is the overlapping hitboxes. See the attached photo...  When a situation like this occurs when I am punching and the AI is punching as well, the health of the player and the AI does not decrease.

I looked into https://phaser.io/examples/v2/sprites/overlap-without-physics but the getBounds() method only gets the width of the sprite, not the hitbox. How can I see whether the two hitboxes have intersected?

 

By the way, I am using p2 physics. 

 

Thanks a bunch!

 

[mkhan074]

From doing a bit of reading, I guess Arcade Physics is the best way?

https://phaser.io/news/2016/06/first-look-at-arcade-physics-2

[mkhan074]

Hi everyone, I was able to figure it out, I switched the physics to arcade physics. It has a better overlap detection overall and it's not as jittery as the p2 physics (I feel p2 physics still needs a lot of work to have it on par as the other physics systems in this engine in terms of collission, then again, I am a newb and still learning)

 

This is my simple enemyAI method

  var isColliding = game.physics.arcade.collide(playerKen, enemyBison, hitEnemy, null, this);

    if (!(isColliding)){
        bisonWalkingForward();
        console.log('walking forward');
    }
else
    {
        bisonLightPunch();
   
    }

the collide method returns true if the size of the hitbox is collided rather than the size of the sprite, which is good. 

 

Doing a punching battle with the AI

[Jammy]

HADOUKEN!

[samid737]

Nice project, love the street fighter series! One thing I would like to add, although I am not sure this will apply to you: 

In arcade physics, your physics bodies remain axis aligned, so if you intend to rotate your physics bodies , PROCEED WITH CAUTION. Topic to demonstrate:

 

[mkhan074]

Hi Samid, thanks for letting me know. A situation where that might occur is when I sweep the opponent with crouching heavy kick , but I plan to simply change the collission box horizontally when the opponent is lying on the floor, via setSize and perhaps an offset is needed. I haven't coded the kick functionality yet so I can't really tell. 

I'll keep you guys posted. 

[aapo]

If you really want to take your game to the next level, you could mimic the way Street Fighter (and most other beat'em ups) implement their hitboxes.
You have separate classes of hitboxes that aren't tied to just the character sprite, but to individual animation frames of the sprite. Terminology is quite fluid, but basically you have regular, vulnerable, hittable hitboxes, and attacking hurtboxes. Hitboxes colliding doesn't do anything, but a hurtbox overlapping with a hitbox causes the owner of the hitbox to be hurt.

Here's an example from Street Fighter. The red box is the hurtbox, blue boxes are hitboxes. The green box is a special type of hitbox, that's used to prevent characters from overlapping. It not only checks if it overlaps with another sprites green hitbox, but also separates them if they do.

Like, I said, these boxes are tied to individual frames, which enables things like I-frames, by completely or mostly eliminating hitboxes during certain frames (a perfect example is the Shoryuken, which has - during the actual attacking part where the character has upward momentum - no hitboxes and only a very large hurtbox attached.

 

Anyway, good luck with your project, it looks like it's well on it's way already!

 

13 hours ago, mkhan074 said:

I switched the physics to arcade physics. It has a better overlap detection overall and it's not as jittery as the p2 physics (I feel p2 physics still needs a lot of work to have it on par as the other physics systems in this engine in terms of collission

1

The different physics engines available in Phaser aren't really comparable as better or worse, they're meant to solve different problems. Arcade physics is great if you don't really want all that much actual "physics" in your project, and mainly want collision detection, raycasting and other low-level stuff like that. Ninja is slightly more advanced with a lot of tools built-in to work with things like slopes and non-square geometry, but still no physics simulation stuff. p2 is the system with actual physics bodies, forces, materials etc. Basically everything you'd need to create an Angry Birds clone or something like Crayon Physics. Then there's Box2D, which is a full-fledged, no-holds-barred physics simulation system with every type of joint, spring, force and trigger you might imagine.

Having once implemented a "non-realistic" physics world for a platformer in Box2D (albeit in Java with lwjgl, not Phaser), I can say from personal experience it's a fool's errand. It's ridiculously more difficult wrangling a system designed to semi-accurately model real-life physics to do moonjumps, double jumps, air control and all that platformer jazz, and that'd be a perfect candidate for Arcade or Ninja. Then again, if you wanted to make a Hill Climb Racing type of game, it'd be a huge waste of time implementing the physics yourself on top of Ninja's collision detection, when you could just draw up a car in a physics editor and import it to Box2D and be done

 

tl;dr: cool project, check out how SF2 does hitboxes and maybe steal a few good ideas, physics engines are different because physics needs are different

[mkhan074]

Great post aapo. Honestly, other than makgin games with RPG Maker 2000 way back, this is the only game dev experience I have. I've been using Phaser for about 4 days and I think I came a long way! 

I have researched how fighting game engines work, I know there is the concept of a hit stun (opponent cant press any buttons after being hit, which enables you to chain and link combos) and recovery frames (player can't press button for a certian period) that I plan on to implement some time in the future. 

I was actually thinking about what you said in your post, a couple of days ago actually. Having to create hitboxes and hurtboxes that change in size frame by frame, and setting it's x and y offsets, will be quite a daunting task, am I right? Is there an easy way to go about this? 

------------

 

EDIT: I guess another issue I have is... When I punch the AI, for example I do Light punch which is 3 frames long (1 frame is the startup frame, the second frame is the actual jab frame, and the third frame is the recovery frame), how do I program it in a way that only damage is done on the second frame? The code is in my first post, the same logic is applied to my standing light punch. is there a way that says "if animation is the second frame, do so and so"? 

 

EDIT 2: I realised I can do if (playerKen.frame == 27){ //show hitbox  }

Shout outs to this example for giving me the idea: https://phaser.io/examples/v2/animation/two-frame-test

I realised putting this within the lightpunch() button wont give you the frames for the full punch animation. I guess I would call a method from my update method that keep track of what frame is being played and do my if statements there.