Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Creating new UI elements from code?

Discussion in 'UGUI & TextMesh Pro' started by MrAkroMenToS, Sep 2, 2014.

  1. MrAkroMenToS

    MrAkroMenToS

    Joined:
    Nov 16, 2013
    Posts:
    41
    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.
     
  2. Kylotan

    Kylotan

    Joined:
    Feb 17, 2011
    Posts:
    212
    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<Canvas>().gameObject.transform, false);
    fff.AddComponent<Text>();


    Now, positioning it... that's a bit more tricky. :)

    EDIT: changed code to use SetParent.
     
    Last edited: Sep 3, 2014
    MrAkroMenToS likes this.
  3. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    Have a look at the page in the Manual bundled with beta 18 called "UI > How-Tos > Creating UI elements from scripting".
     
    MrAkroMenToS likes this.
  4. MrAkroMenToS

    MrAkroMenToS

    Joined:
    Nov 16, 2013
    Posts:
    41
    Soo If i want to position it I have to add a rectangle component to it and boom, I can position it?
    Thanks man!!
     
  5. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    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 likes this.
  6. Senshi

    Senshi

    Joined:
    Oct 3, 2010
    Posts:
    557
    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

    Code (csharp):
    1. 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?
     
  7. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    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.
     
    Senshi likes this.
  8. JAKJ

    JAKJ

    Joined:
    Aug 17, 2014
    Posts:
    185
    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 likes this.
  9. Senshi

    Senshi

    Joined:
    Oct 3, 2010
    Posts:
    557
    Very good points, thanks both!
     
  10. Kylotan

    Kylotan

    Joined:
    Feb 17, 2011
    Posts:
    212
    I'd never heard of the SetParent method until now. Probably because I was still using version 3 until this beta. :)