Looking to fade out like Star Trek in Pixi

[JuiceEJuice]

I am looking to have an alien in pixi fade out all pixelated-like when it has reached the center of the screen. I am very new to Pixi, and coding in general, and haven't had luck with JQuery communicating with Pixi. Is there a filter that I can use to make this creature fade out? I currently have the alien simply disappearing when he reaches the center of the screen per the below code, but that doesn't look cool.

 

function animate() {

    spaceship.position.x += (target.x - spaceship.x) * 0.1;
    spaceship.position.y += (target.y - spaceship.y) * 0.1;

  if (alien.position.x <= window.innerWidth/2) {
    alien.position.x += 2;
  }

  if (alien.position.x === window.innerWidth/2) {
    alien.visible = false;
  }

  if(Math.abs(spaceship.x - target.x) < 1) {
        reset();
    }

    renderer.render(stage);

    requestAnimationFrame(animate);
}
 

Please help.

[themoonrat]

For something like moving and fading out over time, I prefer to use a tweening library to handle it for me; for example, with http://www.createjs.com/tweenjs you could just do 

createjs.Tween.get( spaceship ).to( { alpha: 0 }, 250 );

To make it fade out over 250 milliseconds.

For a pixellated look at the same time, you'll need the latest version of another lib called pixi-filters ( https://github.com/pixijs/pixi-filters/tree/v1.0.6 ). That page includes how a link of how to use a filter. The tween lib can work on the properties of the filter to make it more pixellated over the same amount of time as it fading out

[JuiceEJuice]

Thanks for the help! I'll check this out.