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

[Sebastien]

Hi,

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 :

When the cursor is OVER :

Thanks

[jjwallace]

Hmm normally yah you would use a sprite sheet with two images.  So you are loking for some type of layering effect?

[jjwallace]

 

[samid737]

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.

[Sebastien]

Thank you for these responses.

Samid 737: I thought to do something in this style but I did not know how to code it so thank you I will try to succeed with your code to help me