HUDs, Code Design, and Icons

I've been thinking about the design of my unit frames and my HUD and batting around a few ideas. My current design is largely inspired by my old design -- which was created in Stuf and suffered some limitations inherent with using an addon. I've been checking out some more outside-the-box concepts, including an addon simply called Hud, and I'm thinking I want more from my design then what I have.

I've also been having some strange bugs. Well, one strange bug. Specifically, for no conceivable reason, my player unit frame disappears and is never seen or heard from again. It doesn't happen when I zone. It's not when I enter combat. It has nothing to do with attacking or taking damage. It's not even from dying. But it happens time and time again. I decided to take inspiration from Stuf, and their approach to creating unit frames is far different from what Blizzard does. I want to look at a few more unit frame addons, particularly oUF. I may decide to take a new approach here.

In other development news, I grabbed all the icons that my unit frame is using from all the different folders, converted them to PNGs, combined them into one file with their grayscale counterparts, and converted them back into a blp. I was trying to convert them to a tga, but simply removing the background and creating a 32-bit tga file didn't work. It gave it a white background with no transparency. Saving to a png and converting back to a blp worked great for me.

Each icon is centered within a grid space. The PVP icons use 3/4 of that grid space. The Status and voice icons use 1/4. This way, it should be easy to specify what I want from the file. Then simply adding 50% on the x-axis will give me the disabled version. And if in the future, I ever want my own icons (I'm personally not too happy with that "X" as the mute icon, for instance), then I simply update the file rather then creating a new file on the fly and going back into my code to update any place using the old file to point to the new one instead.

Unit Frame Design

The first step in designing most things is to sketch it out. Sometimes pencil and paper works great. Sometimes a program like Photoshop or Gimp can suit it better. For this, I had a pretty good idea in my head, and I wanted a more concrete image, so I got to work designing it on the computer.

I checked Google for an image of the default player frame. Obviously, someone faked the character portrait in that one, but it had everything I cared about. I used it to get an idea of size and proportion while I drew out my background. I wanted rounded corners on one side and square on the other. The target frame will mirror the player frame so this way the portraits appear close like they're going head-to-head. I wanted the portrait to pop up out of the top of the frame a bit instead of being completely square. I made two lines for the name, one for the status, and put most of the icons along the bottom. My idea here was that "inactive" icons would be gray-scale and faded out. Some icons, like the voice and pvp ones, would be click-able in order to turn them on. I put the race, level, and elite/rare status in the bottom right corner.

I went online to find fonts. I had a ton of system fonts, but so many of them looked identical and so many were for foreign languages. So I took some time to look up nice, unique fonts. I also consulted other wow addons for font files like Adventure, Gammon, and Zekton.

For the HUD bars, I created an oval and manipulated it to create the curved bar. Chopped the top, and mirrored it to make the bottom. The idea was that this image would be repeated and layered to be used as the bar itself and the border. Another image would provide the sparkles around the bar. However, when I tried to implement this idea, simply scaling the image didn't create a nice border, so I had to make a new image as the border. Then I realized that layering the images created more problems when adjusting opacity, so I had to chop out the middle section of the border image... which meant zooming into the pixel layer and manually modifying the transparency on the image in order to create a nice, smooth look.

At this point, I was ready to start the coding and getting things functional. Stay tuned!

Catch-up

Several months ago, I started development on a new addon called AhmUI. I wanted to customize the UI, so I started with the Character Frame and created a new look with various enhanced features over the default. I wanted to publish it, so I added options that allow people to change all the colors, and planned to add font options and various other display options, as well as settings for different things. Despite my best efforts to compartmentalize the parts, the project quickly became unwieldy. Patch 4.0.1 was around the corner and threatened to undo all my work, so development died out.

A month ago, I picked the project back up, but with a new direction. This is AhmUI. It's my UI. It's going to be the UI exactly the way that I want it. If people want to change colors or anything, they can write their own addons to do it like they would for the default UI. And if they want their addon supported within my UI, I'll let them worry about that.

This is a big project and I thought it'd be a good idea to chronicle my tale. I'm getting a little bit of a late start, but you haven't missed much.

Starting a new project is always tough. You may not know exactly what you want to do, and you likely don't know how to do the things that you do want. When your task is to modify something the size of the WoW UI, there are a lot of potential starting points and a lot of work ahead of you. The task is daunting.

One simple rule I made for myself to help stay focused and guided was to start with modifying what the default UI has to offer so that I can use Blizz's own files to help guide me and then I'll move on to my own custom features.