Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice

Question How to mix uGUI with Toolkit UI?

Discussion in 'UI Toolkit' started by sharkbitgamesdev, Nov 1, 2021.

  1. sharkbitgamesdev

    sharkbitgamesdev

    Joined:
    Dec 2, 2019
    Posts:
    18
    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!
     
  2. dthurn

    dthurn

    Joined:
    Feb 17, 2015
    Posts:
    77
    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.
     
  3. sharkbitgamesdev

    sharkbitgamesdev

    Joined:
    Dec 2, 2019
    Posts:
    18
    Dammit, seems I am S*** 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?
     
  4. Midiphony-panda

    Midiphony-panda

    Joined:
    Feb 10, 2020
    Posts:
    235
    If your UGUI canvas is in Screen Space - Overlay, you can intertwin UITK panels with UGUI canvases according to their sorting order :
    upload_2021-11-2_11-58-30.png

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

    sharkbitgamesdev

    Joined:
    Dec 2, 2019
    Posts:
    18
    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!
     
  6. Midiphony-panda

    Midiphony-panda

    Joined:
    Feb 10, 2020
    Posts:
    235
    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://forum.unity.com/threads/get-size-of-sprite-in-uitoolkit-space.1181551/#post-7565344
    https://forum.unity.com/threads/positioning-visual-elements-in-world-space.1088110/#post-7012747
     
  7. sharkbitgamesdev

    sharkbitgamesdev

    Joined:
    Dec 2, 2019
    Posts:
    18
    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?
     
  8. sharkbitgamesdev

    sharkbitgamesdev

    Joined:
    Dec 2, 2019
    Posts:
    18
    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:
    https://forum.unity.com/threads/positioning-gameobjects-based-on-visualelement-coordinates.1002876/

    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:

    Code (CSharp):
    1. void MatchMainTexts(GeometryChangedEvent evt)
    2.     {
    3.         Rect rect = evt.newRect;
    4.  
    5.         //UIKtoCanvasPosition is pretty much the function provided on that thread link
    6.         mainTextContainerUGUI.localPosition = UIKtoCanvasPosition(
    7.             new Vector2(rect.x, rect.y));
    8.  
    9.         mainTextContainerUGUI.sizeDelta = rect.size;
    10.     }
    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.
     
  9. Slashbot64

    Slashbot64

    Joined:
    Jun 15, 2020
    Posts:
    236
    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.