I used PIXI.js (for the first time!) to set up a rendering of a rudimentary transition, where a sprite moves diagonally across the canvas. Almost half way during the transition, I am changing the texture to use another image. It works as expected. But I want to know how to get a fadeIn effect, so the change in the image does not look abrupt. Below is the code I am using (and here is the jsfiddle).

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(150, 150, rendererOptions);
document.body.appendChild(renderer.view);
var texture = PIXI.Texture.fromImage('._OU01_AC_UL160_SR160,160_.png', true);
var texture2 = PIXI.Texture.fromImage('._OU01_AC_UL160_SR160,160_.png', true);
var sprite = new PIXI.Sprite(texture);
sprite.position.x = 0;
sprite.position.y = 0;
stage.addChild(sprite);

animate();

function animate() {
    if (sprite.position.x < renderer.width
        || sprite.position.y < renderer.height) {

        if (sprite.position.x == 35) {
            sprite.texture = texture2;
        }
        requestAnimationFrame(animate);
    }

    sprite.position.x += 0.5;
    sprite.position.y += 0.5;
    renderer.render(stage);
}

I used PIXI.js (for the first time!) to set up a rendering of a rudimentary transition, where a sprite moves diagonally across the canvas. Almost half way during the transition, I am changing the texture to use another image. It works as expected. But I want to know how to get a fadeIn effect, so the change in the image does not look abrupt. Below is the code I am using (and here is the jsfiddle).

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(150, 150, rendererOptions);
document.body.appendChild(renderer.view);
var texture = PIXI.Texture.fromImage('https://images-na.ssl-images-amazon./images/I/81W02uGnuLL._OU01_AC_UL160_SR160,160_.png', true);
var texture2 = PIXI.Texture.fromImage('https://images-na.ssl-images-amazon./images/I/81887k9tnQL._OU01_AC_UL160_SR160,160_.png', true);
var sprite = new PIXI.Sprite(texture);
sprite.position.x = 0;
sprite.position.y = 0;
stage.addChild(sprite);

animate();

function animate() {
    if (sprite.position.x < renderer.width
        || sprite.position.y < renderer.height) {

        if (sprite.position.x == 35) {
            sprite.texture = texture2;
        }
        requestAnimationFrame(animate);
    }

    sprite.position.x += 0.5;
    sprite.position.y += 0.5;
    renderer.render(stage);
}

• javascript
• pixi.js

Share Improve this question Follow asked Jul 29, 2016 at 21:51 Web UserWeb User 7,7761515 gold badges7070 silver badges101101 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Well, since you are reassigning the texture reference, this can be pretty hard to animate a fade.

If you are able to make two sprites, one for each texture, then you can manipulate the .alpha field. I forked your jsfiddle to demonstrate this:

https://jsfiddle/55zvq716/

Add a second sprite to hold texture 2; Make it start with alpha = 0 (fully transparent).

    var sprite2 = new PIXI.Sprite(texture2);
    sprite2.alpha = 0;
    sprite2.position.x = 0;
    sprite2.position.y = 0;

Instead of swapping textures, trigger an alpha change at the desired point.

    if (sprite.position.x >= 35 && sprite2.alpha < 1) {
      sprite.alpha -= .01;
      sprite2.alpha += .01;
    }