how to arrange sprites automatically?

Guys, I need some guidance. I'm trying to reproduce this sprite arrangement effect. How can I move each sprite to empty spaces so they don't overlap?

i.imgur.com/Zv2kYmv.gif

dropbox.com/s/m8v563ldb1skb9m/autoOverlap.c3p

Probably use a movement behavior to avoid the jitter.

It basically involves pushing overlapping boxes out of each other repeatedly until they don't overlap. This differs from newts a bit. It more closely matches the gif and runs till they are only slightly overlapping. as a final step you could make the sprites slightly smaller so they won't be in contact at all.

dropbox.com/s/bcyzlitqf5i6kp0/box_push_out.capx

Thank you so much for the help guys!, that's exactly what I needed!

newt R0J0hound

Is there a possibility to adjust the size of the window, to keep up with the amount of sprites? My project makes each sprite added to the layout load an image using a url. It turns out that some images are big enough to pop off the screen. My idea is to create a pixel art arts/artists influence map.

That's a bit different, like a binary sorting tree.

aka a rOjO special

I mean you can find the bounding box that surrounds all the sprites, and change the canvas size to that.

var x0= 10000
var x1=-10000
var y0= 10000
var y1=-10000

for each sprite
-- set x0 to min(x0, sprite.bboxLeft)
-- set x1 to max(x1, sprite.bboxRight)
-- set x0 to min(y0, sprite.bboxTop)
-- set x0 to max(y1, sprite.bboxBottom)

set canvas size to max(640, abs(x1-x0)), max(480, abs(y1-y0))
scroll to (x0+x1)/2, (y0+y1)/2

I am very grateful for the personal help! You are amazing!

Here you can check the progress of the project. myinfluencemap.netlify.app

Looks good. I like how you can drag them around. I'm not sure why you can't drag number 1 though. Glad it was helpful.

Yes, the first image must contain the art of the creator of this influence map, in which it displays style and features inspired by the arts around it.Thanks again!