Jump to content

PixiJS - no overlapping images


Recommended Posts

I'm new to PixiJS. What I'm trying to do is add a bunch of Sprites at random locations. I managed that and it's working.
However, I don't want images to overlap. Of course I can do a check every time I want to add an image and see if it collides with any image by looping through all children, and randomize the location again if it's colliding, but that is not really efficient.

I'm not sure what the best approach would be. I could store somehow all pixel locations that have been occupied and when I detect a collision, shift up/left/right/down until I find a free spot? Is that the best approach?

Link to comment
Share on other sites

You could create a 2D array of x/y coordinates.

Randomly choose one of those locations for each sprite.

Then keep track of which location was chosen (or splice it out of the array) so that it's not assigned again.

Yeah, but only coordinates is not enough, as images can be different in size. I would have to define a 2D array with all pixel points, fill them with 1's where I have a picture and then calculate if one of my pixels in my new image will clash. If it clashes, I have to move it up/down/right/left and do the checks again.

Sounds all rather complicated and I thought there might be an easier way...

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...