컨테이너에 추가 할 때 Pixi Sprite에 Mousedown 이벤트가 추가되었습니다.

Question

PIXI.js를 사용하여 PIXI.container에 PIXI.Sprites의 표를 추가합니다. 모든 Sprite는 대화 형으로 표시되고 메서드를 호출하는 마우스 다운 이벤트가 첨부됩니다 (selectTile). 이 방법은 선택된 스프라이트 tint 및 alpha을 변경해야하지만, 그렇게되지 않습니다

이

스프라이트 생성 및 이벤트 기능의 코드 발췌 :

NB :이 조각의 모든 선언되지 않은 변수가 간결 여기에 남아있다 .

createGrid() { 
let piecesGroup = new PIXI.Container(); 
let piecesIndex = 0; 

container.addChild(piecesGroup); 
stage.addChild(container); 

for (let row = 0; row < rowSize; row++) { 
    for (let col = 0; col < colSize; col++) { 

    xPos = col * 256; 
    yPos = row * 256; 

    imgTile = new PIXI.Sprite(this.imageFrame(tileSheetTexture, xPos, yPos, currentTileSize, currentTileSize)); 
    imgTile.buttonMode = true; 
    imgTile.interactive = true; 
    imgTile.x = xPos; 
    imgTile.y = yPos; 
    imgTile.name = `imgTile${row.toString()}x${col.toString()}`; 
    imgTile.currentIndex = piecesIndex; 
    imgTile.targetIndex = shuffledIndexArray[piecesIndex]; 
    imgTile.alpha = this.get('currentGame.TILE_ALPHA'); 
    imgTile.row = row; 
    imgTile.col = col; 
    imgTile.isSelected = false; 
    imgTile.isLocked = false; 
    imgTile 
     .on('mousedown', this.selectTile) 
     .on('touchstart', this.selectTile); 

    piecesGroup.addChild(imgTile); 

    piecesIndex++; 
    } 
} 
renderer.render(stage); 

}

selectTile(e) { 
    const tile = this; //e.target; 

    console.log(`tile: ${tile.name}`); 

if (!tile.isSelected) { 
    tile.alpha = 0.2; 
    tile.tint = 0x000000; 
} else { 
    tile.alpha = 1; 
    tile.tint = 0xFFFFFF; 
} 
tile.isSelected = !tile.isSelected; 

console.log(
    `typeof e: ${typeof e}, 
     isSelected: ${tile.isSelected}, 
     selectTile: {name: ${tile.name}, 
     index: ${tile.currentIndex}, 
     target: ${tile.targetIndex}}` 
); 

}

selectTile있어서 선택된 스프라이트 정확한 특성을 기록한다. 그래서 저는 이것이 PIXI에 추가 된 Sprites와 관련이 있다고 생각하고 있습니다 .Container?

Answer 1

개체의 속성을 변경 한 후에 다시 렌더링해야합니다.

이렇게하는 좋은 방법은 다음 새로 고침시 변경 사항이 자동으로 표시되도록 지속적으로 업데이트하는 기능을 포함시키는 것입니다.

function update(){ 
    requestAnimFrame(update); 
    renderer.render(stage); 
}; 
update();