LoTROInterface

LoTROInterface (https://www.lotrointerface.com/forums/index.php)
-   Tutorials & Other Helpful Information (L) (https://www.lotrointerface.com/forums/forumdisplay.php?f=21)
-   -   The Loading Screen (https://www.lotrointerface.com/forums/showthread.php?t=1686)

Eclipse 11-17-2011 12:29 PM

The Loading Screen
 
1 Attachment(s)
Beside all those annoying craps and limitations of LOTRO's interface, I hate the image-stretch the most.
I managed to figure out how to make the fullscreen map shown as windowed, and now it was time to come up with a solution for the loading screen, mainly because of its widescreen distortion.
If you are also interested in it, read on.


Inject these lines into your SkinDefinition.xml and modify the parameters as it suits your will (and screen resolution).

Code:

<!-- Loading Screen -->

<Mapping ArtAssetID="larger_overlay_silver_theater"                                FileName="path of the tga file" />
<Mapping ArtAssetID="theater_top_bottom"                                        FileName="path of the tga file" />

<PanelFile ID="ID_UISkin_Theater">
  <Element ID="Theater_LoadingProgress"                                        X="0" Y="0" Width="250" Height="16">
    <Element ID="LoadingProgressUIElement_Overlay"                                X="0" Y="0" Width="250" Height="16"> </Element>
    <Element ID="LoadingProgressUIElement_Meter"                                X="0" Y="0" Width="250" Height="16"> </Element>
    <Element ID="LoadingProgressUIElement_Label"                                X="0" Y="0" Width="250" Height="16"> </Element>
  </Element>
  <Element ID="StoryField"                                                        X="0" Y="0" Width="1" Height="1">
    <Element ID="HintDisplay"                                                        X="0" Y="0" Width="1" Height="1"> </Element>
    <Element ID="Theater_Anim"                                                        X="0" Y="0" Width="1" Height="1"> </Element>
    <Element ID="Theater_Matte"                                                X="0" Y="0" Width="1" Height="1"> </Element>
    <Element ID="Internal"                                                        X="0" Y="0" Width="1" Height="1">
      <Element ID="Theater_ImageField"                                                X="0" Y="0" Width="1" Height="1"> </Element>
      <Element ID="Theater_MovieImageField"                                        X="0" Y="0" Width="1" Height="1"> </Element>
      <Element ID="Theater_TextField"                                                X="0" Y="0" Width="1" Height="1"> </Element>
    </Element>
  </Element>
</PanelFile>


Elements' description:

Theater_LoadingProgress: The loading bar parent
LoadingProgressUIElement_Overlay: The "larger_overlay_silver_theater" mask on the bar
LoadingProgressUIElement_Meter: The size of the bar (used default image has 16px height)
LoadingProgressUIElement_Label: The Loading... text
StoryField: The overall background parent. Not affects the visibility of loading circle-anim, the loading bar, and the hints
HintDisplay: The hint text
Theater_Anim: The pulsing loading circle-anim (even shown with w=1, h=1)
Theater_Matte: The "theater_top_bottom" cover image. Not affects the visibility of loading circle-anim, the loading bar, and the hints
Internal: The background image parent
Theater_ImageField: The background images (ads and zoning)
Theater_MovieImageField: The background movies
Theater_TextField: Background for the hint texts

Notes:

• If you already have the 2 ArtAssetIDs in your XML, you have to erase those 2 existing lines, to not to have both twice.
• If you use the Storyfield part, you make image-stretching gone
Theater_Matte, Theater_ImageField, Theater_Textfield are the ones covering some appearing background elements while loading, which are: Chat window, Minimap, Questtracker, and pre-loading headover floating texts.
• If you delete or disable the whole Internal part, the background image stays 1024*512, placed absolute middle to Storyfield's width and height
• If you use the line Theater_ImageField (also the Theater_MovieImageField) with higher than 1024*512 it will appear as a pattern, till the width and height of Internal allows it.
• If you don't use the Theater_TextField under the hints, you'll see more than one hint on each other
• You can replace images of your "Lotro install dir\raw\en\logo" ads, but the zoning images will always be 1024*512



Allow me to share my composition for 1920*1080 res. (it doesn't exploit the whole screen, I know)

Preview sample.

Code:

<!-- Loading Screen -->

<Mapping ArtAssetID="larger_overlay_silver_theater"                                FileName="..\misc\loading_progress.tga" />
<Mapping ArtAssetID="theater_top_bottom"                                        FileName="..\misc\loading_screen.tga" />

<PanelFile ID="ID_UISkin_Theater">
  <Element ID="Theater_LoadingProgress"                                        X="448" Y="222" Width="1024" Height="16">
    <Element ID="LoadingProgressUIElement_Overlay"                                X="0" Y="0" Width="1024" Height="16"> </Element>
    <Element ID="LoadingProgressUIElement_Meter"                                X="0" Y="0" Width="1024" Height="16"> </Element>
    <Element ID="LoadingProgressUIElement_Label"                                X="0" Y="-1" Width="1024" Height="16"> </Element>
  </Element>
  <Element ID="StoryField"                                                        X="0" Y="0" Width="1920" Height="1080">
    <Element ID="HintDisplay"                                                        X="0" Y="752" Width="1920" Height="30"> </Element>
    <Element ID="Theater_Anim"                                                        X="916" Y="-200" Width="100" Height="100"> </Element>
    <Element ID="Theater_Matte"                                                X="0" Y="0" Width="1920" Height="1080"> </Element>
    <Element ID="Internal"                                                        X="0" Y="0" Width="1920" Height="1080">
      <Element ID="Theater_ImageField"                                                X="448" Y="240" Width="1024" Height="512"> </Element>
      <Element ID="Theater_MovieImageField"                                        X="448" Y="240" Width="1024" Height="512"> </Element>
      <Element ID="Theater_TextField"                                                X="0" Y="752" Width="1920" Height="20"> </Element>
    </Element>
  </Element>
</PanelFile>


• Plus, attached to this post: my loading_progress.tga and loading_screen.tga for 1920*1080 in a zip. Placed and overwrote these files in my "Eclipse\misc" folder.


Cheers!

Litos 11-17-2011 05:02 PM

Been trying to figure this out for 1280x1024 res but cant seem to get the actual load screens to downsize. I resized the images you provided and edited some code. But im stuck now lol. Im new to this :p

Eclipse 11-17-2011 05:28 PM

Quote:

Originally Posted by Litos (Post 7398)
Been trying to figure this out for 1280x1024 res but cant seem to get the actual load screens to downsize. I resized the images you provided and edited some code. But im stuck now lol. Im new to this :p

So, 1280*1024

• Don't resize my loading_screen.tga, but crop it at top-center reference point. Now you got your 1280*1024 centered cover image. Leave the tga's alpha channel as it is.
• Get my 1920 code and insert it to your xml
• Wherever you see Width="1920" replace it with Width="1280"
• Wherever you see Height="1080" replace it with Height="1024"
• Wherever you see X="448" replace it with X="128" (to make those elements centered to your screen width)

There you go.

ecirbaf 05-26-2013 04:17 PM

Wow that loading screen is superb. I'll have to adapt it for 2560.

Indeed the stretching of images fullscreen is horrible.

Thank heavens for Eclipse UI and the small map trick.


All times are GMT -5. The time now is 03:11 AM.

vBulletin® - Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
© MMOUI