Jump to content

Hover sprite


Recommended Posts

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?

Link to comment
Share on other sites



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"]);
Link to comment
Share on other sites

  • 3 weeks later...

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.
  • Create New...