UIElementsの特定の要素にUGUIを重ねる
特定のVisualElementにUGUIのRectを重ねるための拡張メソッド
サンプルのgifでは動的に重ねるようになっているが、必要なければ静的の方が良いと思う。(動的UIにはあまり実用性無い?)
UIElements使いたいけど、どうしても一部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の追従が初期位置のままで、その後追従しなかった。