Question

使用PIXI.js我将PIXI.Sprites的网格添加到PIXI.container。所有Sprite都标记为交互式，并附加了一个调用方法selectTile的鼠标按下事件。此方法应更改所选的精灵tint和alpha，但它不会这样做：

Sprite创建和事件功能的代码摘录：

注意：为简洁起见，这些片段中的任何未声明的变量都被遗漏了。

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方法正在记录所选Sprite的正确属性。所以我认为这与添加到PIXI.Container的Sprites有关吗？

Answer 1

更改对象的属性后需要重新渲染。

这样做的一个好方法是只包含一个不断更新的功能，以便下次刷新时自动显示任何更改。

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

当添加到容器不工作时，Mousedown事件被添加到Pixi Sprites

1 个答案: