How to get a colored border when the cursor is over a sprite

Recommended Posts


I am currently developping a Tower Defense style game and I want a nice effect when the mouse hovers a sprite. So I was wondering if it was possible to achieve something similar to this image without the necessity of making another image. I'm talking about the yellow shape when the cursor is on the sprite.

I need to have this effect even during an animation, which is why I think it would be complicated to manage if I had to switch between two types of images. And also collision detection with the cursor needs to be relatively precise.

When the cursor is OUT : 1496243167-img2.jpg

When the cursor is OVER : 1496242766-img.jpg

Thanks :)

Share this post

Link to post
Share on other sites

Here is one way (a sneaky way) you might be able to do it:

The procedure is to create bitmappdata on the fly and add them behind your main sprite, then scale it so it is a bit larger than the sprite itself. You can also add some blur (see example) to the borders if you want,but it requires webGL. Also the silhouette might become innacurate for certain shapes ( an arc sprite) , but its an option....... 

About the animation part: It might work if you can modify the createSilhouette code to fetch the correct frame of your animation, not sure though you will have to experiment. You would have to pass the correct frame to the load function.

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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.