How to instantiate elements on UI

UI UGUI
1

Hi. I am quite new with Unity 3D and c#. I am still trying to find my way. The manual is really not helping, it looks it was created by people who knows Unity for people who knows Unity and don’t look for answers.
You now understand I am looking for a step by step answer for starter, not these answers from IT to IT.

So, my problem is the following. I am looking for a complete step by step noob answer on how to instantiate different elements at random position in a panel on a UI giving the panel has a max offset and min offset. There are about 190 elements to instantiate in 32 different panels. Each element will have to be scaled in x and y and get a random rotation. The elements are buttons. I think I need to create one prefab and then after, it’s darkness. I am trying to understand the syntax of the instantiate but it is really not clear where I need to put the x,y, the x scale, the y scale and the rotation.
Btw, I still don’t understand how to scale any UI element via script.

2

Best to check the editor scripts of either the main UI source (https://bitbucket.org/Unity-Technologies/ui) or in the UI Extensions project (link in sig)

The trick is to position the RectTransform position, sizedelta, offsets and anchors. A little more complicated than basic 3D but easy once you get the handle on it.
Instantiating it is the same so long as the new UI object is a child under a Canvas.

Play around with adding some of the controls in the UI Extensions project and then look at the Editor script to see how they are placed / organised.

Hope this helps.

3

Thanks a lot but not really.
I was expecting a noob answer, kind of didactic, step by step.
It rather brings additional questions:
1/ What is the link you gave, what does it contain ?
2/ What is sig ?
3/ The main problem: how to position and size the button, I still fail to understand the syntax of instantiate. My button is not visible on any part of the screen which makes it difficult to position. :slight_smile:

4

Sig means my forum Signature :smile:, where you will see a link to the UI Extensions project :smile:
Or simple look here: https://bitbucket.org/ddreaper/unity-ui-extensions

Scaling is done with the SizeDelta property, position is done with the RectTransform, as well as rotation.

Watch the UI Learn tutorials fist :

Then progress from there.

5

Thanks for the explanation. I have used the tutorial 5 weeks ago. Actually, my simulation is only using UI, no 3D elements at all, no movements as well. It is static in space but very complex and dynamic in time (it is actually not a game).

Still not working. The syntax seems correct, no error message. But I can’t see my buttons.
It’s so annoying to have the proper algorithm and being slow down for just stupid coding.

Sorry, I developed and published 3 (successful enough to pay my studies and trips) games in the 80s and 90s, using assembler, Pascal and Basic for the launcher, I much more prefer assembler or Pascal, less advanced code, more to create but SO MUCH LESS trouble to remember, or rather find, the proper instructions/variables etc. And I just made a build: it’s so big ! I programmed an ayo/awele game for training myself. It was taking 38Kb on a Psion 3, it took 7.5 Mb with very basic 2D low resolution graphics with Unity3D.
Just ranting…

6

By the way, here is the code, it displays the structure name, so the visibility algorithm works, but nothing shows:

public void Structure()
{
for (int i = 10 * blockSelected; i < 10 blockSelected + Init_Block.blknumbStruct [blockSelected]; i++) {
if (strVisible ) {
Debug.Log (strname );
GameObject buttonS = (GameObject)Instantiate (prefabStruct) as GameObject;
buttonS.transform.SetParent (structPanel.transform);
_}
}
}*_

7

I’ll whip up a simple scene for you tomorrow, I think it needs a little more but memory is failing :smile:

8

@OlivierRigel

hi there,

Your instantiate has a cast twice, don’t know if that mattered.

I wrote some example code.

I’m pretty noob but have already wasted good amount of time learning Unity…

Manual can be bit hard, it’s like you described…
Better check official Unity video tutorials…

Below I pasted some examples how to instantiate, move, rotate, scale and resize UI items.

NOTE:
I typed the structPanel as RectTransform, but it’s not shown here.
And I also cut away your for loop details.

NOTE 2:
It’s also worth noting that it matters quite a lot how you setup your UI elements - if you want to have sprite like behaviour, first inspect / set your pivot and stretching. Place your UI element on canvas, then change pivot to be center or left bottom for example, what makes the calculations of positions easier for you later…
Also, sprites are most like better used as “elements” some make them non-stretchy, by picking centered anchors… If you make elements stretched then you are basically calculating distance to parent RectTransforms edges, not actual size of your sprite like I did here…

for (int i = 0 ; i < 10; i++)
{
   if (strVisible)
   {
     // Instantiate
     GameObject buttonS = Instantiate(prefabStruct) as GameObject;

     // Parentation
     buttonS.transform.SetParent(structPanel, false);

     // Get rectTransform of UI item
     RectTransform brt = buttonS.GetComponent<RectTransform>();

     // Add some random offset to UI item
     brt.localPosition = brt.localPosition +
     new Vector3(Random.Range(-distance, distance),
     Random.Range(-distance, distance));


     // Add random rotation around z as deg
     brt.rotation =  Quaternion.Euler(0f, 0f, Random.Range(-180f, 180f));

     // Add random ~scaling~ between 1-1.5
     float s = Random.Range(1f, 1.3f);

     // Most likely don't want to do this, scaled UI item might not be good idea
     //brt.localScale = new Vector3(s, s, s);

     // Change dimensions instead you probably want to do this
     //if not animating size - offset to current size
     brt.sizeDelta = new Vector2(brt.sizeDelta.x * s, brt.sizeDelta.y * s);
   }
}
9

Sorry for late reply. I found the solution alone the same day ! My only two problems were to delete these instantiated elements when plotting a new map and reproduce them as equal when replotting the same map. I used destroy and random.initstate.
Apart from this, the system is now acceptable (still have some problem with coordinates but it’s just a question of adjusting…)

10

Please am trying to design a drag and drop system for my game but the problem is the tile drops in an empty slot and i need it to replace the tile in the new slot. Please help, how do i replace the tile with a new one.

11

I will be in this problematic soon. I have a very complex part of my plateforme which is including drag and drop…

12

@Creer_LLC

hi there, you might be better of asking this in a separate thread.

But basically for drag and drop’s drop part you can do following:

  1. When dragging, keep reference to item you drag.
    You might already do this, if you show item’s image while dragging.

  2. When you drop the dragged item over another UI element, check that it’s some type of slot (or whatever you call it)

  3. Then make the slots have a method that you can call from dragged item.

  4. Finally call this method on drop event and it can assign item to slot if it’s free.