Trouble with the levelmeter (looking for a XML reference)
 

Hi,

we finally have F2P in Europe and I started to work on some UIs and plugins. And now I've encountered a problem I cannot solve on my own. Please have look:



As a comparison, this is how the levelmeter should look like:



As you can see the levelmeter is a complete mess. The frame around the levelmeter and especially around the levelmeter text doesn't work, the little highlight doesn't work properly either. And I have no idea, how to fix this. I guess, that I'll have to work with the appropriate element IDs, but I don't know these IDs. A current XML reference might be really helpful. The current UI Skin Art Package doesn't contain the information I need (or I've missed them).

Here's my current code:

Thank you in advance for any help you can provide and sorry, if have been to tired to find the informations I need.

Toolbar panel from V3B2 UI Skin Art Pack

Um, must have missed that passage. How embarrassing, but thank you very much. This should help.

Glad I could help. Don't be embarrased, we all make mistakes. At least you asked for help :)

Ok, I'm nearly done, but there's on thing I cannot solve.



The image doesn't show the current state, but it's good enough to explain the problem. As you can see the "highlight effect" doesn't cover the entire levelmeter. But it's not the highlight that is to short, it's the background of the levelmeter text that is misplaced. It should lay behind the text but instead it is misplaced to right where it covers the highlight effect.

So how can I move the text background into the center and behind the text. I cannot find the identifier for the background.

Here's the code of my levelmeter

Something missing or any mistakes?

Oh my god, it's an image. It's just an image. I feel stupid again.

The image is named

letterbox_bottom_glass_overlay.tga

and can be found in the latest skin art pack. When you are done with the repositioning of the levelmeter, grab the image, reduce the size of the image to fit your levelmeter (beginning from the center of the image; you have to keep image symmetric), resize the black space in the center of the image to fit the space between the two middle caps and, if necessary, move the alpha channel to make sure, that the gaps in the glass overly match match the gaps in the level meter fill image (the offest filter of Photoshop is very useful at this pint).

This is my final result:

Cheers. Might come in handy at near future

Another advice: If you want to make sure, that the two pixel border of the levelmeter fill image won't cover the (visible) borders of the levelmeter, use the caps to create a frame around the level meter. Make them half size of the levelmeter, place the left one at the left border and the right one at the center (but not centered of course).

The outer caps will cover the levelmeter text (and unfortunately everything else that might cover the levelmeter except for the inner caps) so you will have to draw some "empty spaces" into the alpha channel. At this point you'll still need a top- and a bottom-border in the letterbox-image which will become visible instead of the the cap-images (but they won't cover anything of course). It's quite painful (my letterbox has three "layers" just for the levelmeter and just because the levelmeter has a stupid "two pixel border) but it works.

You won't have to create an complete levelmeter-frame in the letterbox image since the levelmeter fill image will cover the anything. You just need a top- and bottom-border as mentioned and only when you want to create a two pixel frame around the level meter like I did.

The code for my letterbox. Might become handy too (couldn't test the tutorial highlights yet):

P.S.: Another solution: Draw the entire the levelmeter frame (maybe even with the glass overlay) in one image, use this image as mid left cap (not as left cap because the left cap would cover the levelmeter text) and the remove the other caps from the code (and the glass of overlay if necessary).