How to detect collision for only part of an image/sprite?

[ScavaJripter]

I have no idea how to check for collision on only a small part of an image or sprite. For example, in the Image below, how would I detect collision with the sword in the red circle, but not detect collision with anything else in the blue square. 

 

 

I just want the sword to kill enemies and not the rest of his body or the white space above and below the sword.

 

 

Another example, if my character is standing over a gap, my code sees his width as the width of his whole image (from his sword to the other arm) , and so he doesn't fall in the gap. How could I do collision detection with only a small part of the image?

 

Could someone tell me what the technique is called or send me to an article to read. I don't even know where to begin looking. Thanks!

 

PS. I am learning WITHOUT frameworks or libraries. I would like any help with just vanillaJS and later I'll learn a library.

[alex_h]

Create a rect object that describes the hit area in the sprites local co-ordinates. Then do your collision test as an intersection check between the target area and the hit rect translated by the sprites own x & y.

[ScavaJripter]

Oh, is that what this page is talking about?

http://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

 

Yeah, its like I'll read things and I'll wonder to myself if that is the normal way of doing something. Thanks. 

[ericjbasti]

What @alex_h is talking about isn't related to that article you mention. He's suggesting, as do I, that you create an invisible rect attached to your sprite and do the collision testing based on that. Just like you drew the circle around the sword, imagine you have an invisible rect around the sword that is only used for hit detection. Same with the characters body. Right now its doing the detection on the whole large sprite, when in reality you should be testing on a rect half that size.

 

I would even recommend at this phase of your development making the rects draw to the screen so you can visually see how well your hit detection is performing.