Pixi Spritesに追加されたMousedownイベントが、コンテナに追加されても機能しない場合

Question

PIXI.jsの使用PIXI.containerにPIXI.Spritesのグリッドを追加しています。すべてのスプライトはインタラクティブとマークされ、メソッドを呼び出すマウスダウンイベントが添付されています（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に追加されたスプライトと関係があると思っていますコンテナ？

Answer 1

オブジェクトのプロパティを変更した後に再レンダリングする必要があります。

これを行う良い方法は、次回の更新時に自動的に変更が表示されるように継続的に更新する機能を追加することです。

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