PhasedEvolution Posted September 5, 2016 Share Posted September 5, 2016 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. Link to comment Share on other sites More sharing options...
alex_h Posted September 6, 2016 Share Posted September 6, 2016 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. PhasedEvolution 1 Link to comment Share on other sites More sharing options...
Alexalten Posted September 6, 2016 Share Posted September 6, 2016 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. PhasedEvolution, alex_h and Eurico 3 Link to comment Share on other sites More sharing options...
alex_h Posted September 6, 2016 Share Posted September 6, 2016 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. Alexalten and PhasedEvolution 2 Link to comment Share on other sites More sharing options...
PhasedEvolution Posted September 6, 2016 Author Share Posted September 6, 2016 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? Link to comment Share on other sites More sharing options...
PhasedEvolution Posted September 6, 2016 Author Share Posted September 6, 2016 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 Link to comment Share on other sites More sharing options...
alex_h Posted September 6, 2016 Share Posted September 6, 2016 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; } Alexalten and PhasedEvolution 2 Link to comment Share on other sites More sharing options...
PurpleRed Posted September 7, 2016 Share Posted September 7, 2016 Im attempting a similar project. We should work together. Link to comment Share on other sites More sharing options...
Recommended Posts