Pixi.Sprite on click weird isssue

[proluk]

For a day or two i have this weird issue that i can't fix. 

I am making a map with interactive trees. When i click tree i want it to change its texture to chopped trees.

class Tree {
	constructor(sprite, deadTexture){
		this.sprite = sprite;
		this.health = 20;
		this.deadTexture = deadTexture;
		this.sprite.interactive = true;
	}
	chop(){
		console.log("chop");
		this.health = 0;
		this.sprite.texture = this.deadTexture;
	}
}

let tree = new Tree( new PIXI.Sprite(textures.treesTexture), textures.choppedTreesTexture );
/*...*/
tree.sprite.on('click', () => {
	console.log("chop");
	tree.sprite.texture = textures.choppedTreesTexture;
});

this part works almost fine. I attached a gif that explains what is wrong.

I don't know what to do and i can't find any help. What is causing such behaviour? if you need some more information about code, please let me know.

[ivan.popelyshev]

Sometimes, when canvas or browser page is scaled, interaction detects wrong point, multiplies XY by something.

Are you sure that trees texture has exactly square size?

Also creating that many sprites on map isn't good for performance. You have to make a tilemap container filled only with 2x of camera size, and refill it when camera touches the edge of current "filled zone".

Later, if you make tilemap is made with "pixi-tilemap" plugin, or something like "PIXI.Graphics". you'll have to convert mouse coords to local coords of the tilemap and detect the tree tha has to be chopped.

[proluk]

Thank you! i had css expanding canvas by 400px and after removing this everything works great!

Yes i am having performance issues already. My map is generated with cellular automats by node.js server and it is sent as matrix by sockets when player starts new game so i have to figure out how to make tilemaps out of matrix and how to interact with them. Thanks once again!

 

[ivan.popelyshev]

This can be used with "refill" strategy i described: https://github.com/pixijs/pixi-tilemap . But you have to write onclick and coordinates calculation through "toLocal" or "data.getLocalPosition".

Refill strategy: maintain only part of tiles: rectangle that is 2x of size of camera. Refill it when camera touches the side.

 

Tutor: https://github.com/Alan01252/pixi-tilemap-tutorial

[ivan.popelyshev]

Alternatively, you can use simpel container + sprites inside with same "refill", you just change position/pivot of that container and re-create sprites when camera touches the side of fillled region. But that way refill will have more cost and can cause lags, because you create many objects in the same frame.

[proluk]

I will definitely look into that. Those tutorials seems well written, thanks