FadeIn-Übergang zu PIXI-Sprite hinzufügen

Question

Ich habe mit PIXI.js (zum ersten Mal!) Ein Rendering eines rudimentären Übergangs erstellt, bei dem sich ein Sprite diagonal über die Zeichenfläche bewegt. Fast während der Hälfte des Übergangs ändere ich die Textur, um ein anderes Bild zu verwenden. Es funktioniert wie erwartet. Aber ich möchte wissen, wie man einen FadeIn-Effekt bekommt, so dass die Veränderung im Bild nicht abrupt aussieht. Unten ist der Code, den ich verwende (und hier ist die 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.com/images/I/81W02uGnuLL._OU01_AC_UL160_SR160,160_.png', true); 
var texture2 = PIXI.Texture.fromImage('https://images-na.ssl-images-amazon.com/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); 
} 

Answer 1

Nun, da Sie die Texturreferenz neu zuweisen, kann es ziemlich schwierig sein, eine Fade zu animieren.

Wenn Sie zwei Sprites erstellen können, eines für jede Textur, dann können Sie das Feld α manipulieren. Ich gegabelt Ihre jsfiddle dies zu demonstrieren:

https://jsfiddle.net/55zvq716/

Fügen Sie ein zweites Sprite zu halten 2 Textur; Beginnen Sie mit Alpha = 0 (vollständig transparent).

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

Stattdessen Texturen von Swapping, löst eine alpha Änderung an der gewünschten Stelle.

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