Sign in to follow this  
PhasedEvolution

Phaser fighting game. How to?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.