添加来自不同阵列的重复图块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使用shuffle函数 然后填充到2列（卷轴）each（此刻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

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

精灵只能有一个父。如果你检查Sprite对象，它实际上有一个父属性。因此，slotArr1和slotArr2具有相同的Sprites，并且事实上不改变您对它们进行切片的id。然后，当您将它们分配到不同的容器时，它们将从一个容器移到另一个容器。你可以肯定地重用纹理，但是一个Sprite只能在父对象上使用。