How to detect when a UI GameObject is colliding/overlapping another UI gameObject?

[dry flicker]

Hi I am currently trying to make a mini rhythm game system in my project, but how can a UI game object detect when it comes in contact with another UI object. I tried the same a approach with a regular game object using colliders but seems like I don't get anything for the Debug Log?

{
    public Vector2 Velocity;

    private void OnTriggerEnter2D(Collider2D collision)
    {
        while (collision.gameObject.CompareTag("QTE Icon Checker"))
        {
            Debug.Log($"{this.gameObject.name} has made contact with {collision.gameObject.name}");
        }

    }
    // Update is called once per frame
    void Update()
    {
        RectTransform picture = GetComponent<RectTransform>();
        picture.anchoredPosition = new Vector2(picture.anchoredPosition.x - Velocity.x, picture.anchoredPosition.y);
    }
}```

[dusty elbow]

Simply put - Ui and physics do not go together - period

A QTE/rhythm minigame like this is better handled with simple timer logic, not with a physics engine

Also - that while loop you wrote in OnTriggerEnter2D is 100% guaranteed to freeze your game if it ever actually ran.

be careful using while loops if you don't understand them.

[exotic onyx]

An interesting amount of rhythm game questions lately, here's something I wrote in another question: #1399036430499708989 message

[dusty elbow]

maybe a game jam

What Burrito wrote there is good - although I would add the caveat that unfortunately Unity's audio system has its own separate clock from the main game Time class, so the Time class might not be suitable. It's usually better to base your rhythm game logic on the audio clock: https://docs.unity3d.com/6000.0/Documentation/ScriptReference/AudioSettings-dspTime.html

[exotic onyx]

But yes simply put, rhythm game is all about timing, not graphics. Your graphics and your input should be driven purely by time and nothing else.

[dry flicker]

Okay thank you all I will rethink my approach then! I already have movement. I would think the next logical step would just check when the player presses it in between a specific time period?

[exotic onyx]

Dsp time can change mid frame too, it's not reliable. A more proper timing is a bit nuanced, but the idea is the same that you find a sync point between audio time line and your visual time line, then do everything based on frame time.

[dusty elbow]

basically you should have a class that is keeping track of what the next note is all the time, and then when the player presses the button you can see how close they've pressed it to the actual note time. If it's within a certain threshold that's a "hit" and if it's outside then it's a "miss". (you can make it more granular of course with "perfect", "good", etc like most games do as well)

that's a bit oversimplified, but it's the general idea^

[dry flicker]

I made some progress! here is the updated version of my script. I created a variable that will act as the range the player will be able to click the button and count as a success in the rhythm mini game!

public class QTEButtonMovement : MonoBehaviour
{
    [SerializeField]
    private Vector2 Velocity;

    [SerializeField]
    private float timer = 0;

    //The time range that will count as a correct +1 press when the player clicks the right button
    [SerializeField, Range(0f,2f)]
    private float SuccessTmieRange;

    // Update is called once per frame
    void Update()
    {
        timer += Time.deltaTime;
        RectTransform picture = GetComponent<RectTransform>();
        picture.anchoredPosition = new Vector2(picture.anchoredPosition.x - Velocity.x, picture.anchoredPosition.y);

        if(timer < SuccessTmieRange + 0.1f && timer > SuccessTmieRange - 0.1f)
        {
            Debug.Log($"{this.gameObject.name} is in success range, Success Range Time: {timer}");

            if (Input.GetKey(KeyCode.Backspace))
            {
                Debug.Log($"{KeyCode.Backspace} was pressed, Success Range Time: {timer}");
            }
        }
    }
}

typo with my variable i just fixed it but that's what I have as a start, thanks for the insight and help everyone!

I'm hoping to use this as a way to give my player a stats boost if they can get all of the QTE's!

[dry flicker]

Made some more progress!!

[fervent rapids]

I have a UI based scrollable level menu and use the same logic to check when two UI objects pass each other. I created an empty object with a boxcollider2d and set it to isTrigger true in the inspector. I added a UI -> Image to it so that I can see when it passes the other. The other object has a child UI Image so I can see the pass. Here is the script for the game object that will pass the trigger. Hope this helps.
using UnityEngine;

public class SectionTrigger : MonoBehaviour
{
public RectTransform selfTrigger; // Assign to object that will pass trigger
private RectTransform globalTrigger;
private ScrollMapManager manager;
private bool hasTriggered = false;
private bool initialized = false;

public void Initialize(RectTransform global, ScrollMapManager mgr)
{
    globalTrigger = global;
    manager = mgr;
    initialized = true;
}

void Update()
{
    if (!initialized || hasTriggered || selfTrigger == null || globalTrigger == null)
        return;

    if (IsOverlapping(selfTrigger, globalTrigger))
    {
        hasTriggered = true; // Prevent recursive triggering
        Debug.Log($"{gameObject.name} triggered spawn at {Time.time}");
        manager.SpawnNewSection();
    }
}

private bool IsOverlapping(RectTransform a, RectTransform b)
{
    Vector3[] aCorners = new Vector3[4];
    Vector3[] bCorners = new Vector3[4];
    a.GetWorldCorners(aCorners);
    b.GetWorldCorners(bCorners);

    Rect aRect = new Rect(aCorners[0], aCorners[2] - aCorners[0]);
    Rect bRect = new Rect(bCorners[0], bCorners[2] - bCorners[0]);

    return aRect.Overlaps(bRect);
}

}

[dry flicker]

Thanks !