How to prevent GUI dialog windows from overlapping?

So here is my situation.

It’s a top down game and when characters speak you see a dialog balloon over their heads.
This dialog balloon follows the characters as they move around the environment.

Now what I want to prevent is the balloons from each character to overlap with each other.

If 2 characters are speaking and they get close to each other then the balloons would not overlap.
Same if a third character gets closer and is also talking, his balloon would stop once it touches the other character’s balloons.

I’m using unity GUI for these and depending on what they are saying the balloons change in height and width.

I managed to get something working for one character where his balloon is able to dodge other character balloons BUT if I apply the same code to the other character balloons they keep dodging each other.

This is what I kind of have in mind:

  • Have a List/Dictionary containing all the occupied spaces (Rect)
  • Current rectangle checks against the list to see if its intersecting with any
    rectangle in the list.(isOverlapping)
  • If isOverlapping, move in the opposite direction of current movement (horizontally and
    vertically) until !isOverlapping

Is there a simpler way to do this? Am I even thinking correctly?

** UPDATE **

So I got it to work but slightly changed the way I’m doing it :

  • Have a list with all the rects
  • Each rectangle checks against all the others. The moment it finds a overlap it tries to fix it (and stops checking for other overlaps).
  • Once its no longer overlaping it tries to go back to orig position and look for overlaps again.

It works pretty well. I also used aSmoothDamp so the rect don’t jerk around when trying to get back to the position.
But you are right, it feels a bit messy, I think probably fixing it in the core design would be better.

This can be a bit tricky ideally you would just have the game set up so the text bubbles would never overlap to begin with with timers character spacing etc.

I also recently set up text bubbles and I’m using the characters position in relation to the camera to determine the position of the text bubble. So there’s really no nice and easy way to have them not overlap since they can constantly move around and I have several camera angles.

I’m not sure the whole problem seems a bit messy to me and I’m almost thinking I’ll just try to design it so that sort of thing won’t be likely to happen in the first place with bubble timers, spacing out the characters a little bit etc.

You might be able to just use GUI.depth to display the boxes in the order of priority or by the time they first appeared they update some kind of public static int that assigns the GUI.depth of that box.

That’s probably what I’ll do at this point if I try to improve it. I think your plan you listed could work really well potentially. Just seems like too much work for me on my project at the moment to attempt something like that, I got a lot of high priority things I need to start at the moment.

Hopefully someone can give you a more useful answer or you can figure it out and post your solution to help myself and others.

At this point I think it’s just gonna be by design that this could happen occasionally but it should be rare if we set up the scenes right.