从不同的数组添加重复的图块 PIXI.js

Question

我正在尝试创建一个老虎机游戏;我有一些图像放入数组中

var createSlots = function(){
  //setup images as tilingSprites
 var slot1 = new PIXI.extras.TilingSprite(t1, 200, 200);
 var slot2 = new PIXI.extras.TilingSprite(t2, 200, 200);
 var slot3 = new PIXI.extras.TilingSprite(t3, 200, 200);
 var slot4 = new PIXI.extras.TilingSprite(t4, 200, 200);
 var slot5 = new PIXI.extras.TilingSprite(t5, 200, 200);
 var slot6 = new PIXI.extras.TilingSprite(t6, 200, 200);
 var slot7 = new PIXI.extras.TilingSprite(t7, 200, 200);
 var slot8 = new PIXI.extras.TilingSprite(t8, 200, 200);
 var slot9 = new PIXI.extras.TilingSprite(t9, 200, 200);    
 var slot10 = new PIXI.extras.TilingSprite(t10, 200, 200);
//push slots into array; images, sprites etc.
        mainSlotArr.push(slot1, slot2, slot3, slot4, slot5, slot6, slot7, slot8, slot9, slot10); 
};

目前我有 2 个功能（一旦我开始工作，就会将它们组合在一起）

创建卷

轴1 和创建卷轴2

他们所做的是复制mainSlotArray使用洗牌函数然后填充到 2 列（卷轴）（目前 createReels2 只做一个卷轴）然后，它从它使用的数组中删除数组元素

我遇到的问题是，无论在createReels2中使用什么图像图块，如果它们在createReels1函数中使用，

就会消失，例如，如果在createReels2和createReels1中使用image1.png那么它在前2个卷轴中是不可见的

创建下面的卷轴函数（很多硬编码！

var createReels1 = function(){
     slotArr1 = mainSlotArr.slice();
     shuffle(slotArr1);
     var counter = 0;
     var num = 0
 for(var i = 0; i <2; i++){
     var slotContainer = new PIXI.Container();
     slotContainer.width = 100;
     slotContainer.height = 400;
     slotContainer.y = 100;
     slotContainer.x = i*130;
     stage.addChild(slotContainer);
    slotContainerArr.push(slotContainer);
     for(var j = 0; j < 3; j++){
         var slot = slotArr1[j];
         var toDel = slotArr1.indexOf(slot);
             slot.scale.y = slot.scale.x = .5;
             console.log(slot);
         var nextY = j*(slot.height/2);
            slot.y = nextY;
            slotContainerArr[i].addChild(slot);
            slotArr1.splice(toDel, 1);//remove from array  
      }
   }
 }

var createReels2 = function(){
     slotArr2 = mainSlotArr.slice();
     shuffle(slotArr2);
    var counter = 0;
     var num = 0
 for(var i = 0; i <1; i++){
     var slotContainer = new PIXI.Container();
     slotContainer.width = 100;
     slotContainer.height = 400;
     slotContainer.y = 100;
     slotContainer.x = 260;
     stage.addChild(slotContainer);
     slotContainerArr.push(slotContainer);
     for(var j = 0; j < 3; j++){
         var slot = slotArr2[j];
         var toDel = slotArr2.indexOf(slot);
             slot.scale.y = slot.scale.x = .5;
         var nextY = j*(slot.height/2);
            slot.y = nextY;
       slotContainerArr[2].addChild(slot);
        slotArr2.splice(toDel, 1);//remove from array
      }
   }
 }

Answer 1

如果我正确理解了代码，请快速检查：

精灵只能有一个父级。如果检查 Sprite 对象，它实际上具有父属性。所以 slotArr1 和 slotArr2 具有相同的精灵，这一事实不会改变你切片的 id。然后，当您将它们分配给不同的容器时，它们会从一个容器移动到另一个容器。你当然可以重复使用纹理，但一个精灵只能在父级上拥有。