Hi, I have a widget with a canvas, on which I’m trying to add buttons at random locations, at certain distance from each other, at runtime.
The distance will also be random in range (between 2 values).
Is there any way to do this? Thanks.
Maybe try something along these lines…
Step 1: Prepare the Widget Blueprint
- Create the Widget Blueprint: Start by creating a new Widget Blueprint if you haven’t already done so. This will serve as the container for your buttons.
- Add a Canvas Panel: Ensure your widget blueprint has a Canvas Panel. This will be the parent panel where buttons are dynamically added.
Step 2: Design the Button Spawning Function
- Random Location Generation: You’ll need to generate random positions within the bounds of the Canvas Panel. To do this:
- Use the
Random Float in Rangenode to generateXandYcoordinates. The range should be between0and the respective max width and height of the canvas minus the size of the buttons to ensure they don’t spill out of the canvas.
- Check Distance Constraint: To ensure each new button maintains a minimum distance from every other button already placed:
- Iterate through the list of already placed buttons.
- For each button, calculate the distance to the new button’s position using the
Distancenode between their coordinates. - If the distance is less than the minimum required, generate a new position and check again.
- Create and Place the Button: Once a valid position is found:
- Create a new Button widget using the
Create Widgetnode, specifying the button class. - Use
Add to Canvasnode to add it to the Canvas Panel. - Set the button’s
Positionproperty using theSet Positionnode in the Canvas Slot of the button widget.
Step 3: Blueprint Implementation
Here’s a rough blueprint script to guide you:
- Variables:
Buttons: An array of Widget references to keep track of all created buttons.Min Distance: A float variable for the minimum distance between buttons.Canvas Size: A vector2D variable storing the dimensions of your canvas panel.
- Function to Place Buttons:
- Use a loop to create each button.
- Inside the loop, generate random
XandYpositions. - Check these positions against existing buttons in the
Buttonsarray to ensure they meet the distance requirement. - If a position is valid, create the button and set its position. If not, regenerate the position.
Few things you might also want to have a think about…
- Performance: If you have many buttons, the distance checking loop might become a performance bottleneck. Consider optimizing the checking mechanism or limiting the number of buttons.
- UI Design: Random placement might sometimes create inaccessible or hard-to-use UIs. Consider the user experience when designing such dynamic interfaces.
- Overlap Handling: In a basic setup, repeated failure to find a non-overlapping position might result in an infinite loop. Implement a retry limit for generating positions.
Hope this helps.
1 Like
Thanks a lot. With this approach, as you said, there could be a performance issue. Also putting a cap on the number of iterations is not desirable, because no button can be skipped, for what I’m trying to do.
Is there a way to calculate the new position according to all previous positions to make sure they’re at a minimum distance from each other, thus not resorting to random coordinates until they’re valid?
What do you think about using a grid instead?
There are literally a million ways to do this, depending on what you try to achieve there could be many solution. What exactly you are trying to solve, if you give a little bit more context maybe we could be more helpfull.
Are the buttons going to project some movement? What exactly buttons do? What is in range exacly means?
By “random in range” I mean a random value within a certain range, just like the node says:
The buttons represent locations on a map, that will transport the player to them, when clicked. Basically each button loads a new level.
The buttons need to be spawned at runtime at a certain minimum distance from each other, they must not overlapp. Voronoi style.
Once created, they will maintain their position on the map for the rest of the game.
Also, the map shows up in a widget, and only a small portion of it is visible at one time. So it needs to “move” within the widget, to center on the current location (button) the player is in.
Ok, so not sure what you are building but I am eager to help you.
I am assuming this map is 2D map. So you want to get random points on 2D canvas wihtout overlapping which will be represented as buttons and maybe something more (like a widget additions etc)
First of all since you mentioned it is possible to do this many things including the Voronoi and K-Means. However those would be over engineering this and think it is not necessary at all and on randomization with scaling buttons eventually there would be too close or map locations that would not create the best UX for the player. In order to overcome those a line from button to location dot would be eventually necessary to properly represent the levels with proper buttons.
I feel that you are trying to to hardway if you would like to do that you need to calculate
Rectange Origin X. Y. + Width Height is not overlapping with the previously created widgets. Which can be done in blueprints too. Here is an example of alghorithm Algorithm Practice: Rectangle Intersection | by jessica gillan | Medium
Cause if you are getting the random points, eventually they will overlap and on overlap you need to rerandomize the random point on canvas. However still this has to be limited since the buttons can be created on a plane would be eventually limited to a number.
Still I wouldn’t go that way if you are going to create many many levels and buttons in the map.
An easier solution would be using the UMG grid positioning your widget into the grid. Depends on what you really trying to achieve and a simple drawing would be meaningfull if you are stuck.
1 Like
