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

Question Login screen with uxml

Discussion in 'UI Toolkit' started by yuemco, Mar 9, 2021.

  1. yuemco

    yuemco

    Joined:
    Jul 1, 2018
    Posts:
    36
    Hi all,

    I try to create a custom UI using creating a canvas and add the uxml elements in canvas. Here is the code. Is it possible to add the visual elements into canvas? If so how?

    Code (CSharp):
    1. public class Login : MonoBehaviour
    2. {
    3.     private void Start()
    4.     {
    5.         var customUI = new CreateNewUI("MY UI", OverlayType.ScreenSpaceOverlay).GetNewCanvas(); //create a canvas and return it
    6.  
    7.         VisualTreeAsset uiAsset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/Resources/LoginTemplate.uxml");
    8.         VisualElement ui = uiAsset.CloneTree();
    9.  
    10.         customUI.rootVisualElement.Add(ui); // here is the problem!
    11.     }
    12. }
     
  2. griendeau_unity

    griendeau_unity

    Unity Technologies

    Joined:
    Aug 25, 2020
    Posts:
    247
    For runtime UI with uxml, you need to use a UIDocument on a GameObject. From there, you can assign the uxml file you want to load. It creates the runtime panel to which your visual tree will be attached.
     
  3. yuemco

    yuemco

    Joined:
    Jul 1, 2018
    Posts:
    36
    Hi @unity_griendeau,

    Thank you for your reply. I did what you said and it works! I have another question now. How can I change the OverlayType (ScreenSpaceOverlay or 3D space)?
     
  4. griendeau_unity

    griendeau_unity

    Unity Technologies

    Joined:
    Aug 25, 2020
    Posts:
    247
    Great!

    There's a PanelSettings asset associated to the UIDocument. From there you can specify how you want to use it. For 3D space, you would most likely need to apply it to a render texture and put it on a 3d plane in the scene.
     
  5. yuemco

    yuemco

    Joined:
    Jul 1, 2018
    Posts:
    36
    I think this is what you mentioned:
    Code (CSharp):
    1. var panelSettings = UIDocument.panelSettings;
    2. panelSettings.targetTexture.dimension = UnityEngine.Rendering.TextureDimension.Tex3D;
    Should I use another texture for my buttons and labels or is this already cover all 3D features?
     
  6. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    696
    Hey @yuemco , are you using UXML/USS to make your UI? Or are you using the UGUI Canvas component with other components on your game objects like Button for example? I'm asking because from your question I'm wondering if we're all on the same page as to what you're trying to do here.

    Also, UI Toolkit does not support any type of rendering other than screen space, so world space (3D) is not a possibility right now unless you render to a texture and place that texture in the 3D world.
     
    yuemco likes this.
  7. yuemco

    yuemco

    Joined:
    Jul 1, 2018
    Posts:
    36
    Hi @JuliaP_Unity , yes, I am using uxml/uss in runtime. In the beginning, I was confused about the canvas and panel but I got the idea. I have a panel now which takes advantages of uxml and uss. Now I am struggling to create the same UI for 2D and 3D. I am trying to create a render texture in runtime and use it depending on the kind of application (2D or 3D application). I hope I was able to explain my current status.
    Do you have any suggestion for it I mean any tutorial or documentation for it?
     
  8. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    696
    This will only work with the UI Toolkit package so if you're on 2021.2 I suggest getting 2020.2, 2020.3 or 2021.1 and try this out. With the UI Toolkit package selected on the Package Manager (Window > Package Manager), click on the button at the bottom to Import Samples. Then select Window > UI Toolkit > Examples > Rendering > RenderTexture 3D (Runtime) and you'll have a nice sample of render to texture.

    Hope that helps!
     
    yuemco and griendeau_unity like this.
  9. yuemco

    yuemco

    Joined:
    Jul 1, 2018
    Posts:
    36
    That definitely would help! Thank you for your time. I will look into it but my problem is I am using 2019 LTS and our group stick with that. I was able to run uxml/uss in 2019 LTS I hope I can run RenderTexture in 2019 LTS as well.
     
  10. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    696
    I'm surprised the UI Toolkit package works on 2019 for you, it's compatible with 2020.2 and up right now. In any case, with having the package you can use RenderTexture. By the way 2020 has just entered LTS with 2020.3.
     
  11. yuemco

    yuemco

    Joined:
    Jul 1, 2018
    Posts:
    36
    Yeah because I created my own panel script and own lib :) Thank you very much again, I will try it out.