PIXI.JS - Allmählich entfernen Slot Game Reels

Question

Ich bin dabei, ein Slot-Spiel zu programmieren, ich habe den folgenden Code, der das Drehen des Spiels behandelt. Ich möchte den Rollen einen Rahmen hinzufügen und die Sprites allmählich hinter dem Rand verschwinden lassen, bevor sie entfernt und an die Spitze zurückgegeben werden.

Funktion spingame() {

spin.interactive = false; 

if (reelcount === 2){ 
    if((reel[0].y >= 10) && (reel[5].y >= 400) && (reel[10].y >= renderer.height/790)){ 

     cancelAnimationFrame(spingame); 
     reelcount = 0; 
     console.log(reelarray); 
     checkwinnings(); 
     balanceUpdate(); 
     spin.interactive = true; 
     refresh(); 
    } 
    else{ 
     for (var i = 0; i < 15; i++){ 
      reel[i].y += anispeed; 
     } 

     requestAnimationFrame(spingame); 
     refresh(); 
    } 
} 

else if (reel[0].y >= 790) { 
     cancelAnimationFrame(spingame); 
     rowNo = 5; 
     reelSet(); 
     for (var i = 0; i < 5; i++) { 
      reel[i].y = 10; 
     } 
     refresh(); 
     spingame(); 
     reelcount = reelcount + 1; 
    } 
    else if (reel[5].y >= 790) { 
      cancelAnimationFrame(spingame); 
      rowNo = 10; 
      reelSet(); 
      for (var i = 5; i < 10; i++) { 
       reel[i].y = 10; 
      } 
      refresh(); 
      spingame(); 
     } 
     else if (reel[10].y >= 790) { 
       cancelAnimationFrame(spingame); 
       rowNo = 15; 
       reelSet(); 
       for (var i = 10; i < 15; i++) { 
        reel[i].y = 10; 
       } 
       refresh(); 
       spingame(); 
      } 

    else{ 
      for (var i = 0; i < 15; i++) { 
       reel[i].setTexture(symb[reelarray[i]]); 

       reel[i].y += anispeed; 
      } 
      requestAnimationFrame(spingame); 
      refresh(); 
     } 

Was soll ich suchen?

Ich habe versucht, die Sprites ein Kind der Grenze zu machen, aber sie sind immer noch sichtbar, wenn sie sich außerhalb der Grenze bewegen.

Answer 1

Stellt sich heraus, dass ich an der falschen Stelle gesucht habe. Weisen Sie einem Rechteck in der Mitte des Bildschirms eine Maske zu und es funktioniert jetzt.

var masksContainer = new PIXI.Container(); 
stage.addChild(masksContainer); 
var mask = new PIXI.Graphics(); 
mask.beginFill(0xffffff); 
mask.drawRect(renderer.width/6 , renderer.height/7, renderer.width/1.6 , renderer.height/1.3); 
mask.endFill(); 
masksContainer.addChild(mask); 

for (var i = 0 ; i < 15; i++){ 
    masksContainer.addChild(reel[i]); 
    reel[i].mask = mask; 
    refresh(); 
}