添加来自不同数组的重复图块 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 个函数（一旦我开始工作就会将它们组合起来）

createReels1 和 createReels2

他们所做的是使用随机播放功能复制 mainSlotArray 然后填充到每个 2 列（卷轴）（目前 createReels2 只做一个卷轴）然后它从它正在使用的数组中删除数组元素

我遇到的问题是，无论在 createReels2 中使用什么图像块，如果它们在 createReels1 函数中使用，它们就会消失，例如，如果 image1.png 在 createReels2 和 createReels1 中使用，那么它在前 2 个卷轴

createReels 函数如下（大量硬编码！）

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

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

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

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

Adding duplicate tiles from different arrays PIXI.js

javascript

arrays

pixi.js