Vitals Frame 101

Sloppy Joe · #1 02-26-2008, 03:41 PM

Greets,

Since I've been playing around with the vitals frames, I've learned a few tricks and figured I would share them with you. I've noticed not alot of people do vitals frames, and those that do, only do cosmetic changes...They all have the same layout, just different colors and eye candy. So this guide will give you the basics to allow you dramaticly change the layout of your vitals frames. Here's one quick example of changing the layout (opponent vitals frame shown):

Cool huh? I squared and moved the portrait over the morale+power bars, moved the name text, removed the level background and text, removed buffs+debuffs, etc. To do this, there are 2 main blocks of code we need to look at. The first, is the panel file used to build your player vitals frame ingame:

Code:

<PanelFile ID="ID_UISkin_AvatarPanel">
  <Element ID="Toolbar_Quickslot_Extended_Scaler" X="283" Y="526" Width="460" Height="175">
    <Element ID="Toolbar_Quickslot_Extended" X="40" Y="0" Width="420" Height="175"></Element>
  </Element>
  <Element ID="AvatarPanel" X="2" Y="2" Width="274" Height="176">
    <Element ID="VitalsParent" X="0" Y="20" Width="274" Height="156">
      <Element ID="VitalsBg" X="88" Y="42" Width="175" Height="27"></Element>
      <Element ID="VitalsField" X="96" Y="34" Width="168" Height="42"></Element>
      <Element ID="AvatarPanel_BG" X="-1" Y="1" Width="273" Height="105"></Element>
      <Element ID="PlayerPortrait" X="21" Y="21" Width="64" Height="64"></Element>
      <Element ID="PlayerVitals_Animations" X="2" Y="0" Width="277" Height="104"></Element>
      <Element ID="AvatarPanel_COVER_LOWRES" X="22" Y="21" Width="64" Height="62"></Element>
      <Element ID="PlayerLevel_BG" X="21" Y="78" Width="65" Height="32"></Element>
      <Element ID="PlayerLeaderIcon" X="74" Y="68" Width="16" Height="16"></Element>
      <Element ID="PlayerAssistantIcon" X="74" Y="68" Width="16" Height="16"></Element>
      <Element ID="PlayerVoiceChat" X="71" Y="11" Width="20" Height="20"></Element>
      <Element ID="PlayerVoiceChatSquelched" X="71" Y="11" Width="20" Height="20"></Element>
      <Element ID="PlayerSendingData" X="71" Y="11" Width="20" Height="20"></Element>
      <Element ID="PlayerName" X="87" Y="3" Width="176" Height="36"></Element>
      <Element ID="PlayerEffectDisplay" X="92" Y="74" Width="169" Height="64"></Element>
      <Element ID="PlayerLevel" X="35" Y="84" Width="32" Height="17"></Element>
      <Element ID="PlayerPVP_Info" X="-4" Y="-3" Width="34" Height="98">
        <Element ID="PlayerPVP_RankDisplay" X="2" Y="0" Width="32" Height="32"></Element>
        <Element ID="PlayerPVP_PrestigeDisplay" X="0" Y="20" Width="34" Height="78"></Element>
      </Element>
    </Element>
  </Element>
</PanelFile>

Next up is the panel file used to build your opponent vitals frame ingame:

Code:

<PanelFile ID="ID_UISkin_OpponentPanel">
  <Element ID="OpponentPanel" X="268" Y="2" Width="284" Height="130">
    <Element ID="VitalsParent" X="0" Y="20" Width="284" Height="110">
      <Element ID="Opponent_SelectionField" X="7" Y="0" Width="272" Height="120">
        <Element ID="OpponentsVitals_BG" X="10" Y="40" Width="176" Height="32"></Element>
        <Element ID="OpponentVitalsField" X="10" Y="34" Width="168" Height="42"></Element>
        <Element ID="OpponentPanel_BG" X="-1" Y="1" Width="277" Height="104"></Element>
        <Element ID="OpponentClass" X="179" Y="72" Width="20" Height="20"></Element>
        <Element ID="OpponentPortrait" X="186" Y="21" Width="64" Height="64">
          <Element ID="Target_Image" X="0" Y="0" Width="64" Height="64"></Element>
        </Element>
        <Element ID="OpponentName" X="5" Y="3" Width="176" Height="36"></Element>
        <Element ID="OpponentEffectDisplay" X="9" Y="74" Width="170" Height="44"></Element>
        <Element ID="OpponentVitals_Animations" X="-4" Y="-1" Width="277" Height="104"></Element>
        <Element ID="OpponentPanel_COVER_LOWRES" X="186" Y="22" Width="64" Height="62"></Element>
        <Element ID="OpponentLevel_BG" X="185" Y="78" Width="65" Height="32"></Element>
        <Element ID="OpponentLevel" X="200" Y="84" Width="32" Height="17"></Element>
        <Element ID="OpponentPVP_RankDisplay" X="242" Y="-3" Width="32" Height="32"></Element>
        <Element ID="OpponentPVP_PrestigeDisplay" X="242" Y="17" Width="34" Height="78"></Element>
      </Element>
      <Element ID="InanimateObject_SelectionField" X="28" Y="1" Width="228" Height="84">
        <Element ID="InanimateObjectPanel_BG" X="7" Y="26" Width="215" Height="51"></Element>
        <Element ID="InanimateObjectForeground" X="-2" Y="19" Width="231" Height="66"></Element>
        <Element ID="InanimateObjectName" X="11" Y="29" Width="205" Height="47"></Element>
      </Element>
    </Element>
  </Element>
</PanelFile>

Almost every element listed can be moved, resized, or outright removed. To move elements, edit the "X" and "Y" values as needed. To resize elements, edit the "Width" and "Height" values as needed. To hide elements, set both the "Width" and "Height" values to "1". Keep inmind, that once you move the elements around, you WILL have to edit your graphics to match (player_vitals_backdrop, opponent_vitals_backdrop, etc). Don't forget about your alpha channel when editing your graphics!

The alpha channel and you

The first thing I learned about when I started all of this, is the alpha channel. What is it? Basicly, it's like a stencil or cutout of your graphic. If you were to lay the alpha channel over your graphic, you would only see the parts of your graphic that would be under the white parts of the alpha channel.

It is very important if you plan to change the shape of an element, or move elements within a panel file, that you edit your alpha channel to match. For example, when I first tried to make the portraits square, I ignored the alpha channel:

Which gave me this ingame:

But once I made the alpha channel match the shape I wanted:

I got this ingame:

That darn level background

Now this is fine and dandy, but someone will say "You can't remove the level background!" or "You will see 2 level backgrounds if you move it!". This is because not only does LOTRO use the code above along with the "level_background" and "level_background_red" files to rendor it, but it's also in the graphics for "player_vitals_backdrop", "opponent_vitals_backdrop", etc for some reason. If you compare them to the backdrop files for elites and signatures for example, you will see it's not there!

See what I mean? The elite backdrop doesn't have the level background in it, but the other one does! Once you remove it from the exsisting backdrops, or make your own, you can then use the following lines of code from above to move/remove the level background and text on your player/opponent vitals frame:

Level background and text for your players vitals frame:

Code:

<Element ID="PlayerLevel_BG" X="21" Y="78" Width="65" Height="32"></Element>
<Element ID="PlayerLevel" X="35" Y="84" Width="32" Height="17"></Element>

Level background and text for your opponents vitals frame:

Code:

<Element ID="OpponentLevel_BG" X="185" Y="78" Width="65" Height="32"></Element>
<Element ID="OpponentLevel" X="200" Y="84" Width="32" Height="17"></Element>

About the only limitation I have found so far is that while you can move the morale+power bars as one element, you cannot resize them or move them individually...As far as I know at this time. I hope this helps, and I look forward to seeing what people do with this information