Jump to content

Pixi.Sprite on click weird isssue


Recommended Posts

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;
		this.health = 0;
		this.sprite.texture = this.deadTexture;

let tree = new Tree( new PIXI.Sprite(textures.treesTexture), textures.choppedTreesTexture );
tree.sprite.on('click', () => {
	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.


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...