How to mix uGUI with Toolkit UI?

[sharkbitgamesdev]

I saw talk about how you could have a hybrid implementation of uGUI and the Toolkit UI, but I am not quite sure how that is done? If anyone has any insight on this, it would be appreciated.

I ask this because I am trying to convert my uGUI into the Toolkit UI. ButI have been using TMPro to display tooltips when the mouse hovers over certain keywords in a wall of text. But, I don’t think the same is possible using the Toolkit UI? So a workaround would be to use the standard TMPro game object over the toolkit UI. However, if any of you know how to use these features of TMPro on the Toolkit UI, then please do tell!

[dthurn]

AFAIK UIToolkit can only be the topmost element of your hierarchy. So you can display UIToolkit stuff on top of uGUI, but not the reverse. TextMeshPro is not supported in UIToolkit except for a few pre-selected options like outline.

[sharkbitgamesdev]

@dthurn

AFAIK UIToolkit can only be the topmost element of your hierarchy. So you can display UIToolkit stuff on top of uGUI, but not the reverse. TextMeshPro is not supported in UIToolkit except for a few pre-selected options like outline.

Dammit, seems I am shit out of luck. No idea how to do the tooltip over wall of text thing now, unless anyone has a suggestion for this.

Do you know if we have an ETA on TMPro’s port to the toolkit?

[Midiphony-panda]

If your UGUI canvas is in Screen Space - Overlay, you can intertwin UITK panels with UGUI canvases according to their sorting order :

The order will be compared to the sorting order of your UITK panel(s).

[sharkbitgamesdev]

@Midiphony-panda

If your UGUI canvas is in Screen Space - Overlay, you can intertwin UITK panels with UGUI canvases according to their sorting order :

The order will be compared to the sorting order of your UITK panel(s).

You are a hero, man! That’s exactly what I was talking about! Now I only need to figure out how to properly make the UGUI’s size and position matchup to the visual element so that the layout doesn’t get out of whack when it scales or adjusts itself.

I figure assigning an event that will fix the UGUI object’s size and position whenever the UITK changes is a good idea. So I am using GeometryChangedEvent to do that, but I am failing miserably at getting the position and sizes of the objects to match up.

I think I am using the wrong variables to do that? Just using the GeometryChangedEvent’s newRect position and size isn’t making the UGUI object matchup. I think I am ignorant of some type of adjustment or conversion I might need to do here for the objects to align on screen. Any help would be appreciated!

[Midiphony-panda]

@sharkbitgamesdev

I think I am using the wrong variables to do that? Just using the GeometryChangedEvent’s newRect position and size isn’t making the UGUI object matchup. I think I am ignorant of some type of adjustment or conversion I might need to do here for the objects to align on screen. Any help would be appreciated!

There is indeed some scaling/transformation between screen coordinates and UITK coordinates.
You’re not the first one to scratch your head about this ^^"

Take a look at those threads :

Get Size Of Sprite In UIToolkit Space

This might help, but needs to be adapted to your use case: public Rect transformToPanel(RectTransform t, Camera camera) { // Transform from camera space into world space Vector2 rtSize = (Vector2) t.lossyScale; Vector3 rtPos = t.position; Vector3 oPos = new(rtPos.x - rtSize.x / 2, rtPos.y + rtSize.y / 2, rtPos.z); Rect rIcon = RuntimePanelUtils.CameraTransformWorldToPanelRect(_tooltip.canvas.panel, oPos, rtSize, camera); // It seems like…

Positioning Visual Elements in World Space

Hey! Thanks for the reply. This unfortunately isn’t the issue. It works on the native resolution, but with the scale factor, it doesn’t work on other resolutions because the UI is scaled down. However, in this instance, the scale factor doesn’t seem to be of help. EDIT: I was able to figure out the second issue with the scale factor. It seems you need to divide instead of multiplying. public static Vector3 GetGameObjectScreenPosition(Vector3 position, float scaleFactor) { Vect…

[sharkbitgamesdev]

@Midiphony-panda

There is indeed some scaling/transformation between screen coordinates and UITK coordinates.
You’re not the first one to scratch your head about this ^^"

Take a look at those threads :
https://discussions.unity.com/t/858380/2
https://discussions.unity.com/t/835703/4

I hate to ask for help after being provided with the information to help myself, but can a kind soul help walk me through how I am supposed to do this? I swear, I have spent a few hours looking those links up and down, and I am at a loss of how I am supposed to this. What is the correct way to get the size and position of an UITK element to matchup with an UGUI object?

[sharkbitgamesdev]

Okay, so I managed to make it work, kind of? Size is good, just straight up using the rect passed on the event is fine (my problem was a component I forgot to delete on my object, so I was being stupid). Regarding the positioning, this thread help me get very close:

Positioning GameObjects based on VisualElement coordinates

I would like to experiment with UI Toolkit at runtime and my plan is to implement a flexible user interface that adapts to the available screen size by using some appropriate PanelSettings. I would also like to dynamically align some GameObjects in the scene based on the coordinates/bounding boxes of some key VisualElements in the visual tree. There is the GeometryChangedEvent that I could capture to get the bounds of VisualElement and use this to drive the alignment of my GameObjects. Is this…

Instead of changing the UGUI’s position, I changed it’s localPosition (the object is just inside an empty Canvas). That got the position to be pretty close to the UITK object’s position, but it’s still a bit off. Here’s the pretty simple code:

void MatchMainTexts(GeometryChangedEvent evt)
    {
        Rect rect = evt.newRect;

        //UIKtoCanvasPosition is pretty much the function provided on that thread link
        mainTextContainerUGUI.localPosition = UIKtoCanvasPosition(
            new Vector2(rect.x, rect.y));

        mainTextContainerUGUI.sizeDelta = rect.size;
    }

Hope this might help somewhat someone coming across this in the future. At this point I’ll just resign myself to hacking an offset to fix the position. It should be fine until unity implements TMPro properly into the Toolkit.

[Slashbot64]

could you share a sample scene with code of ugui/toolkit … I’ve not really touched UITK but might make the jump if I can find a way to go with current ugui stuff and make newer stuff with UITK…

why on earth Unity never bothered doing something to ease the transition is typical of unity.

[Neiist]

Maybe this can help: GitHub - JC3/UnityToolkitMixingExamples: Examples of mixing IMGUI with UI Toolkit in Unity editor GUI's. It’s Editor window code, but it shows that they can be mixed together somehow, at least in that context.

[NguyenVuUnity]

UI toolkit only supports font asset right now. If u want to use TMP or another thing that doesn’t support in UI toolkit (like shader), use Render texture.

[Neiist]

I can confirm that this approach works to use a custom shader in UI tookit, but it doesn’t support masking or clipping (i.e. if the parent element opacity is less than 1, that custom shader element will remain fully visible, until the parent is totally transparent and no longer rendered).

It respects the order of elements, so you can display ui-toolkit elements on top of the custom shader one.

The shader should also use the shadergraph node “convert color space” from RGB to linear, for colors to match.

I just used it for the background of the world map, with fog-of-war, etc.

I’m using Unity 2022.3 .