Jump to content

Looking to fade out like Star Trek in Pixi


JuiceEJuice
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...