添加來自不同陣列的重複圖塊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只能在父對象上使用。