unity instantiating multiple objects on the same position. I would like to spread them out

Question

I am trying to spread out the instantiated objects to fill up the grey area in a grid layout. So far I am stuck at this point where I have all the objects stacked on eachother. I did try a few things but they would make the object not visible. Here is the code I have and two pictures. One of the scene and one of the hierarchy. scene picture hierarchy picture

public class stockSpawner : MonoBehaviour
{
    [SerializeField] GameObject stockPrefab;
    int x;
void Start()
{
    x = Mathf.RoundToInt(scene2Calc.nS);
}


void Update()
{
    if (x >= 1)
    {
        Instantiate(stockPrefab, transform);
        x--;
    }
    else { Debug.Log(x + "this is x value");}
}

}

Answer 1

It seems all of your assets are UI. If you want to create a grid, normally I would say to instantiate the objects and change the transform at which they spawn in a double loop. In one loop you would iterate the horizontal axis of spawning while the other moves the vertical. However, as your setup is all UI, you can use some nifty components to do all the heavy lifting for you.

Attach a grid layout group to the parent object of where you want to spawn all of these UI objects. I would recommend attaching this component to the Panel in your screenshot. I would also recommend changing your installation code slightly as you are working with UI objects. To assure anchoring, rescaling, etc. work, you will want to use Instantiate(stockPrefab, transform, false);. That last parameter is instantiateInWorldSpace, which from the docs,

When you assign a parent Object, pass true to position the new object directly in world space. Pass false to set the Object’s position relative to its new parent..

Now getting back to the main portion of your question. If you added the grid layout component to your panel, the objects will now be aligned into a grid. There are various different fields on this component you can change. They are on the docs, but I will also list them here for clarity.

• Padding The padding inside the edges of the layout group.

• Cell Size The size to use for each layout element in the group.

• Spacing The spacing between the layout elements.

• Start Corner The corner where the first element is located.

• Start Axis Which primary axis to place elements along. Horizontal will fill an entire row before a new row is started. Vertical will fill an entire column before a new column is started.

• Child Alignment The alignment to use for the layout elements if they don't fill out all the available space.

• Constraint Constraint the grid to a fixed number of rows or columns to aid the auto layout system.

If you properly fill out all of these fields, your UI objects when spawned and childed to the Panel object that has this grid layout component will now not be on top of each other, but will form a grid.