Jump to content

Photo

Skinning the cat, a guide to modifying the FE UI


  • Please log in to reply
19 replies to this topic

#1
Radash

Radash

    Respected

  • Retired Reloaded Staff
  • 607 posts
  • Joined 21-July 11
As of Nov 12 I'm discontinuing all my public UI work. Update 5 has been added to complete and round off the project. Details in post #24

Welcome to the Fallen Earth UI modding guide! Its 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. If you find any of those or know something i don't (or have not covered in here) please post a reply or fire off a PM.

There may be a few entries in the guide erroneously reffering 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)


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 making it more read-able
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


Index


Getting started
Introduction to file structure and icon map


What’s with all that talk about that “windi” file?
Wnd.ini breakdown


Breaking the mold
Tutorial on custom shapes


Outside the box
Advanced modding features like transparency and radar


Eeeeewwwie, gui!
grfx_gui.tga breakdown


Miscellaneous things
all the little items


Limitations, restrictions and possible workarounds
Things you should be able to do... but can't. Really a must-read before modding


Suggestions/Ideas
Want something implemented? Add it to the wish list!


FAQ
Frequently asked questions here


UI creations and discussions
Your fellow FallenEarthers have been buuuusy...




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:
grfx_game.tga contains primarily the player and mount vitals/stats, as well as radar elements


grfx_game.wwm is 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)


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


grfx_gui.wwm the equivalent of the game.wwm file, except dealing with the grfx_gui.tga elements


grfx_gear.tga includes the gear/weaponry paper doll screens in their male/female variations


wnd.ini details the positions of UI elements as they appear within the game (details further down)

But wait! There's more! If you call now... So 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 looksie:

bk.jpg Once in a blue moon the launcher will have a hiccups 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, gaction 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 confict 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 paragraph with a grain of salt at the moment as one of the limitations (last one listed) is messing up integration of multiple TGAs. For the time being feel free to use and abuse them for the vitals/mount/radar/buttons areas. Be carefull 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

[img]http://i570.photobucket.com/albums/ss150/AnnaDea/grfx_game_breakdown_small.jpg
Enjoy!

#2
Radash

Radash

    Respected

  • Retired Reloaded Staff
  • 607 posts
  • Joined 21-July 11
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 about as much 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:
Posted Image
Correction: the entries labeled as 12 pt. Arial are actually 11 pt. Arial


[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.

And this concludes our wnd.ini dissection. 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.


3. Breaking the mold

Now how exactly would a “fella” 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.

Disclaimer: The following is an exaggeration purely for demonstration purposes. No direct intentions of *******izing Fallen Earth’s interface.

(The following example UI has been scrapped and is sitting in a dark corner of the HD, feel free to shoot me a quick forum IM should you want it for whatever reason. I recommend taking a look at Clarity UI instead, as it's not only utilizing everything demonstrated here, but also more advanced concepts)

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

:) 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 in 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.


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.

<img src='http://forums.gamersfirst.com/public/style_emoticons/<#EMO_DIR#>/cool.gif' class='bbc_emoticon' alt=':flower:' /> 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 on 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.
[img]http://i570.photobucket.com/albums/ss150/AnnaDea/Pic09.jpg[/img]

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 you 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 since, 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.
[img]http://i570.photobucket.com/albums/ss150/AnnaDea/Counters2.jpg[/img]


d) Bar counters
Slice ‘em, dice ‘em, go to town with it! 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 .wmm

When trying to position everything properly, you will occasionally find that the program just wants to do its own thing anyways. 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 of 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 wmm 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.

g) Playing with the map
[code]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.[/code]
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 holds 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. 

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).

(The screenie turned out a lot darker than it actually is)
Also notice that despite a round mask the game engine doesnt display a perfect circle
[img]http://i570.photobucket.com/albums/ss150/AnnaDea/radar_menu.jpg[/img]
h) “Visible” buttons


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

Customize to 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. Which brings us to the next chapter of this guide.


5. Eeeewwwie, gui!

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 a breakdown: 
[img]http://i570.photobucket.com/albums/ss150/AnnaDea/grfx_gui_breakdown_small.jpg[/img]


a)Target and progress bars

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

On boy! Here we go! A brand new set of bars… (Btw in the initial texture they are the exact same size)
[img]http://i570.photobucket.com/albums/ss150/AnnaDea/Newbars2.jpg[/img]
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 clusterpuck 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 reaaaaally 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)


<img src='http://forums.gamersfirst.com/public/style_emoticons/<#EMO_DIR#>/cool.gif' class='bbc_emoticon' alt=':blush:' /> 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. Same format as for the other window colors in the INI still applies.


c) Window and elements assembly

Decided to mention this after all. 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 the exact same way.

1st) window frame
2nd) Buttons (remove fill and you'll get scroll bars)
3rd) Tabs
[img]http://i570.photobucket.com/albums/ss150/AnnaDea/Windowassembly_mk2.jpg[/img]

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:
[img]http://i570.photobucket.com/albums/ss150/AnnaDea/grfx_mail_breakdown_small.jpg[/img]
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. 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.

Also: 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.

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.


Feel free to post or PM me anything that would go into any of the following sections and I'll gladly add it to the lists!

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 commmunity 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 stongly recommend running each and every one of your UI ideas through this list and adjust if neccessary:

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

General behaviour
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
[img]http://i570.photobucket.com/albums/ss150/AnnaDea/Vitalslimits2.jpg[/img]
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:
[code]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.[/code]
[code]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.[/code]

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)
[code]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).[/code]

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
[img]http://i570.photobucket.com/albums/ss150/AnnaDea/Radar_issues1.jpg[/img]

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)
[url="http://i570.photobucket.com/albums/s...grationbug.jpg"]http://i570.photobucket.com/albums/s...grationbug.jpg[/url]


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 gamebreaker 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:
[code]Originally Posted by meph504  
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 over layed by the standard character icon. If the dimentions of the team close by icon aren't smaller than your normal one (after internal game zooming is applied) it will cause the over laying elements to show on your map. (this can be seen in my current version of my skins)
This behaviour can also be observed regularly outside of teams as normaly 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:
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 following scenario: 3 additional tga files added to a custom skin:
#1 contains vitals, radar, mount
#2 has a few miscellanious 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. Conclusion are 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 function 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, 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)

#3
Radash

Radash

    Respected

  • Retired Reloaded Staff
  • 607 posts
  • Joined 21-July 11
Posted Image
Suggestions/Ideas

Things that aren't broken, but would be nice to have. Note that this is independent from the limitations list. Items in here are both for developers and modders. Some entries/quotes are scavenged from the forums, let me know if you do not want your voice featured here.
Originally Posted by flora  
- Ability to say somewhere if you want a counter to be scalar or radial, so, think linear xp bar, or radial health/gamma/stamina.
- SVG graphics, TGA is cool and all, but it'd be nice if the game used vector graphics, sure would make scaling across setups easier.
- Being able to specify text colours, and perhaps more importantly custom fonts.
Originally Posted by FooisM  
Would love to see a black spec ops style one (UI)
Ability to change NPC colors (squares)
Ability to change chat background
Originally Posted by Qualid  
Patch Notes Version 1.1.2 for Oct. 29
· Added a setting to override the window background color. It can be adjusted using the Window_Background color entry in the wnd.ini.
I strongly recommend making use of this, it's an incredibly looking final touch on all UIs.

Fonts on buttons need an outline, currently the black font is hard to see on dark themes and the greyed out font is practically invisible on bright themes
(same goes for other fonts within the UI)

Scroll bar color/pattern fill could be fun

Location text on radar needs an ini entry, currently its position is fixed which wrecks havoc with bigger radar sizes

Scrolling combat text could use some customization and "Wow effect", currently it is too small and truth be told... too boring (aka: "How in the world could i have missed the 4 blade dancers gunning me all the way down to the cloning facility??") Flashy text effects would be the ultimate icing on the cake here, but for starters font outlines and size/color customization would do the trick

On the above note a 3rd "state" for HP bars would be nice (i.e. a highlight at the end or full>slowly declining>empty)

Multiple requests for a PvP centric UI have been made (Ideas include: A grid overlay, "clock" numbers instead of NESW, focus on PvP related icons, Vitals around crosshair)
Originally Posted by Dungenlord  
It would be nice to see your debuffs and dots on your target window [...]
Some form of reload timer/countdown bar would be nice in addition to the in game animations
Originally Posted by Apache Joe  
[...] 
the game has no UI scaling if using higher resolutions - those people who run at over 1080 know what i mean. mentioned in many other posts [...]
Much requested feature.
My humble opinion: No need for it, keep up the work on variable text elements. Some form of scaling for individual elements such as buttons or tabs would be nice, as would be the repairs on scaling related issues listed in "Limitations". Other than that the modders can come up with UIs utilizing those features.

Party/raid window customization (shape/colors)

Need a creative solution for accomodating rotating NESW latches within a square radar (for when this is possible)
Originally Posted by ed anger  
[...]Is it possible to change the texture for the bars that say "pack" and "strategic map" etc? would be nice to simplify [...]
The NPC chatter toggle is all lost and lonely in the Options>UI menu! It should move in with all of its buddies to the pop up menu in the chat window where it belongs. In fact, while on that note, the extra menu for Help (Channels>Help) is all lost as well! An idea would be to kill it altogether and just leave the one "Help" option with all the other channels
Also mentioning this since in game this is where most players look for it (and they look really out of place in their current locations)

Order of radar icons needs a further look. Player arrows should always be on top. In busy places with a lot of un-skinned corpses (especially caves) player arrows get completely lost under a ton of "skin-able node" icons (that really goes for all areas with a high node density). Similarly mount icons are incredibly easy to lose in major hubs ala Oilville (really not sure how to balance this without having mount icons occluding other icons though). At any rate if this is not something that can be adjusted by the development team, transparency may be the answer here.

Town events need some form of icon on the map/radar. Yes, some places have quests that lead you to those areas, but quite a few do not. A lot of work went into designing events/rewards and players should not skip them due to unawareness of their existence

A lot of UI text such as quest progress/lvl up message or even the event announcements are very boring and blend in a bit too well with the background colors. An idea would be to allow players to insert background images/patterns into the frames, text effects are always welcome though. On that note [System] announcements should have two states, one for the general type and one utilizing the UI event frame, such as server restarts.

Alternating or customizeable loading screens... *droooooooooool*

Customizeable crosshairs... *more drool*

More actionbar customization! Ability to shape, position, split and rebind keys to taste


Originally Posted by DreadLord00  
[..How about] adding a check box option in UI options to activate auto-loot or deactivate[...]
Originally Posted by Kalman  
Would be nice in mouse over of item stack if it had another line telling the total stack weight. Right now all you can see is the weight of 1 item. [...] Should be minor as game (should) already has the weight calculated. Just a matter of displaying the value.
The ability to map any individual progress bar to multiple in game bars (I.e to display HP in different places of the UI)
In combat UI indicators, besides the flashing borders that are surprisingly easy to miss
As suggested by Villa33 custom coloring for different quest icon/ symbol types
There is a full-scale browser in-game, giving it more customization as well as read only access to various info such as stats could open new windows for modability.
And as my final contribution I'm including one of my concept screenies. Not all ideas are 100% refined but it gets the general direction across. It's pretty packed in there, to be exact over 120 different, individual concepts are included here of things that are not doable in-game. (I will not list them, they're for the most part self-explanatory) Almost looks like a different game altogether!
Posted Image
FAQ

Q: Why can't i see any images in this post?
A: User CP > Edit Options > Thread Display Options > Show Images
They are also rather wide, if the forum cuts them off, open them in a new window/tab

Q: I modified the color text entry, so how come AP, LVL and TOTAL AP text remains the same old color?
A: 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?
A: 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 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 beahve 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.

#4
HushfaiL

HushfaiL

    Initiate

  • Members
  • 4 posts
  • Joined 14-August 11
in your last post, the image there with the tricked out UI.... I see you have a custom crosshair with a dot in the middle of it. How do i do that? i searched your thread, and the only mention of crosshair is that you were drooling over the idea of new ones.

#5
hugsbunny

hugsbunny

    Novice

  • Members
  • Pip
  • 28 posts
  • Joined 18-August 11
Hooray! Nad's guide survived the transition! Thanks Radash.

in your last post, the image there with the tricked out UI.... I see you have a custom crosshair with a dot in the middle of it. How do i do that? i searched your thread, and the only mention of crosshair is that you were drooling over the idea of new ones.

I'm pretty sure you will find that there are no custom cross hairs in game. I believe they added some colour customization for for accessibility reasons but that's about it.

It's hard to make out from the picture (I assume) you are referring to, but it's in the "suggestion" section of Nad's post, and it's labelled as a "concept screen". So I'm guessing it's probably shooped.

That's not to say you couldn't incorporate an aiming dot overlay into your UI. You can move several windows/objects of your UI in game (or by using a \fallen earth\settings\user\player.ini file), and with the info in this guide you can also alter its size, dimension, layout, and transparency. What that all adds up to is commonly a modified stats bar (hp/stm/gam) front and centre which also includes an aiming dot on a transparent background.

I'm not sure what the policy is on this, so it maybe worthwhile to practice good cya and check the CoC/ToS first.
My own personal opinion is that in light of an unenforceable analog mod (scotch tape and sharpie) it's probably better to embrace it than rail against it, but that's just me.

Edited by hugsbunny, 22 August 2011 - 06:08 PM.


#6
Chantise

Chantise

    Initiate

  • Members
  • 11 posts
  • Joined 13-October 11
So with a UI build this complex why can't we get a file upload to use as an example or to be able to play with this kind of UI...Makes no since to upload details about an awesome UI that only one person can use!

#7
GENERAI

GENERAI

    Initiate

  • Members
  • 9 posts
  • Joined 16-October 11
So is there any way to just change the colour of the cross hair? say from white to green? or just add a center dot to the middle of it for example

I
- . -
I


Something like that?

Asking because I've seen some people saying they've done it. And if so is it even legal in the game to change the cross hair?

Edited by GENERAI, 04 May 2012 - 10:49 AM.


#8
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
WAZ UP NICE WORK :computerbrain: :computerbrain: :computerbrain:

#9
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
:mrt: :psg: :l33t: :Newhere: :troll_face: LOVE THESE THINGS

#10
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
:rofl: :mrt: :psg: :faq: :uzi:

#11
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
:horseride: :horseride: :horseride: :horseride:

#12
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
:cowdance: :cowdance: :cowdance: :cowdance: :cowdance:

#13
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
DO THE COW DANCE XD :cowdance: :cowdance: :cowdance: :cowdance: :cowdance:

#14
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
:dj: :dj: :dj: :dj: :dj: :dj: :dj:

#15
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
:troll_face: :troll_face: :troll_face: :troll_face: :lovestruck:

#16
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
:BanHammer: :BanHammer: :notworthy: :notworthy: :nicethread: :nicethread:

#17
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
:computersmash: :computersmash: :computersmash: :computersmash:

#18
Rocketman77

Rocketman77

    Initiate

  • Members
  • 11 posts
  • Joined 25-September 12
i did that to 50 of my computers no joke

#19
fuzzy5

fuzzy5

    Initiate

  • Members
  • 8 posts
  • Joined 09-November 14

TY!



#20
youtubeking

youtubeking

    Initiate

  • Members
  • 2 posts
  • Joined 21-January 16

Hooray! Nad's guide survived the transition! Thanks Radash.


I'm pretty sure you will find that there are no custom cross hairs in game. I believe they added some colour customization for for accessibility reasons but that's about it.

It's hard to make out from the picture (I assume) you are referring to, but it's in the "suggestion" section of Nad's post, and it's labelled as a "concept screen". So I'm guessing it's probably shooped.

That's not to say you couldn't incorporate an aiming dot overlay into your UI. You can move several windows/objects of your UI in game (or by using a \fallen earth\settings\user\player.ini file), and with the info in this guide you can also alter its size, dimension, layout, and transparency. What that all adds up to is commonly a modified stats bar (hp/stm/gam) front and centre which also includes an aiming dot on a transparent background.

I'm not sure what the policy is on this, so it maybe worthwhile to practice good cya and check the CoC/ToS first.
My own personal opinion is that in light of an unenforceable analog mod (scotch tape and sharpie) it's probably better to embrace it than rail against it, but that's just me.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users