Jump to content
Sign in to follow this  
ShyLO

Fallen Earth UI Modding Guide

Recommended Posts

Welcome to the Fallen Earth UI modding guide!

 

This guide's attempt will be to provide a complete reference for the aspiring UI modder. Now, I'm writing this up as I go along and trying my best to test all assumptions I make (exceptions will be labeled as such), HOWEVER, due to a rather complex behavior of the different UI elements there are bound to be errors and misconceptions in here. 

 

There may be a few entries in the guide erroneously referring to "WMM" files. Please note that those do not exist and should be "WWM"s

(Major updates listed below; minor updates, corrections, and additions will be made when the need arises)

Index

  1. Getting Started
    • Introduction to file structure and icon map
  2. What’s With All That Talk About That “windi” File?
    • Wnd.ini breakdown
  3. Breaking the mold
    • Tutorial on custom shapes
  4. Outside the box
    • Advanced modding features like transparency and radar
  5. Eeeeewwwie, gui!
    • grfx_gui.tga breakdown
  6. Miscellaneous things
    • all the little items
  7. Limitations, restrictions and possible workarounds
    • Things you should be able to do... but can't. Really a must-read before modding
  8. Suggestions/Ideas
    • Want something implemented? Add it to the wish list!
  9. FAQ
    • Frequently asked questions here
  10. UI creations and discussions
    • Your fellow FallenEarthers have been buuuusy...

 

Update 1: Typos, added Chapter "Breaking the mold" 
Update 2: Chapter "Outside the box" 
Update 3: Chapter "Eeeeewwwie, gui", added radar section and found a stack more limitations 
Update 4: Completely mapped grfx_game.tga, edited for opinions 
Update 5 (final): 

  • Expanded the first chapter to include all available files 
  • Added chapter: "Miscellaneous things" and mapped grfx_mail.tga 
  • Rebuilt grfx_gui map to include significantly more detail and included links to high res pictures of all maps 
  • Added a significant amount of color to the text in the guide, which should help to make it more readable 
  • Added community links section 
  • Added one of my concept screenshots to the suggestion section including 120ish different concepts 
  • Updated multiple chapters with the latest of my findings 

 

 

 

________________________________________________________________________

Update: (5/28/2018)

 

#8. "Suggestions/Ideas" have been removed from this section so players can post in the appropriate forum area with a more current list of ideas.

 

Feedback and Suggestions Subforum

 

#10. "UI Creations & Discussions" is technically its own forum. This post will be locked and players are welcome discuss mods on unlocked threads.

________________________________________________________________________

 

 

This guide was originally posted in the old GamersFirst Forums on August 20, 2011, by the retired Reloaded staff member, "Radash". Little to no content within has been changed other than to remove bits and pieces that are no longer relevant (such as him asking users to send him a PM because well, he is no longer available to PM), correct spelling/grammar, or to provide changes to the format of the post.

 

This will take me a little bit, so please be patient and enjoy!

-Shy

 

 

The original post can be found in the link below, however, the old forums will eventually be retired and this link may break. If you see the link is broken, please poke me over PM and I will remove it if I haven't already.

Original Post

  • Like 1

Share this post


Link to post
Share on other sites

1. Getting started

All skins are located in the “Skins” folder within the Fallen Earth directory (install paths may vary). By default you will find the following 6 files:

  1. grfx_game.tga
    • contains primarily the player and mount vitals/stats, as well as radar elements 
  2. grfx_game.wwm
    • a “map” file detailing the coordinates and sizes of UI elements within the grfx_game TGA file, editable with any text editor (See picture below) 
  3. grfx_gui.tga
    • contains target health bars, window elements (frames and icons), the entire menu bar, backdrops for inventory/hotbars as well as other miscellaneous buttons 
  4. grfx_gui.wwm
    • the equivalent of the game.wwm file, except dealing with the grfx_gui.tga elements 
  5. grfx_gear.tga
    • includes the gear/weaponry paper doll screens in their male/female variations
  6. wnd.ini
    • details the positions of UI elements as they appear within the game (details further down) 


In addition to the above list, things can get a tad more complex. If you open your "default" skin, you'll discover quite a few more .TGAs and .WWMs. You can add (copy) any of these files to your project skin folder and modify them (to a degree) as well.

 

Let's take a look:

  • bk.jpg
    • Once in a blue moon, the launcher will have a hiccup and route you through the in-game login as well. This is the first image you see. This one is for login/password only. Also, note that this is no longer a TGA for whatever reason
  • bk1.jpg
    • The image following "bk". This one contains patch notes and the server selection screen.
  • grfx_faction.tga
    • contains the faction wheel, 6 logos, faction labels and the reputation bars
  • grfx_faction.wwm
    • the wwm map for the grfx_faction.tga textures
  • grfx_lobby.tga
    • Buttons and borders used with the "bk"s backgrounds
  • grfx_lobby.wwm
    • the wwm map for the grfx_lobby.tga textures
  • grfx_lobbychar.tga
    • Buttons and borders used within the character selection/creation screen
  • grfx_lobbychar.wwm
    • the wwm map for the grfx_lobbychar.tga textures
  • grfx_mail.tga
    • This one includes mail icons and buttons, attributes screen icons, icons for the crafting categories (also used for crafting facilities on the map) as well as the minimap faction symbols that appear in conflict town and for certain town events.
  • grfx_mail.wwm
    • the wwm map for the grfx_mail.tga textures
  • grfx_radarmask.tga
    • The radar mask, in theory, this would allow a modder to change the shape of the minimap. (The displayed viewing area limits are hardcoded and unchangeable) I say "in theory", as it's currently not functioning properly. (Also note that it doesn't have its own wwm file but is rather defined in grfx_game.wwm)


Pictures being worth more than words, here’s a quick and dirty PowerPoint illustrating the relationship between .WWMs and .TGAs:

 

Posted Image


As you can see in the picture, it is also possible to create custom TGAs and define their names as well. This is strongly recommended if you’re planning on messing with the shapes and general layout. Just create a copy of the existing TGA, rename to liking, clear all content and alpha channel and start anew! (Credit goes to Edell for sharing the custom TGA info with the community)

Please take this paragraph with a grain of salt at the moment as one of the limitations (last one listed) is messing up the integration of multiple TGAs. For the time being feel free to use and abuse them for the vitals/mount/radar/buttons areas. Be careful with radar icons.

  • Use the 1MB 512x512 tga files for copies and keep them the exact same X by Y size as the originals. I have attempted to use individual small files for the UI with very little luck. So save yourself the headaches and use the right size from the start!
    • (For example, the vitals area highlighted in the picture above becomes an interesting mess when used in an individual file (with the exact same sizes/alpha map)


I'm lost! Heeeelp!
"But, Nads!" you ask, "There are soooooo many items in those files! How am I supposed to know what they mean inside the game?!"

Simple! You use a map! Lucky for you I have a copy around! (a breakdown of the gui file is in a later chapter) (It's HUGE, had to condense it all and have only so many precious slots)

Special thanks to Zalum, meph504, and flora for their assistance

grfx_game_breakdown_small.jpg

 

Enjoy! 

Share this post


Link to post
Share on other sites

2. What’s with all that talk about that “windi” file?

 

Having learned where the individual UI components come from, the app now needs to know where to position them on the game screen. This is where wnd.ini comes in. Everything listed here can be repositioned to your liking (and to fit the UI). Now the entries here are about as many modifications as we get access to, no more no less. (without thinking too much outside the box).

 

The named entries are pretty self-explanatory, but here’s a breakdown: 

 

[Start Menu]
START_X=4
START_Y=3
Position of the menu icons in grfx_gui.tga relative to the menu

 

[Wnd]
Entries here deal with window minimize/close button positions and sizes
(very few reasons to touch these, unless you’re rebuilding window frames)

 

[Vitals]
STAMINA_X=153<--------X-coordinate of the stamina bar (as explained in the picture above)
STAMINA_Y=44<----------^^same story, but this is for Y
NUM_HEALTH_X=88<----X-coordinate of the health number
NUM_HEALTH_Y=29<---- ^^same but Y

 

Full Vitals breakdown:

* Correction: the entries labeled as 12 pt. Arial are actually 11 pt. Arial
Posted Image

 


[Mount Vitals] 
Acts in the exact same way as [Vitals] with the exception that HP/Sta text is centered within the bar, with no
way to modify its position. Buttons have the same 3 states as the mail icon.

 

[Tactical Map]
RADAR_SIZE=144
Default 144, The max can go pretty far, though the viewable radar area is fixed at around 160. Keep in mind that the max size won't work with the default UI textures. (see "Radar" entries in the Limitations chapter)

 

RADAR_X=15 radar/button locations
RADAR_Y=17
.
.
SOUND1_X=13
SOUND1_Y=39
SOUND2_X=142
SOUND2_Y=39
The two “noise indicator” bars on either side of the radar, vertical counters, fill down to up. Counter style cannot be changed.

 

ICON_X=9

ICON_Y=172
This one displayes the faction symbols (as found in \skins\default\grfx_mail.tga)

 

[Colors]
As with the text color entry mentioned above the Red and Blue values are interchanged when inputting the html color code. Another thing to note is the fact that these are 8-digit color codes as opposed to the 6-digit one above. The first two digits designate the transparency of the color, ranging from FF, the 100% or fully “solid” color to 00, the 0% or fully transparent one. The six digits after are your usual 6 digit html codes.

  • So if the format is this within wnd.ini:
    • Listbox_Highlight=0xC0BB6501
  • this is it's breakdown:
    • [Menu Element]=0x[2 digit hex transparency code][6 digit html color code]

 

Here are the entries with their examples. The option in question is in red:


Posted Image

 

Added with Oct 29th patch (not in the above pic):

  • Window_Background=0xff202020
    • This overrides the internal window background color and enables you to customize it to your liking.

It should also be noted that text entries are always on top. If for example, a counter (like a bar) overlaps a text entry, the text will always be displayed on top. I have not tested the interactions of individual counters between each other and can’t comment on that.
 

This concludes our wnd.ini dissection!

 

Share this post


Link to post
Share on other sites

3. Breaking the mold

 

Now how exactly would someone go about adjusting the shapes of the UI elements?

Let’s get down and dirty with customization by creating a sample UI with a more "FPS"y feel to it.

 

*Note that you will require an image editor and basic knowledge on editing images and their alpha maps.

 

Step-by-Step:

 

A) First of all, take one of the folders within the Skins directory and create a copy, name to your liking.

  • C:\FallenEarth\Skins\LethalUI

 

B) Make a copy of the grfx_game.tga file within that folder.

  • We’ll name ours grfx_game_mod.tga and keep all of our modified elements separately within it for organization sakes.

 

Posted Image

 

C) Clear all content within the file, as well as all content within the alpha channel

 

D) Get your custom shape; make sure it’s sized to its desired look within the game. (Overlaying it on top of an existing screenshot helps with sizing)

 

E) Create an alpha map of your shape within the tga


F) Now it’s time to define our texture in the .wwm file. So if this is our grfx_game.wwm file…

TEXTURE grfx_radarmask {
TYPE RGBA
FILE grfx_radarmask.tga
}

TEXTURE defaulttheme {
TYPE RGBA
FILE grfx_game.tga
}

TEXTURE mod { 
TYPE RGBA
FILE grfx_game_mod.tga
}[code]
...then this is our extra block, defining our custom file

 

G) Tell the file where to look for the texture (format listed at the beginning of the thread in the first picture (X,Y,Xsize,Ysize)

BITMAP vitals_bkgd {
TEXTURE defaulttheme
REGION(224,37,288,114)

Becomes...

 

BITMAP vitals_bkgd {
TEXTURE mod
REGION(0,0,286,144)

 

 

H) Fire up Fallen Earth and load your UI. Chances are all your interface elements are out of whack but nonetheless the background has the desired shape! (Your coloring will vary compared to the image)

 

I) At this point, you can either try to creatively arrange existing elements within/around your shape or come up with completely custom textures for counters. Sky’s the limit here. Let's see how far we can push it.

 

________________________________________________________________________________________________

 

* Disclaimer: The content presented is an exaggeration purely for demonstration purposes. 

The following example UI has been scrapped and is sitting in a dark corner of the HD. I recommend taking a look at Clarity UI instead, as it's not only utilizing everything demonstrated here, but also more advanced concepts.

Share this post


Link to post
Share on other sites

4. Outside the box

 

Having learned the basics of shape and graphics editing, we can now look at more advanced features and ways of rebuilding our UI. I decided to continue using our previously started Gun UI example and make it a bit easier on the eyes.

 

A) Precise moving

When you start rearranging elements, you will quickly find out that some items, primarily text boxes have their top left coordinate corner pretty far outside the actual text field. Here’s a quick technique to remedy this.

 

Take a screenshot of your UI in action. Open it in your image editor of choice, as well as wnd.ini for the skin. Locate your desired fields within both files. In our case, it’s the Total AP number. In your editor create a bright dot at the x/y location. Now create a selection box covering the entire field and including your dot as the top left corner. Move the selection to its future position and voila! Your dot is now your new x/y coordinate.

 

Note: the above is relative to the position of the UI within the game. X=0/Y=0 are at the top left corner of whatever element you’re working within. For first time positioning, I’d recommend to slap it into the top left corner of the screen making the UI x/y zeroes align with those of the screen.

 

 

B) Transparency

There will be times when you will want to make elements transparent even when other parts of the UI are solid. This can easily be done by adjusting the alpha map. As we already know, black content within it is not displayed, while white areas represent solid colors. Shades of grey are used to make areas transparent. The closer the shade is to black, the more transparent the area becomes; a closer shade to white will make the area less transparent.

 

Following caveats, though: 

  • Let’s assume, for illustrations sakes, that you’ve made the entire area of the vitals screen transparent in the alpha map, leaving no solid (white) areas at all. You will not be able to drag this UI element around within the game. 
  • There is NO mouse collision detection between mouse and alpha map transparent areas! Meaning: Windows cannot be dragged in-game via those areas, nor will button collision checks function in areas where they overlap transparency! (in most cases) 
  • This refers to the alpha-map transparency only and is not to be confused with the in-game transparency sliders.

There are exceptions to this rule, for example, the menu button & friends can be transparent and still function, which seems also to be the case for a lot of buttons used within windows like gear/equipment for instance.

 

It is not possible to select items behind transparent areas, such as buttons or in-game world NPCs.

 

In our example, I’m demonstrating how to use transparency effectively. The area in the bottom right corner is supposed to house the AP counters and I wanted to make it transparent, however still needed a visible dash between the numbers.
 

Pic09.jpg

 

 

C) Adding Text

Is a fairly simple procedure. Fire up your favorite image editor, find a font and slap on some text. A few guidelines though:

  • Try text placement/format on top of one of your screenshots first.
    • Things that may look good on the TGA can look stunningly ugly in-game. If possible try day/night screenshots. Lighting within the game can mess with your design.
  • Think about colors and smoothing (anti-aliasing).
    • As you can see in the images throughout this tutorial some of the default UI letters/numbers utilize smoothing, others do not. Same for fonts, the default fonts are unchangeable and while that handwriting font you picked may look gorgeous in itself, it could very well look out of place once slapped next to your blocky Arial 12pt name. Style is king and should be kept consistent.
  • Carefully chose font colors 
    • Once they’re merged into the image, they can’t easily be changed (see original Fallen Earth UI’s Vitals textures).
    • After a decent amount of playing around with different options, I personally recommend white. Not only does it seem to work best when put on top of health bars, but as an added bonus matches the default name font style. Play around though, your mileage may vary. 
  • Pay close attention to the text entries in the .ini
    • Entries like HEALTH_X and NUM_HEALTH_X are pretty easy to mix up (and you will do it more often than you’d like) 
  • A lot of the text can be omitted.
    • A string reading “0/1085” for instance would make sense within the context of the UI without the need to have “Total AP” or “Unspent AP” attached. Similarly smart positioning can have a similar effect. Putting the LVL number within a LVL radial ring-shaped counter just makes a heck of a lot of sense. (/sly wink at the Fallen Earth graphics designer)
  • Player name: If you can fit it in within the style of your design, go for it, it can add a nice touch.
    • In other cases however, consider the option of removing it from the interface altogether. When was the last time you ran the risk of forgetting your own toon’s name and needed a reminder? Never mind the fact that it’s usually hovering right above the character’s head anyways. Also, removing it makes sense considering the limitations of this text field.

 

**(Steps D-G are pictured further down)**


D) Bar Counters
Slice ‘em, dice ‘em, go to town with it! The only restriction is that they fill left to right, no matter the texture. Try colors that go well with your font colors, especially if you’re overlapping text on top. If you decide to go for custom shaped bars, make sure to throw them into your mod.tga and adjust the .wwm

When trying to position everything properly, you will occasionally find that the program just wants to do its own thing anyway. The picture shows how the numbers are out of alignment, even though they shouldn’t be. Keep adjusting...

 

 

 

E) Radial counter
Last but not least, we have our 2 radial XP counters to dismantle.

 

Their biggest problem (or biggest feature, depending on your point of view) is that they’re well… radial. I’ve illustrated how it works in detail in the accompanying picture. As mentioned earlier in this guide, they can be shaped and textured however you wish, the counting style, however, will still be the same. 

 

Now, this is my own personal opinion, take it any way you like:

The XP sub level counter is more or less redundant as all it does is display progress at 1/10th of a level. It would be marginally useful as a progress indicator IF the level counter would increment in hard 36 degree steps, alas that’s not the case. The main level counter can display all the required information.

 

Bottom line is, it can be thrown out of your designs, without sacrificing any presented information and giving you one less radial headache to deal with too boot!

 

 

F) Bringing the Vitals Area Together
All tips considered, this was the final product. Different backgrounds show the transparency areas in action. (picture above)

f1) Mount Vitals addendum
The Vitals area of mounts follows the exact same principles as the player vitals with a few exceptions: 

  • Centered HP/STA numbers within bars
  • 3 extra buttons (make sure the background has a non-transparent area behind the buttons)
  • In the WWM there are two references to the buttons: One as Mount buttons, the other as vehicle buttons. Use the vehicle ones, the changes to "mount" have not resulted in any noticeable changes.

 

Counters2.jpg

 

 

 

G) Playing With the Map
By default, the map uses only 144 out of the available 160 pixels of diameter real estate. That area is even further occluded by the 4 latches with the cardinal directions within that area. 

Using the default UI:

~16.3K(radar actual) ((144/2)^2)π) minus ~1.5K(4x direction latches) ≈ 14.8Kish visible

VS

Mod: ~20.1K pixels (radar actual) ((160/2)^2)π)

That’s an over 26% increase in radar area! 

 

Note, however, that this does not actually increase the viewing area; it simply stretches the 144 original diameter area to fill the 160 new one, however, this helps a bit with spacing.

 

A possible mod here would be: To use all of it! Rebuild the UI to accommodate the full diameter and tell North and its 3 roomies to pack their bags and move outside.

 


Update:
It doesn't stretch it, but rather increases the viewing area. The limit is also not 160 but more along the lines of 180ish-200ish, however this is not quite useable for a few reasons:

  • The in-game viewing area mask is not centered properly, cutting off more on one side than on the other 
  • The text field of the radar cannot be moved, with bigger areas it overlaps the radar and directional areas 
  • Some objects have different cut-off ranges than others 
  • Bottom line is: all of that creates atrociously looking results with very marginal benefits


Few things to keep in mind:

  • All buttons with clicky animations follow the same order of states:
    • normal > pressed > mouseover (hover)
  • This is on the textures and within the .WWMs
  • RADAR_X/Y is the position of the map including the directional circle centered in it.
  • Layout order (as displayed on screen): 
    • [Back] Radar> directional circle>background>buttons [Front]
  • Custom background shapes will require necessary cutouts.
  • The radar text on top is fixed and un-moveable, regardless of radar size. Account for that in your custom design.

 

Mentioned earlier, but here goes again especially since this is a huge factor when working within the map area:

Keep in mind the collision detection limits with regard to alpha map transparency (mentioned previously). In addition to this, the map background and the ring with the 4 directions share the same transparency slider in game. And No, the map window can’t be moved via that ring... period. (Same goes for buttons) 

 

So an interesting scenario occurs if you’re trying to get rid of the map background while attempting to still keep the polar directions visible: 

  • If you use no alpha map transparency, you will be able to drag the window; however, you’ll lose directions when using the in-game transparency slider. 
  • If, on the other hand, you use alpha map transparency to kill the background, you’ll keep the directions but lose any dragability. 

The duct-tape solution here is to use a small non-transparent area for dragging purposes only and leave the rest transparent. You will also need to put non-transparent areas behind buttons or they will be inactive.

 

 

The two vertical sound indicators are another challenge in themselves. How do you position a bar counter that’s empty? 

This is the big test of whether your math and measurements hold up, as the 2 bars will have to be positioned more or less blindly. I’d recommend putting them on a screenshot first (direct rectangle copy-paste from your .tga). As before, move the map to the far top left corner and position your right bar. That will give you one set of coordinates + the Y for the left bar (if your intention is to keep them level at any rate) Few ways to go from there for the X.

 

A good start would be to measure the distance between the middle-line of your background texture and the right bar and then project that distance to your left. 

 

The functionality of your textures can be confirmed in-game by taking screenshots while walking with your character. To induce an even better reaction of the counter, I’d recommend firing off a few shots (melee swings work too, but not nearly as effective).

 

 

H) “Visible” Buttons


Start menu, left/right arrows and up/down arrows.

 

Customize to your liking, as there are really no restrictions here I have found. Collision works even with transparent alpha maps, making things just a dream to work with.

 

Just make sure to remember that some of these icons (arrows and filter for example) are used in a number of other different screens as well.

 

radar_menu.jpg

(The screenie turned out a lot darker than it actually is)
Also, notice that despite a round mask the game engine doesn't display a perfect circle.

Share this post


Link to post
Share on other sites

5. Eeeewwwie, gui!

 

A little bit of an introduction on the GUI file.

 

The design and layout are drastically different from the game.tga file. It contains a lot more elements, ~350 items by a conservative estimate, all condensed in the same space. “Misplaced” pixels here could have pretty drastic results, so precision is key.


But wait!!” you say “I looked at the file and there are not nearly as many elements as you claim there are!”

 

Reason for this is that hundreds of these elements are 1-2 pixels in size. For example, a simple item like your chat tab consists of 10 different sub-items (a coding and design nightmare I bet). Other items are “invisible” and only exist in the alpha map for their transparency.

 

By the way, GUI elements heavily rely on it. Feel free to use and abuse transparency as much as you want modding this file.

  • (Edit: do NOT use transparency on window frames, it will render them un-clickable. See game.tga transparency limitation for details)

 

In conclusion:

Realistically any attempts to modify the window structure (not to be confused with re-coloring) would be a pretty epic undertaking. That being said, it does what it intends rather well. No reason to reinvent the wheel. A simple increase in contrast or change in color can have the "Uuuu, pretty!" effect.

 

 

Here's the breakdown:

 

grfx_gui_breakdown_small.jpg


 

 

A) Target and Progress Bars

 

“So….” You say “Give me some of those fancy flashy bars they use in all these other games!”

 

Oh boy! Here we go! A brand new set of bars… (Btw in the initial texture they are the exact same size)

Newbars2.jpg


Yep, a big "???" moment indeed.


Let me explain what’s happening here:

Remember that red bar we saw in the texture? It’s not quite obvious but it’s used in 2 places, one is your target display (up on the picture) and the other on as an overlay on your targets. Exact size/image copy/paste so to speak.

Two major differences though: The one in the overlay is scaled to 100% of the target’s health, the one in your target window… well, not exactly sure what it displays, sufficient to say though it’s out of whack.

(Correction: The bar is actually used in 2 additional spots: Death toll and party window)

 

The progress bar on the bottom shows part of the problem. The bar is almost full, even though the texture still has waaaays to go.

 

The magic number here is 61. 61 pixels in length is your maximum bar length without ending up with a clusterfuck as shown in my pictures. Width doesn’t seem to have a restriction, but chubby progress bars really don’t do the aesthetics any favors. Additionally making them a lot wider will result in very messy group windows.

 

To make matters worse in the overlay, the bar’s Y0 is positioned exactly 10 pixels above the name below it. For some of the most important GUI elements, we have an imaginary constraint of 61x10ish pixels… in a game that supports something along the lines of 3000x2000+ resolutions (/bang head on desk)

 

Best compromises are to either make it wide enough to include the entire name (which really doesn't look good on names longer than 61 pixels and completely screws up your party/raid window) or alternatively make it a bit wider than 10 pixels, just enough to reach the top of the lowercase letters. Approximately 12 pixels wide (picture at the bottom above)

 


B) Window background

 

Was not changeable until patch 1.1.2 (Oct 29)
This setting can now be modified by changing/adding the Window_Background color entry in the wnd.ini. The same format as for the other window colors in the INI still applies.

 


C) Window and Elements Assembly

 

All elements within the GUI follow the same internal assembly process such as a that you have many objects that end up forming the overall shape of the final window. I've added a picture below to demonstrate it on a few examples. Other objects are assembled in the exact same way.

1st) window frame
2nd) Buttons (remove fill and you'll get scrollbars)
3rd) Tabs
 

Windowassembly_mk2.jpg

Share this post


Link to post
Share on other sites

6. Miscellaneous things

 

All the little things that didn't fit in anywhere else

 

 

A) grfx_mail

 

The last one of the major TGAs, here's the breakdown:

 

grfx_mail_breakdown_small.jpg

Few things to note:

 

There are two sets of entries within the WWM for the crafting entries:

  • Skills (the ones displayed on the tabs in your crafting window)
  • Facilities (crafting facilities as displayed on your radar/map)

By default, they point to the same textures, but feel free to use two different sets in your mods.
On that note, the tab icons have a fixed 24x24 size, anything larger will get autoscaled in-game. I have not experimented with smaller icons.

  • Not 100% sure on which row of mail icons is used in-game, as they are the exact same thing minus the borders or barely noticeable size differences.
  • Account for the faction icons in your radar design and vice versa. Good places to test them (in S1 anyways) were Embry X-roads monster hunt and the Oilville protection events.

Note: I had no problems calling up any of the items in this file via external TGAs, your mileage may vary though.

 


B) The "bk" JPEGS

 

Mold 'em, shape 'em, customize 'em however you want, just be aware of the text button fields as seen in the original bk/bk1 files in the default folder.

 

I should advise you here that there are also faction themed folders containing various 'bk"s. Please note that the fields on those skins that would correspond with text and buttons are off position-wise (as they are older versions). You could use them, but you would need to (heavily) modify them first.

 

Again, I heavily emphasize that they're not displayed very often. You're looking at a lot of work and trial&fail for marginal results. You have been warned.

 

Share this post


Link to post
Share on other sites

7. Limitations, restrictions and possible workarounds

As a warning, the deeper you dig into the structure of the UI, the more inconsistencies and mindboggling limitations you’ll discover. These are things that have been tried and have failed. If you have more of these to contribute, PLEASE share them with the community including area/description/workaround(if available). There's nothing more frustrating than trying to "fix" something for hours/days/weeks that just simply can't be fixed yet and if you could save someone the trouble, please consider doing so.

 

I strongly recommend running each and every one of your UI ideas through this list and adjust if necessary:

  • Red double-arrow (>>) marked entries are new
  • Green colored text indicates resolved issues!


General behavior
Description:
UI textures and (presumably) wwms do NOT get reloaded if you just relog your character(without an UI change in options), wnd.ini however does. All this means is, you'll be restarting the client a whole lot when rebuilding textures.
Workaround:
Best option currently is:
Options > UI > change the UI (to anything different, doesn't matter) > Change it again to the UI you want reloaded (you should end up with 2 "UI will be reloaded on next relog" type entries in the chat log) > relog

(Make sure to find non-populated areas, maybe crank yor settings down a bit for faster loads, trust me.. it all adds up when you reload hundreds of times. It also helps to find a dense resource area with good respawn times. Might as well make some chips while modding.)


Vitals area (probably applies to radar/mount areas as well)
Description:
You CANNOT place elements outside the background frame. So if you have your background contained in a 200x200 square, any texture elements overlapping the borders will be cut off, text overlapping the border or positioned outside of it will not be displayed at all. (picture below)
(Now you may ask yourself: If these items only need to be outside of the background, why are you positioning them 2000 pixels into the wild (txt file). No other reason than seeing at one glance which UI elements are disabled in the .ini)

Workaround:n/a
Vitalslimits2.jpg
Vitals area
Description:
This one's possibly a bug. The default text fields seem to have an invisible "snap-to" areas, which sometimes can be encountered when trying to place the fields overlapping on top of one another. FE automatically arranges the fields in those cases, modifying the wnd.ini entries (Confirmed at least with the Name/lvl number fields, in the picture all the items are "arranged" even though all have a x0/y0 position in-file)
Workaround:Try to spread text apart, other than that, no

General behavior
Description:
Alpha map transparency mouse collision works on gui.tga elements but not on game.tga elements (Tested on Vitals, radar, mount, window elements, start menu), may be more exceptions.
Workaround:n/a


General behavior
Description:
Fixed font sizes/styles. For many UI elements, like names, ammo counters or target text also color restriction
Workaround:n/a, however! It's a work in progress:

Originally Posted by Qualid
Patch Notes Version 1.1.2 for Oct. 29
UI
· Added an initial UI font size support to the mission dialogue and tracker windows. It can be accessed from the UI options and affects chat as well, but the chat font size can still be customized separately.
Originally Posted by Morgana

Version 1.1.0
Chat
· Added chat color customization for all channels and combat messages. It is accessible from Chat Options.


General behavior
Description:
Counter styles, i.e. the radial XP counters cannot be changed to “left to right bars”
Workaround:n/a

Radar
Description:
Radar size/shapes completely untouchable beyond setting it to the (ini/mask) max 160 circle diameter value.

Tested (and failed):
-Changing the shape of the radarmask
-Creating new radarmask
-Creating new links in wwm to a different radarmask
It appears that something internally overrides any modifications

CorrectionYou can increase it beyond 160! The exact workings (and useability of that) are still being tested (see more in post ??)
Workaround:n/a

General behavior
Description:
Buttons fixed to their respective areas, you can’t slap the mail icon on the minimap for example
Workaround:n/a

General behavior
Description:
What you see is what you get, no current way of adding additional values to the mix, such as a percentage number on a health bar for instance
Workaround:n/a

General behavior
Description:
Everything contained in skins\default is locked, meaning that even if edited the launcher will re-download and replace the files. However it should be possible to create new textures and link them within the .wwms
Workaround:
No need to edit the default folder! Copy the files to your mod-skin directory. The game calls them up first! (This needs more testing on what specifically will work and what won't)

Originally Posted by Butt Ko Witz


I copied all wwm and tga files into a new dir, then I copied them again just to have original back-ups in my "working" dir. I edit files there (in the new dir), and use that dir as my own personal UI in game. If all looks good I then move everything that's been edited to another dir where I keep my zips/readme/screenshots for distribution.

You only need altered files in the custom UI folder, anything missing is (apparently) called from the "../Skins/default" dir.

I haven't altered any wwm files, yet to have a need to. I include um just because I'm unsure if they need to reside with the tga. (as all the default "other" skins, aka "chota, antique, ice, ...", include both the tga and wwm).


Target and progress bars
Description:
Bar behaviour is well... a mess. The exact same bar element used in multiple independent instances, for example red bar in target window, target overlay, group window and death toll. Length restricted to 61 pixels (no matter the texture size),width restricted by position to 10ish pixels, bigger textures scale on in game NPCs but not on UI elements (see bar section for details)
Workaround:n/a

Radar display items
Description:
Suffers from a similar problem as the target bars: items have been re-used in multiple instances during the initial design. For example, the player arrow indicator has been used on the minimap and the big overhead map (where it functions the exact same way), however it also has been used on the "paper" map screen, where scaling becomes a mnajor problem. Let me demonstrate on a concept (picture below): The idea was to replace the arrow with a field of view and, truth be told, had a great look and feel to it(top), however since the arrow texture has grown in size, the scaling and positioning backfire on the paper map. Making matters worse not only is it positioned incorrectly zoomed out, but the higher zoom levels cannot handle the texture at all and fail to display it entirely.

Update 1: It seems that anything over the default sizes will scale improperly on the paper map (smallest tried was a 19x19 radar_waypoint)
Update 2: Smaller items seem to work, IF no alpha map transparency is used

Workaround:n/a
Radar_issues1.jpg

Data migration
Description:
When migrating wwm and ini data between skins elements can be "off target". Example(picture): Above screenie is the source skin, bottom is the target. custom content within wwm and ini has been directly copy/pasted, EXACTLY the same textures in EXACTLY the same locations. Now class, bonus marks to the person that can tell me why the map icon decided to move!
Solution: "ID10T" error, keep track of your WWM changes!! (IMG changed to url, no need to waste precious IMG slots)
http://i570.photobuc....grationbug.jpg


Icons
Description:
The green biohazard quest-giver icon gets colored red internally within the game engine and that process stops functioning when the icon is changed (it just stops displaying its red variant). Not a game-breaker by any means, I did some playtesting and barely noticed the difference, but some people may miss their unfinished quest NPC icons.
Solution:n/a
Icons
Description:
A little lagniappe for other modders, when you are on a team, you are assigned the team icon to your character as well and it is overlayed by the standard character icon. If the dimensions of the team close by icon aren't smaller than your normal one (after internal game zooming is applied) it will cause the overlaying elements to show on your map. (this can be seen in my current version of my skins)

Originally Posted by meph504

 

This behavior can also be observed regularly outside of teams as normally the engine just assigns the player your usual white arrow and overlays the golden directional arrow on top.
Solution: Make sure your player icons are smaller than your player(self) arrow

Icons
Description:
Unlike most icons that give you a bit of wiggle room, the ones on the tabs within the crafting window have a fixed 24x24 size. Even if you define a bigger texture in the wwm, it gets scaled down in game. Not anything major by any means, but something you should be aware of when working with them
Solution:n/a, use 24x24 icons for now

General
Description:
There IS a limit on the number of characters in your UI folder name (unsure on exact number). If you end up with an overly long string it will not show up in game as an option.
Solution:n/a, rename the folder "Rogers_great_and_absolutely_most _awesome_Skin_with really_cool_colors" to something more manageable. You and the game will be glad you did.

Window background
Description:
A user reported flashing on and off of the background within the chat window. Could not replicate on my client, more information needed
**"Dormant" issue, have not heard back and all attempts at replication failed**

Unknown
Description:
Bug: It is quite possible I've hit some internal engine limitation or dependency here, but after days of testing for any possibilities of avoiding this, could not come up with any conclusive results. (Update: band-aid solution in place)

Assuming the following scenario: 3 additional tga files added to a custom skin:
#1 contains vitals, radar, mount
#2 has a few miscellaneous bars (sound/target/progress)
#3 houses a full set of redesigned icons.

Problem: Radar NPC squares disappear (all of them), rendering the radar useless

Assumption 1:
#1+#2 work well together without problems, the squares have a likely dependency on other icons indicating a possible problem with #3
Test:
Take #3, integrate tga and wwm entries into a copy of the default skin
Results:
Success, no problems

The same procedure was repeated for each individual component without any problems. The conclusion is that the engine can handle the individual modifications. I have also tried just the rebuilt radar + icons by themselves thinking that the modifications there could have problems interacting, this, however, did not show any problems either.

Assumption 2:
If files function individually and #1+#2 functions with each other, perhaps there is a hidden limit on the size/number of textures within the wwm.
Test:
Migrated all UI elements from #1 into the default game.tga to cut down on additionally loaded material
Results:
Failure, the problem persists. Also, it creates a horrible mess inside the TGA if you're using transparent areas. In fact so horrible and unmanageable, i've completely scrapped that idea

Conclusion: There is no wwm texture limit, at the very least I haven't hit it, nor is it the cause of the problem.

Assumption 3: n/a, grasping for straws here
Test: Integrating all icons into grfx_game.tga and seeing what happens
Conclusion: Eureka! It works!

Solution: It is a band-aid fix, not pretty by any means, but hey.. it works! Keep all radar icons (tested with all but facilities) within grfx_game.tga! Currently game testing it for stability.

(picture: a-> all icons in a separate tga, b-> all icons within game.tga, both screenies taken after Oct 21st patch) 

Share this post


Link to post
Share on other sites

9. FAQ

 

 

Q: I modified the color text entry, so how come AP, LVL, and TOTAL AP text remains the same old color?
Those 3 entries are hardcoded into the images and can’t be directly modified without editing the texture. You have to open grfx_game.tga in an image editor ala Photoshop or PaintShopPro and manually adjust coloring and levels.

 

Q: I have changed the AlphaMap on one of my TGAs but it's not reflected when I reload my character. Why's that?
Restart the game entirely. For the most graphics related edits this will need to be done... a lot!

 

Q: What are the faction named folders within \skins?
The faction named skins are earlier versions (2 years older) of the two launcher screens you occasionally see when the server has hiccups and does not load straight from updater to the character selection screen. (\skins\default\bk.jpg and bk1.jpg) Not used in the game currently and would need further modifications to make them work

 

Q: For layout purposes, what is the maximum number of party/raid members
If you open your team window, it houses a maximum of 8 players (including yourself), an additional max of 3 team windows pop up next to it as a raid group grows. 8x4=32 members

 

Q: Is there a general UI scaling feature?
Not currently. If you take a look at the limitations list, you'll notice that a number of items do not behave properly if scaling is applied. It is, however, a work in progress. Keep an eye out for future patches and UIs utilizing new features. There will be UIs for high resolutions in the future. 

  • Like 1

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...