Author Topic: Calling on all the UI modders  (Read 822 times)

Noxbrood

  • Guest
Calling on all the UI modders
« on: January 30, 2007, 01:21:58 am »
Hello,

I don't know if this should be in Development forum, Fan Art or here, so just place it anywhere it's most appropriate.

Ever since I've started playing PS, I didn't like how bulky its UI was. The biggest offenders being "Inventory" and "Combine Glyphs" screens, which are extremely inefficient and block nearly the whole viewing area. I'm not talking about graphics - they are ok, I would even call them "fancy". Perhaps, too fancy even. It's the layout that's inefficient and uncomfortable.

All three available skins have problems with lining things up perfectly. There is always either a scroll bar or an icon that doesn't line up. Most of the default UI's icons and buttons are 32x32 pixels, while the "elves" and "stone" skins' icons are around 64x64 or 66x62 at times. The main toolbar for all skins is actually 128x128 per icon. And yet, the inventory placeholders in default skin are around 48x48 or 64x64. None of the UIs seem to be displayed at something consistent.

Here is where I decided to explore the possibility of making my own UI. But without any guides or explanation on what XML tags are actually defined, what other main tags they affect, and what is possible without having to modify the source code itself, it's a very daunting task to do it by trial and error. Nonetheless, I've figured out quite a few things so far.

Another problem is my idea of modding the main UI involves a very drastic change to the layout, graphics, and even the items icons themselves, all of which I'd be willing to modify. But without knowing whether something like that would even be accepted as a default UI, it's very discouraging to even try.

There is also a problem with exporting .DDS files from "art" folder. Whether I use a Photoshop .DDS plug-in or Nvidia's own .DDS utilities, many item icons end up distorted, like someone has smudged them. For example, try exporting "Gloves", "Boots" and "Dagger" icons - they all appear fine. But try exporting "Torso" (ie Body Armor), "Arms", and various weapons like "Axe", and it becomes a complete mess of smudges, artifacts, and other anomalies, which should not be there.

What is my idea of an efficient layout for "Inventory" and "Combine Glyphs"?

Well, here is a sample graph for inventory:



I've actually already made a graphic for this graph but I'm not posting it to avoid a risk of it not being used in the future, since "everything that's posted on forums...". You know the drill.

The "InventoryDoll" would be to the left of it in its nice little frame. Money, weight, capacity, Circles, Hexas etc would be below, with money icons preferably in a single line like in a shopping window rather than a 2x2 grid (is this possible with XML only?).

Now, by default, the actual unequipped inventory items in your possession would be to the right of it, consisting of two columns, 7 squares long, and with a scrollbar. Problem is, it's once again uncomfortable, where you have to scroll vertically forever, just to get to all your items. And it's very limiting to only have two columns too.

What I tried was adding "Bulk2" and "Bulk3" to "Bulk0" and "Bulk1", and arrange inventory below the equipment, essentially making a rectangle of 5x3 or 5x2 squares. You still have the scrollbar on the right but the immediate inventory is a lot more accessible, and you can still scroll down for yet more slots, maximizing the comfort and efficiency.

Well, the extra columns show up, all right but putting any items in them does not work. They just return to the first two.

Examining "containerdesc.xml" indicates that "Bulk2", "Bulk3", "Bulk4" and "Bulk5" are defined. But it seems that they are reserved for something else. Is this possible to do it the way I want  with XML only or are we limited to 2 columns only that scroll vertically? Also, is it possible to control the spacing between individual inventory slots within the "Bulk List" columns? Meaning that if I didn't want each individual square so bunched up together but have them say, 4 pixels apart or so.

There so many more things. For example, almost all alternative skins are ruined by the glaring yellow border, which is defined in "prefs.xml". Try setting every color of that border to a value of "50", and everything starts looking much much better. The problem though is that this border affects every single border in the game - from progress bars to borders around UI elements. Removing this border by setting 'border="no"' also gets rid of the title bars for UI screens, so that's not a solution.

Is it possible to define individual border colors and their transparency for individual UI elements?
Is it possible to keep the title bars but remove the borders?
If so, how?

Actually, in majority of MMORPGs I played, the "Equipment" and "Inventory" are separate UI windows. I'm not sure why it was necessary to bunch them up into one. The "Small Inventory" is a separate window in PS but it too looks way too bulky, clumsy and uncomfortable.

As for "Combine Glyphs" UI screen, here is a rough sample:



This isn't anything perfected and it's just basic color codes to distinguish different areas but basically the idea is that each Magic Way would only show a 3x3 grid, with little tab icons on the right (or anywhere) that switch between different ways. There is no need to have all magic way grids displayed at once on the screen.

Is this currently possible with just XML?

There is so much more I'd like to ask but it would make this post even longer than it already is.

Also, I'm in no way committing to this modification or promising anything. A lot of people have mentioned on this forum that they would make this and that UI but never came out with anything. It's a very hard work. Try it yourself and see. I've already spent two weeks just trying to figure out what's possible with just XML.

Thanks.
« Last Edit: January 30, 2007, 01:52:15 am by Noxbrood »

Nikodemus

  • Prospects
  • Veteran
  • *
  • Posts: 1808
    • View Profile
Re: Calling on all the UI modders
« Reply #1 on: January 30, 2007, 09:52:07 am »
Hi, I will comment a bit on what you think. Good points. GUI isnt perfect, but it isnt like we can do huge things only through xmls.
All three available skins have problems with lining things up perfectly. There is always either a scroll bar or an icon that doesn't line up. Most of the default UI's icons and buttons are 32x32 pixels, while the "elves" and "stone" skins' icons are around 64x64 or 66x62 at times. The main toolbar for all skins is actually 128x128 per icon. And yet, the inventory placeholders in default skin are around 48x48 or 64x64. None of the UIs seem to be displayed at something consistent.
This has nothing to do with image size. what you see in game will be always the same size in the same resolution. What may change, is the image quality, but paws (the system thnx UI workd) screws up the images anyway, like they were resized 2 times (up and down), before we can see them on the screen

Another problem is my idea of modding the main UI involves a very drastic change to the layout, graphics, and even the items icons themselves, all of which I'd be willing to modify. But without knowing whether something like that would even be accepted as a default UI, it's very discouraging to even try.
Talk with devs about the art, it is ask for permission, if you should ever do it. Also, keep in in there are 3 skins. If you want to contribute something, you have to do it for all 3 sins ;P Furthe, I gues devs has the bigger versions of backgrounds and it is they who should do the backgronds, but skilled artist may do similiar job, basing on what is in the client. Unfortunately it is the only way for us to do it, when we arent devs.

The "InventoryDoll" would be to the left of it in its nice little frame. Money, weight, capacity, Circles, Hexas etc would be below, with money icons preferably in a single line like in a shopping window rather than a 2x2 grid (is this possible with XML only?).
look for money.xml or something like that and test it out.

Now, by default, the actual unequipped inventory items in your possession would be to the right of it, consisting of two columns, 7 squares long, and with a scrollbar. Problem is, it's once again uncomfortable, where you have to scroll vertically forever, just to get to all your items. And it's very limiting to only have two columns too.

Quote
What I tried was adding "Bulk2" and "Bulk3" to "Bulk0" and "Bulk1", and arrange inventory below the equipment, essentially making a rectangle of 5x3 or 5x2 squares. You still have the scrollbar on the right but the immediate inventory is a lot more accessible, and you can still scroll down for yet more slots, maximizing the comfort and efficiency.

Well, the extra columns show up, all right but putting any items in them does not work. They just return to the first two.

Examining "containerdesc.xml" indicates that "Bulk2", "Bulk3", "Bulk4" and "Bulk5" are defined. But it seems that they are reserved for something else. Is this possible to do it the way I want  with XML only or are we limited to 2 columns only that scroll vertically? Also, is it possible to control the spacing between individual inventory slots within the "Bulk List" columns? Meaning that if I didn't want each individual square so bunched up together but have them say, 4 pixels apart or so.
No ;) All not possible.

Quote
Is it possible to define individual border colors and their transparency for individual UI elements?
Is it possible to keep the title bars but remove the borders?
If so, how?
You know, I even like the current border color ;) Maybe someone could play with the collors inside a bit to balance them out... but i don't think effects would be amaizing. Also, i think there should be one prefs.xml for each skin.
1. I don't think so
2. Yeah. Inside the main <frame /> put  border="yes" justtitle="yes"

Quote
Actually, in majority of MMORPGs I played, the "Equipment" and "Inventory" are separate UI windows. I'm not sure why it was necessary to bunch them up into one. The "Small Inventory" is a separate window in PS but it too looks way too bulky, clumsy and uncomfortable.
Nope, i think the way to go is inventory in segments, and you can choose to display only some of the segments. Ultimately the way to go, are resizable segments, where for example also area for items is resizing, giving different combinations of width x height.

EDIT:

Quote
This isn't anything perfected and it's just basic color codes to distinguish different areas but basically the idea is that each Magic Way would only show a 3x3 grid, with little tab icons on the right (or anywhere) that switch between different ways. There is no need to have all magic way grids displayed at once on the screen.

Is this currently possible with just XML?
Nope.
Also, I dont think i want to see only one way's glyphs grid at a time. It was said some time ago, glyphs from different ways may be combined. I couldn't see this happening yet, but i don't know what's planned.

hmm, see this: http://crimsonorder.freepgs.com/things/ps-mc/glyph.xml

/EDIT
« Last Edit: January 30, 2007, 01:05:14 pm by Nikodemus »



What you can failure tommorow, failure today.


Better click for shiny stylez Help me with images!

Noxbrood

  • Guest
Re: Calling on all the UI modders
« Reply #2 on: January 30, 2007, 11:02:06 pm »
Hey,

Thanks for your reply.

This has nothing to do with image size. what you see in game will be always the same size in the same resolution. What may change, is the image quality, but paws (the system thnx UI workd) screws up the images anyway, like they were resized 2 times (up and down), before we can see them on the screen

No, that's not really true. I'm aware that the game doesn't display images at their native resolution and either resizes them down or up. However, the original image size plays a large role in this. If the original image is 32x32 pixels and it displays it at 64x64, you get a blurry effect with loss of detail. If the original image is too large of a resolution, like the 128x128 pixel buttons on the main toolbar, then you get a pixelated image at smaller size because it resizes down too much (this is more noticeable with the "Default" skin tool bar).

For example, in the "Default" skin, the "Purify" and "Research" icons are 32x32 pixels in their original size:



But inside the game they are displayed at a larger size, closer to 48x48 or 64x64, making them appear blurry.

On the other hand, the same icons in the "Elves" skin are originally at 64x64 pixels like so:



So, they look better.

Also, some of the "backdrop" images are at a much larger resolution in "Elves" and "Stone" skins than in "Default" but some are the same. So, you get a mishmash of things all over the place.

This is what I meant about inconsistency. Either they need to display every skin at the smallest common denominator or increase the icon image sizes (and the rest that isn't consistent) on the "Default" skin to match other skins or the displayed resolution. And match the layout and formatting accordingly and consistently.

Talk with devs about the art, it is ask for permission, if you should ever do it. Also, keep in in there are 3 skins. If you want to contribute something, you have to do it for all 3 sins ;P Furthe, I gues devs has the bigger versions of backgrounds and it is they who should do the backgronds, but skilled artist may do similiar job, basing on what is in the client. Unfortunately it is the only way for us to do it, when we arent devs.

There is no way I'm dragging along all the older skins. :P The whole point of my approach is not to make an "alternative" UI like a few people have done but to make a new "Default" UI, to drastically change the whole foundation, to give it a better start with more efficiency and consistency, to "Reboot" the UI, so to speak. And the rest of the UI designers can adapt their skins later to match. I realize that it's nearly impossible not to offend the original UI designers in the process. But dragging along old skins will either result in the same layout problems or way too much work for me, considering I never designed the other skins, don't have the original work files for them, and am not getting paid for already a huge undertaking.

look for money.xml or something like that and test it out.

Yea, already did and tried messing with it. Without knowing exactly what some of the things do in it, it's nothing but poking in the dark.

No ;) All not possible.

Shame. ;)

Also, i think there should be one prefs.xml for each skin.

I think there should be way more than just prefs.xml for each skin. There should be an entire independent XML structure for each skin. And not the largely value and attribute based one (like right now), which is against every XML standards recommendation but with the emphasis on tags.

Nope, i think the way to go is inventory in segments, and you can choose to display only some of the segments. Ultimately the way to go, are resizable segments, where for example also area for items is resizing, giving different combinations of width x height.

No, I think you didn't understand me because this is exactly what I suggested.

Here is an example from Vanguard: Saga of Heroes:

http://img74.imageshack.us/img74/6264/equipmentty9.png

See how equipment and inventory are separate? The "Inventory" window can be dragged or expanded, like regular operating system windows, and it automatically fills in the inventory slots as you expand the window. THIS is what I suggested, which is why I said they should be separate. ;) There is no need to access the whole "Equipment" window, if you only need to use an item in your inventory, which you should be able to resize as large or as small as you want to.

Also, I dont think i want to see only one way's glyphs grid at a time. It was said some time ago, glyphs from different ways may be combined. I couldn't see this happening yet, but i don't know what's planned.

There is absolutely nothing you gain by seeing all glyph grids at the same time, and doing it the way I suggested would not prevent anyone from combining glyphs of opposite ways. I'll illustrate it again with existing "Elves" UI bits:



This is a really quick and dirty copy/paste example, and a little different variation on the original concept (can be arranged in many ways, really). But the point is that when you click on any Magic Way tab, it switches the main 3x3 grid to that way's grid. The rest is exactly the same as before - you still drag each glyph into those slots (opposite way glyphs or not, doesn't matter), you still have all the same icons below those slots (I didn't include icons in this example). The only thing that changes is it becomes much more efficient and doesn't block the main view. ;)

So far, it doesn't look like it's possible to adjust it the way I suggested without modifying the game's source code.

This is where the underlying problem with UI modding in PS comes from - it's ingrained too much into the main XML that affects everything. The way it's coded doesn't allow for UI independence and it's own unique XML that affects a new UI exclusively without breaking anything else.

The kind of UI and icons I was willing to try and make (already made some graphics too) are of similar quality (and better) to these examples:

http://img170.imageshack.us/img170/2585/equipmentmm7.jpg

http://img170.imageshack.us/img170/5435/wowbc01wq8.jpg

Except, I wanted to make them clearer and more transparent. The default UIs in those games are great but when you go to their respective UI modding sites, the most popular UIs are those that are even less intrusive, more transparent, and more efficient.

The reason I wanted to edit the item icons (before their number has gotten too big) was to have their own backgrounds for each item. Currently, you only have a clumsy black outline around each item, and even with that, they still overlap with equipment slots' graphics because those graphics are visible on the background. So, you may have an axe that overlaps with a sword, one style of gloves that overlaps with another style seen in equipment slot, and so on. If I included different backgrounds for each item, as well as a nice but not intrusive frame around them, exactly like in the two game examples I posted, everything would look much more professional.

Also, since "Hand" equipment items are square, like everything else, it would again look more professional to have the slots themselves as squares rather than a vertical rectangle. Not to mention it displays a sword and shield, which not everyone wants to use. My graphic would've included a drawing of a hand. And I would not call it "Right Hand" or "Left Hand" either, since some people are left-handed. I would call them (when tooltip pops up) the "Main Hand" and "Off Hand". Come to think of it, I would also change "Right Fingers" and "Left Fingers" to "Main Fingers" and "Off Fingers", and used a "Ring" image ingrained in the background, just like in the "Vanguard" screenshot example.

And if you doubt why a glaring yellow border can ruin a UI, take a look at the examples again. Not only is the border blocky with its sharp corners (meaning it breaks a design with rounded corners), it also is too bright and takes attention away from the UI and items. The UI should not be too messy, busy or intrusive, it should be as transparent as possible.

After further consideration about current limitations and a surprising lack of interest by modders and devs in this topic, considering I'd be doing the work for free, I think I'll just let the original skin and UI designers to worry about future UI modifications and improvements. Perhaps they'll find my advice useful when considering their own future designs and layouts.

Anyway, no offense meant and none taken. Just an honest evaluation and my personal opinion.

Thanks and ciao. ;)

Nikodemus

  • Prospects
  • Veteran
  • *
  • Posts: 1808
    • View Profile
Re: Calling on all the UI modders
« Reply #3 on: January 31, 2007, 12:37:49 am »
Quote
No, that's not really true. I'm aware that the game doesn't display images at their native resolution and either resizes them down or up. However, the original image size plays a large role in this. If the original image is 32x32 pixels and it displays it at 64x64, you get a blurry effect with loss of detail. If the original image is too large of a resolution, like the 128x128 pixel buttons on the main toolbar, then you get a pixelated image at smaller size because it resizes down too much (this is more noticeable with the "Default" skin tool bar).
Well, it is what i was writing about. The bigger the original image, the better effect in game. Yeah, even a bit pixelated is better than badly blurred. There are also parts of the gui images which doesn't scale, or do it in bad way (like glyphs and their purified/being purified/unpurified backgrounds), which may be partially how these images are defined in imagelist.xml, but i never had time or patience to test it out.

And the skins are inconsistent, but i'm happy that the are and i would rather work on them being consistent, rather than working on something similiar yet new, continuing the tradition of being inconsistent.

Quote
There is no way I'm dragging along all the older skins. :P The whole point of my approach is not to make an "alternative" UI like a few people have done but to make a new "Default" UI, to drastically change the whole foundation, to give it a better start with more efficiency and consistency, to "Reboot" the UI, so to speak. And the rest of the UI designers can adapt their skins later to match. I realize that it's nearly impossible not to offend the original UI designers in the process. But dragging along old skins will either result in the same layout problems or way too much work for me, considering I never designed the other skins, don't have the original work files for them, and am not getting paid for already a huge undertaking.
If you are going to try to contribute it into the game, better stop being lazy ;) Think like a game designer who has to keep things consistent (something what you like anyway), not a player who want to mod few things out. If you are going to create yet another skin with different set of xmls, forget about it being contributed into the game. You already finds that you wouldn't create this for every skin, yet you want to create another skin, which would have to be updated as the game progress.
Say, you if don't feel like editing basically the same thing for 3 skins, would you for 4 ?
And you know.... the whole dev team isn't paid for their job and you say you won't try to edit 3 skins, because you won't smell some money for it? What you would do is a drop in the ocean of what is already done. For free
I think you wanted to say something else.

Quote
I think there should be way more than just prefs.xml for each skin. There should be an entire independent XML structure for each skin. And not the largely value and attribute based one (like right now), which is against every XML standards recommendation but with the emphasis on tags.
I been thinking about it in the past and came to a conclussion, that if keeping the all 3 skins updated is annoying, it would be even more annoying to update the 3 independent sets of xmls. You know, the game is evolving, things are being added and something done in the past needs to be fixed from time to time.
The answer is consistency beatwen the 3 skins. There are images which aren't in some skins, because they would look bad and already look bad in the default skin. Some background are lighter and other darker, the other way like in default skin. What had to be done is the xmls edit, not a single skin accomodation. The xmls are a bit like css for html, which there is the skins.

Quote
Here is an example from Vanguard: Saga of Heroes:
Play some Morrowind TES
There is nothing what stops us from having equipment and inventory in the same window and being also resizale at the same time. Obviously not exactly how it is in PS currently, but what you have showed is less effective and more space using than what i have saw in TES.

Quote
There is absolutely nothing you gain by seeing all glyph grids at the same time, and doing it the way I suggested would not prevent anyone from combining glyphs of opposite ways.
Don't use the 'absolutely' word where it doesn't fit. It is much faster to see all glyphs at once and drag them from the same screen. Unless you like to waste time on constant switching beatwen different groups of glyphs to drag them into the combine slots ;)
Yeah, i choose big size over worse functionality.
Besides you can't do it editing only the xml.

Quote
This is where the underlying problem with UI modding in PS comes from - it's ingrained too much into the main XML that affects everything. The way it's coded doesn't allow for UI independence and it's own unique XML that affects a new UI exclusively without breaking anything else.
I suppose you wouldn't complain if you knew how to programm in c++ ;P I suppose it is the same way how devs were thinking.
Although it would be nice, it is how it is.
You can do really cool things in html, but you have remember about the engine inside the browser, which reads it. Think how many people worked on it and the html itself. In PS we have what we can afford for. Time may bring changes.


Below this... you have few good ideas in general, but sometimes you are looking for too hard solution for the problems you are finding. (I only ask myself, why Am i the only damn persn why is trying to help?)
The reason why PS gui doesn't look as nice as in the game you gave as example, with all the transparent areas, rounded edges and stuff, is because in PS it would look more crappy than without this. Test it if you don't believe. Bad colors... pixelation... blure effects...

Borders... change their colors and make them not display at all, like i wrote. They are just fine for rectanqular widgets. They aren't multicolored, but i don't complain and don't feel distracted, especially that i could change these colors.

Quote
After further consideration about current limitations and a surprising lack of interest by modders and devs in this topic, considering I'd be doing the work for free, I think I'll just let the original skin and UI designers to worry about future UI modifications and improvements. Perhaps they'll find my advice useful when considering their own future designs and layouts.
I'm disappointed too, by the lack of interest. But i think it is partially because how annoying it may be to get your stuff in game. But one may not blame devs for this. It is because of us players-modders and how we behalve in general. Each behalve in different way, but it is the general feeling which matters, and i think is why it may be hard. It is not devs fault.
But you need to stop thinking about one thing - money, because you are just being funny, saying it in soft words.
I made a lot more than you (probably because i been doing it for a while) and never thought that someone may pay me for this^^ You are suprising me.



What you can failure tommorow, failure today.


Better click for shiny stylez Help me with images!

ramlambmoo

  • Hydlaa Notable
  • *
  • Posts: 567
    • View Profile
Re: Calling on all the UI modders
« Reply #4 on: January 31, 2007, 12:57:18 am »
Quote
But you need to stop thinking about one thing - money, because you are just being funny, saying it in soft words.
I made a lot more than you (probably because i been doing it for a while) and never thought that someone may pay me for this^^ You are suprising me.

Did I miss something?  He wasn't mentioning money at all, he just said he would be doing it for free.

Nikodemus

  • Prospects
  • Veteran
  • *
  • Posts: 1808
    • View Profile
Re: Calling on all the UI modders
« Reply #5 on: January 31, 2007, 04:06:36 pm »
Well, not really in the last sentence, but i think i was under influece of waht he said before. Search the site for word "paid"
* Nikodemus jumps in joy as there is a reply
Not exactly what was expected, but maybe that's a start? ;P



What you can failure tommorow, failure today.


Better click for shiny stylez Help me with images!