Phaser fighting game. How to?

[PhasedEvolution]

Hello. I would like to know how a game such as street fighter or any kind of action fighting game could be made in phaser. I have lots of doughts related to this... How do you detect for collision between two characters? I mean collision between each other "actual body" and not the rect/square that composes the whole png? I am quite ignorant in realation to gaming development especially this... Can someone give my some ideas / tutorials on how to develop this kind of real time fighting games?

Thank you.

[alex_h]

One approach is to define multiple different hit areas (rects, circles) for each sprite, in local co-ordinates relative to their main x & y. So you might have one for each limb for example, one for the torso, one for the head. It can get a bit complicated depending on the sprite animation though because if you have the sprites doing complicated spinning kicks etc then you might find you have to move the hit areas at certain times too. Too some extent it depends on what kind of graphics you want to use. Having multiple hit zones makes things easy in terms of getting different responses for hitting different body parts though.

[Alexalten]

Hi, there is an interesting (old) article on Polygon: http://www.polygon.com/2014/7/7/5876983/how-to-play-street-fighter-fighting-game-primer

inside there is also a link to a reference manual (pdf) for fighting games.

[alex_h]

Looking at Alexaltens link there you would definitely have to not only move the hit areas but probably also scale and resize them in accordance with the fight animation. If at all possible I would recommend avoiding rotating them though, it makes intersection detection loads easier if they can remain axis aligned, and also is a lot less work for the CPU.

If you are thinking of using skeletal animation for the fighters, eg spine then I would look into seeing whether you can somehow define the hit areas as invisible bones or something like that. It would be potentially much easier than hand coding their movement on top of existing animation.

[PhasedEvolution]

4 hours ago, alex_h said:

One approach is to define multiple different hit areas (rects, circles) for each sprite, in local co-ordinates relative to their main x & y. So you might have one for each limb for example, one for the torso, one for the head. It can get a bit complicated depending on the sprite animation though because if you have the sprites doing complicated spinning kicks etc then you might find you have to move the hit areas at certain times too. Too some extent it depends on what kind of graphics you want to use. Having multiple hit zones makes things easy in terms of getting different responses for hitting different body parts though.

Thank you, that gives me something to think about already. Do you know any thread/examples on how to define different hit areas?

[PhasedEvolution]

3 hours ago, Alexalten said:

Hi, there is an interesting (old) article on Polygon: http://www.polygon.com/2014/7/7/5876983/how-to-play-street-fighter-fighting-game-primer

inside there is also a link to a reference manual (pdf) for fighting games.

Very interesting. Will look into it . Thank you

[alex_h]

23 minutes ago, PhasedEvolution said:

Do you know any thread/examples on how to define different hit areas?

Not off the top of my head, but in the simplest case a hit area is just a rectangle object, ie it has an x, y, width, height. Then you compare each rectangle on one player against those on the other player, (translating the values to the common parent container space) using a rectangle intersection check.

Here's one example of a function that returns the amount by which two rects overlap (either on x or y, whichever is bigger)

    /**
     *
     * @param Object1
     * @param Object2
     * @returns {number}
     * @private
     */
    _intersection: function(Object1, Object2){
        var overlap = 0;//return value
        var obj1R = Object1.x + Object1.width, obj2R = Object2.x + Object2.width,
            obj1B = Object1.y + Object1.height, obj2B = Object2.y + Object2.height;
        if(obj1R > Object2.x && Object1.x < obj2R &&
            obj1B > Object2.y && Object1.y < obj2B){
            //find biggest x & smallest r
            var biggestX = Math.max(Object1.x, Object2.x);
            var smallestR = Math.min(obj1R, obj2R);
            var overlapX = smallestR - biggestX;
            //now do the y
            var biggestY = Math.max(Object1.y, Object2.y);
            var smallestB = Math.min(obj1B, obj2B);
            var overlapY = smallestB - biggestY;
            //return the bigger of the two
            overlap = Math.max(overlapX, overlapY);
        }
        return overlap;
    }

 

[PurpleRed]

Im attempting a similar project. We should work together.