Creating new UI elements from code?

[MrAkroMenToS]

Hello guys. I am testing and playing with the new Unity UI system, but I feel, I have a missing part or i just couldn’t find it out how to do it, yet. In the old UI system we get the option that we can create UI elements from code. (GUI.Button, for example)
I made prefabs from elements and i loaded them from the Resources folder.
I use GameObject.Instantiate to create the elements from prefab.
Is there any option to create UI elements from code just like creating a Cube(GameObject.CreatePrimitive(PrimitiveType.Cube);

Thanks for the answers and the tips!

PS.: I like to create them from prefabs, because then I can make a loginform prefab with all the buttons and so and i can easily make the form, but I really want to know how to do it from code.

PS2.: Sorry because i dont have the best english in the big world If you cannot understand something please ask me and I hope i can edit my post so you guys can understand me.

[Kylotan_1]

To make an element in code, you can just create a GameObject, put it on the canvas and then assign the relevant UI component to it. Very simple example:

var fff = new GameObject();
fff.transform.SetParent(GameObject.FindObjectOfType().gameObject.transform, false);
fff.AddComponent();

Now, positioning it… that’s a bit more tricky.

EDIT: changed code to use SetParent.

[runevision]

Have a look at the page in the Manual bundled with beta 18 called “UI > How-Tos > Creating UI elements from scripting”.

[MrAkroMenToS]

@Kylotan_1

To make an element in code, you can just create a GameObject, put it on the canvas and then assign the relevant UI component to it. Very simple example:

var fff = new GameObject();
fff.transform.parent = GameObject.FindObjectOfType().gameObject.transform;
fff.AddComponent();

Now, positioning it… that’s a bit more tricky.

Soo If i want to position it I have to add a rectangle component to it and boom, I can position it?
Thanks man!!

[runevision]

@Kylotan_1

fff.transform.parent = GameObject.FindObjectOfType<Canvas>().gameObject.transform;

Please always use the SetParent method with worldPositionStays argument set to false when reparenting UI elements. Not doing that tend to create unexpected and undesired results with people complaining to us that things don’t work. Please help spread this way of doing it rather than using the .parent property when helping others. Thanks!

[Senshi]

@runevision

Please always use the SetParent method with worldPositionStays argument set to false when reparenting UI elements. Not doing that tend to create unexpected and undesired results with people complaining to us that things don’t work. Please help spread this way of doing it rather than using the .parent property when helping others. Thanks!

This is a bit (lot, sorry) of a tangent, but I’m wondering if perhaps you could explain the rationale for this? Especially with so many people making this mistake, why isn’t

uiElement.transform.parent = canvas.transform

just an alias for SetParent(transform, false)? I understand it would be inconsistent with how it normally works, but UI elements are already a special case in that they need to be parented to another UI element in order to function correctly. Perhaps this could be a worthwile exception?

[runevision]

@Senshi

why isn’t

uiElement.transform.parent = canvas.transform

just an alias for SetParent(transform, false)? I understand it would be inconsistent with how it normally works, but UI elements are already a special case in that they need to be parented to another UI element in order to function correctly. Perhaps this could be a worthwile exception?

The reason is that UI elements are not a special kind of objects, they are just GameObjects with components on, similar to other objects in the Scene. One of those components is typically a RectTranform in the case of UI elements, but it varies a lot whether people actually attach the RectTransform component before or after doing the parenting.

I think that if we made the .parent property have the exact opposite behavior for Tranforms and RectTranforms, it would create more confusion than it solved, and it would also be much harder to explain and document in a clear way.

[JAKJ]

Besides, SetParent with true and false have different uses. For example, you can position an element relative to another element by using SetParent with false, utilizing the layout power of the anchors and everything, and then SetParent again with true with the very top level of the canvas so it will remain at the same spot but draw over everything else (like for a tooltip).

[Senshi]

Very good points, thanks both!

[Kylotan_1]

@runevision

Please always use the SetParent method with worldPositionStays argument set to false when reparenting UI elements. Not doing that tend to create unexpected and undesired results with people complaining to us that things don’t work. Please help spread this way of doing it rather than using the .parent property when helping others. Thanks!

I’d never heard of the SetParent method until now. Probably because I was still using version 3 until this beta.