CODEWITHSUNDEEP
pixi.js
mrlion
mrlion

Reputation: 166

Mousedown events added to Pixi Sprites when added to container not working

Using PIXI.js I am adding a grid of PIXI.Sprites to a PIXI.container. All Sprites are marked as interactive and have mouse down events attached that call a method, selectTile. This method should alter the selected Sprites tint and alpha but it is not doing so:

Code excerpt of Sprite creation and event function:

NB: Any undeclared variables in these snippets have been left out here for brevity.

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}}`
);

},

The selectTile method is logging the correct attributes for the selected Sprite. So I am thinking this is something to do with the Sprites added to the PIXI.Container?

Upvotes: 1

Views: 1340

Answers (1)

Karmacon
Karmacon

Reputation: 3190

You need to re-render after you change the properties of an object.

A good way to do this is to just include a function that will continuously update so that any changes are automatically displayed on next refresh.

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

Upvotes: 1

Related Questions