Hover sprite

[tips4design]

I have an interactive sprite which can be clicked. I also want to add a hover effect (change the sprite to sprite_hover sprite). What is the best practice of doing so? Should I use two sprites, always update both of them (cause sprites are moving) and only show sprite or sprite_hover based on the current state? Or should I replace sprite texture with hover_texture on if the mouse is over the element?

[d13]

Hello!

 

You can make a MovieClip sprite with two textures and then gotoAndStop at the correct texture frame depending on what the mouse is doing.

var sprite = new PIXI.MovieClip(arrayWithTwoTextures);sprite.interactive = true;stage.interactive = truesprite.mouseover = function(data) {  //Display the hover texture  sprite.gotoAndStop(1);}sprite.mouseout = function(data) {  //Display the normal texture  sprite.gotoAndStop(0);}

You can make a MovieClip sprite directly from two image files like this:

var sprite = PIXI.MovieClip.prototype.fromImages(["images/image1.png", "images/image2.png"]);

Or if you're using a texture atlas you can do this:

var sprite = PIXI.MovieClip.prototype.fromFrames(["frame1.png", "frame2.png"]);

[tips4design]

Thank you a lot, this looks clean!

[mrBRC]

@d13

 

why are you setting the stage as interactive? is it a requirement of the mouseout event capture?

 

does it not need a hitArea defined as well?

[d13]

why are you setting the stage as interactive? is it a requirement of the mouseout event capture?

Yes.

But it doesn't need a hit area defined.