Jump to content

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


ScavaJripter
 Share

Recommended Posts

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. 

 

EYfN1SA.png

 

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?

ZDikuIA.png

 

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.

Link to comment
Share on other sites

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. 

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...