Prevent Uniform Grid Panel Children From Overlapping

Hello,

I want to randomize the children in a uniform grid panel. The maximum size I want it to be is a 2x2, but the children keep overlapping each other when created.

The children are each different images that are already in the grid. This is meant to be an unscrambling puzzle.

This is what is happening:


This is what the images are combined:

This is basically what I want:

You can pre-calculate the X and Y locations by mixing array indices, like this

I’m setting the color and the position randomly, but it’s the same concept

grid

1 Like

The issue with your solution is that mine is a widget that is attached to an actor. What I want to happen is this:
There are 8 images in the uniform grid panel, 4 corners and 4 straight pieces. There is an empty space so pieces can be moved. When the UI is constructed, the pieces spawn in random spots without overlapping. The uniform grid panel is a 2x2. The images are already in the grid. All I’m asking is how to shuffle them around to get them in random spots but not overlapping.

Straight piece:


Corner piece:

Ah, got ya. Not clear initially…

I’ll think for a bit.

This is a blueprint, but the concept applies in a widget.

Basically, there are 9 valid locations, and each piece can go in any of those positions, in one of four rotations.

I put the valid locations in an array

Then I mix the array and run through a list of the pieces. Each ends up in a random location, and I set the rotation randomly.

Effect

puzzle