I want to highlight my sprites. Could you point me in the right direction?

[Travis]

Hi, I have a group of sprites. When I mouseover one of the sprites in the group, I want to entire group to have a "highlight" effect which could be a change in color or something similar. Maybe even a border.

 

I already have the mouseover + select group part done. But where should I start for adding a highlight effect to my sprites?

 

Thanks in advance!

[Vidsneezes]

First thing that comes to mind is having a duplicate sprite that uses the same texture but its manipulated to be one color only, slightly bigger and draw below the original sprite.

you can have two groups for the sprites.
-first group, the duplicate, has it's sprites manipulated (alpha, visible, width, height and color) but has all the data of the second group( x,y,angle)

-second group contains the original sprites and the mouseover+ selecting logic.

Also make sure the display order is first group then second group.
 

One problem is that i am not entirely sure how to do color blending.
 

[Mike]

And my first thoughts is to have a selected sprite image and change the sprite frame with that...one

but if the sprite is a unit which is animated like walking this approach i not very good since you must have all frames duplicated with a selected state...

 

Better way will be to use some tint/color change...but I don't know phaser or Pixi have a support for such a thing.

[Travis]

Better way will be to use some tint/color change...but I don't know phaser or Pixi have a support for such a thing.

 

Yeah... I wish (maybe there is!) for there to be some sort of way to modify the Hue / Saturation / Brightness of a sprite on the fly. Otherwise... duplicating sprites might be an option. Would rather modify the image data directly though.

[Chris]

You could draw a geometry object around each sprite in the group, or you could use phasers debug features.

 

In your render loop, just say:

game.debug.renderSpriteBounds(spriteObjectToHighlight, [optionalColor]);

More info in the phaser source of that method.

[Mike]

@Chris this sounds like a quite good idea, since you can make any color, border and so on over the sprite.

 

Also it's better to make a similar custom method instead of using the debug one, and copy the code from renderSpriteBounds or renderSpriteBody.

[rich]

Nope there's no support for this built in, It needs support at the Pixi level really (which would require them to support custom shaders) but I guess if you know you only need canvas and not WebGL then you could just force the renderer to use that and inject your own context mods to do it.