Login screen with uxml

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?

public class Login : MonoBehaviour
{
    private void Start()
    {
        var customUI = new CreateNewUI("MY UI", OverlayType.ScreenSpaceOverlay).GetNewCanvas(); //create a canvas and return it

        VisualTreeAsset uiAsset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/Resources/LoginTemplate.uxml");
        VisualElement ui = uiAsset.CloneTree();

        customUI.rootVisualElement.Add(ui); // here is the problem!
    }
}

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.

Hi @griendeau_unity ,

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)?

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.

I think this is what you mentioned:

var panelSettings = UIDocument.panelSettings;
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?

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.

1 Like

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?

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!

2 Likes

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.

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.

Yeah because I created my own panel script and own lib :slight_smile: Thank you very much again, I will try it out.