Stop Animation of Displacement Sprite on Hover

[mersault]

hi,

i'm very new to pixi.js, and am not experienced as a programmer in general. so, i'm sorry if these are very obvious questions.

essentially, i'd like to apply a displacement sprite to several images on a page. and have it so when each image/stage is hovered it stops the animation of the filter. ideally, it would revert back to the un-manipulated image on an individual basis (hovering on a single image would not stop the filter for all images), but if it froze all of the sprites at once that would be great too.

currently, i'm working from code i found in this JSFiddle:

http://jsfiddle.net/z5boqy7q/   

but am not sure how to add the interactivity i'm looking for.

any help is appreciated! thanks you.

[ivan.popelyshev]

First thing is, its better to use one renderer and not three. Add three sprites, add displacement sprite inside each of them

sprite1.addChild(displacementSprite); 
sprite1.position.set(200, 0); //x=200

sprite1.filters = [new DisplacementFilter(...)]; 

//three times that

That thing can fix your problems with interaction, because right now there are three interaction managers and they dont know about each other.

[mersault]

@ivan.popelyshev, thanks for your response! i will integrate your suggestion into my code. i think my question may be even more rudimentary than you think. i'm just not sure how to stop the animation at all... 

[ivan.popelyshev]

34 minutes ago, mersault said:

@ivan.popelyshev, thanks for your response! i will integrate your suggestion into my code. i think my question may be even more rudimentary than you think. i'm just not sure how to stop the animation at all... 

//create sprite
var sprite = new PIXI.Sprite(spriteTexture);
sprite.addChild(new PIXI.Sprite(displacementTexture));
sprite.filters = [new DisplacementFilter(sprite.children[0])];

//in animation cycle
if (!sprite._over) {
  //_over is not documented, but it actually exist
   var filter = sprite._filters[0];
   filter.offset.x += offset;
   filter.offset.y += offset;
}

do that thing only if corresponding "sprite._over" , that means that 

[ivan.popelyshev]

@mersault and why do you use pixi v1.6.1? v4 is here already https://github.com/pixijs/pixi.js/releases

[mersault]

@ivan.popelyshev thanks so much! That clarifies things for me.

Regarding the version of pixi, i had just found that code on JSFiddle. On my own site I am using a more up to date version of pixi.

Thanks again!

[mersault]

One more questions about interaction.

Is it possible to when interacting with one element affect another? Specifically, I'm trying to extend this project so text link will correspond to one of the filters and stop it from moving on one of the sprites.

[ivan.popelyshev]

I dont see why not.