Author Topic: Managing 2D overlays so they don't overlap each other  (Read 1940 times)


  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 16
    • View Profile
Managing 2D overlays so they don't overlap each other
« on: August 13, 2014, 04:48:47 PM »
Hi Gang,

We have a 3d action/rpg game that has 2D elements (containing health bars, movement, mana, etc) overlaid on top of our 3d units. We're using a modified UIFollowTarget to bind the 2D widget to our units. However, we get into a lot of situations where the overlays overlap each other and information gets obscured/lost.

Here's an extreme example of what I'm talking about. This is a screenshot from WOW where speech bubbles overlap each other: (apologies for the contained profanity).

In my case (overlays and not chat text), I can think of these things I can do (either one or all of the following):

1) scale the whole UI element down for units that are farther away. In this situation, I would sort the units by distance from camera. Closest unit has unscaled overlay. I would then lerp the scale down to say 0.5  as the units fall away from camera (up to far clip plane distance away). An alternative to this is to scale down the overlay if it's not somewhere near the center of the screen.

2) use the unit's position as a 'hint' to indicate where the element would be, and position them so they don't overlap. I would sort the units in order of distance of screenspace point from screen center (thus: overlays for units near the center of the screen remain near the center). This would be a brute-force n^2 comparison of widget bounds.

3) Just kidding, there is no #3. Has anyone had to solve something similar?