見出し画像

UIElementsの特定の要素にUGUIを重ねる

特定のVisualElementにUGUIのRectを重ねるための拡張メソッド
サンプルのgifでは動的に重ねるようになっているが、必要なければ静的の方が良いと思う。(動的UIにはあまり実用性無い?)

UIElements使いたいけど、どうしても一部UGUI使いたい時向け

VisualElementの上にTextMeshProのついたImage(UGUI)が追従している様子

UIBuilder(上)でuxmlを更新すると、GameView(下)にも反映されている。
追従目標のVisualElementは緑色で、追従させたいImage(UGUI)は赤色、Imageの子オブジェクトにTextMeshProがある。

スケールを変化させたときや、ScreenSizeが変更されたときも動作するようにしてある。

UIElementsExtentions.cs

public static class UIElementsExtensions
{
    public static void OverlapUGuiElement(this VisualElement visualElement, RectTransform rectTransform)
    {
        var canvas = rectTransform.GetComponentInParent<Canvas>();
        if (canvas == null)
        {
            Debug.LogError("Canvas is not found.");
            return;
        }
        
        var rect = visualElement.worldBound;
        rectTransform.position = new Vector2(rect.x, -rect.y + Screen.height);
        var size = rect.size * (1f / canvas.scaleFactor);
        if(!float.IsNaN(size.x) && !float.IsNaN(size.y))
        {
            rectTransform.sizeDelta = rect.size * (1f / canvas.scaleFactor);
        }
    }
}

UIElementsExtensions.OverlapUGuiElementを使うサンプルコード
TestView.cs

using UnityEngine;
using UnityEngine.UIElements;

public class TestView : MonoBehaviour
{
    [SerializeField] private UIDocument _uiDocument;
    [SerializeField] private RectTransform targetRectTransform;

    private VisualElement _visualElement;
    
    //OnEnableで呼ばないと正常に動作しなかった
    //初期位置にだけ移動してからその後追従しない
    private void OnEnable()
    {
        var root = _uiDocument.rootVisualElement;
        _visualElement = root.Q<VisualElement>("Test");
    }

    private void Update()
    {
        _visualElement.OverlapUGuiElement(targetRectTransform);
    }
}

OnEnableで初期化処理を行わないと、Imageの追従が初期位置のままで、その後追従しなかった。


この記事が気に入ったらサポートをしてみませんか?