PIXI.JS - 점차적으로 슬롯 게임 릴 제거

Question

나는 슬롯 게임을 코딩하는 과정을 배우고 있으며, 게임의 회전을 처리하는 아래 코드를 가지고 있습니다. 릴에 테두리를 추가하고 스프라이트가 제거되고 맨 위로 되돌아 가기 전에 스프라이트가 경계 뒤에서 점차 사라지도록하고 싶습니다.

기능 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(); 
     } 

내가이 찾고있는 사람이되어야 하는가?

스프라이트를 테두리의 자식으로 만들려고 시도했지만 경계 외부로 이동할 때 계속 표시됩니다.

Answer 1

나는 밖으로 틀린 장소를보고 있었다. 화면 중앙의 사각형에 마스크를 지정하면 현재 작동 중임

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(); 
}