Highlight: Duke’s UI
So, this highlight is going to be more oriented to discussion how one should do transparency in all elements of the UI rather than the specifics of some of Duke’s choices. Obvi Duke is awesome, and I’m sure he doesn’t need to read me writing it 10 more times. But, for the sake of conformity: this UI is sweet and everyone should download it right now, because it’s going to be the flavor of the month before too long.
The Screenshot (link pops)
Why Transparency?
Before even beginning to add something like full transparency to a UI, this fundamental question must be answered. Of course there is an aesthetic justification, but that’s not a particularly good reason to do something like this. So, what are the justifications qua functionality? Well, the most obvious one is the ability to see more of the gameworld. Players need to be able to see environmental cues to know when to move to get out of the fire, for example. Some of the smaller environmental cues might be obscured by large blocks of UI elements, if they’re kept at full opacity. This is why I’ve been a staunch advocate of having larger elements (i.e. chat frames) kept at least semi-transparent. Changes in opacity are already used to differentiation between units that are in-range and out of range. With some creative coding, someone could set it up such that a unitframe only becomes opaque once someone reaches a particular health percentage and is in need of healing. That’s not really what Duke has done, but I digress…
How Transparency:
The key to making transparency work in Duke’s UI is the same concept as making my Text UI work. The key to both is that you cannot allow important UI elements to become “integrated” with the game world to such an extent that they hurt your ability to play with a UI. This is the most dangerous with a transparent UI simply because, while setting it up, you say to yourself “Oh, yeah I can see that now…it will definitely work when I’m healing X.” So, if you plan to head down this path, I suggest extensive “combat” testing in AV. The other thing you MUST be careful of is making sure that you reduce the opacity on ALL elements of the UI, especially elements which don’t deserve your attention. Duke did a good job of this, by killing the opacity on the Minimap and chat frame.
This is a closer-up view of Duke’s unitframes, and you’ll notice a few things (other than the left cast-bar being wider than the player frame). I actually think this is smart, but Duke used a cloudy and rather dark texture on the Unitframes. This ensures that they won’t “pop” out, which maintains the transparent nature of the UI. Second, and absolutely most important, you’ll notice that the text is NOT faded. This is absolutely key, because it gives you a visual reference on the unitframe that doesn’t require squinting or flinging the camera around wildly to get a better view on a brighter area of the environment. The simple act of putting nicely colored and highly visible text means that the unitframes becomes infinitely more functional.
Also, note that Duke hasn’t included garbage text which could easily distract from the main focus of the unitframes. He’s consolidated the class color into the name, and presumably he has the health text tied to a color gradient to help with instant identification. In the case of his UI however, I think it’s a bad idea to simply use “current” health as the display method; rather, one should choose a percentage or absolute values (current/max). The brain can do calculations on fractions remarkably quickly and the bar itself can become almost unnecessary. This is especially true for healers, who need to make heal decisions rather quickly.
So – I’ve prepared a little check-list of things folks should keep in mind when making their UI transparent:
- Make sure everything is the same, or similar, opacity *EXCEPT* for those elements to which you want to give your full attention.
- Choose bright colors for important elements to ensure their visual primacy.
- Make texture and border choices that don’t conflict with the game-world, because your UI elements want to simulate partial integration.
- TEST the UI before you begin raiding with it – these changes are fairly drastic and require a bit of acclimation.
I expect to see more and more UIs that follow this style, let’s just hope they do it well.
Thank you very much to Duke for posting a download link via the comments.
Iplan on making another post which details both the way Duke did it and another way to do it via PitBull with textures that don’t have the reduced opacity built in.
