Improving ToEE's User Interface

Discussion in 'Community Projects' started by Gaear, Oct 27, 2011.

Remove all ads!
  1. sirchet

    sirchet Force for Goodness Moderator Supporter

    Joined:
    Dec 6, 2003
    Messages:
    3,721
    Likes Received:
    49
    I was talking about the spell drop boxes, it was rather obvious that a working scroll bar was in place. :)
     
  2. AjiTae

    AjiTae God

    Joined:
    Nov 7, 2012
    Messages:
    50
    Likes Received:
    0
    But it is not. =\ 2-3px horizontally.
     
  3. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    What exactly is the problem you're perceiving, AJT?
     
  4. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    Lingering Issues, part 9

    Levelup continued.

    STATS | Looks good.

    41_char_ui_levelup_background_stats.jpg

    FEATURES | Looks okay.

    42_char_ui_levelup_background_features.jpg

    SKILLS | Fine.

    43_char_ui_levelup_background_skills.jpg

    FEATS | Fine.

    44_char_ui_levelup_background_feats.jpg

    SPELLS | Fine but for the noted box issue.

    45_char_ui_levelup_background_spells.jpg
     
  5. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    Lingering Issues, part 10

    And now the main character UI window. Everything should look familiar here by now.

    INVENTORY | Okay.

    46_char_ui_main_window_inventory.jpg

    SKILLS | Okay. I could do without the little blue boxes but meh.

    47_char_ui_main_window_skills.jpg

    FEATS | Fine.

    48_char_ui_main_window_feats.jpg

    SPELLS | Good enough. I can actually stretch the text out vertically, which looks better and less scrunchy, but ironically I can't control the vertical limits of where its printed so it goes outside the box. Oh well.

    49_char_ui_main_window_spells.jpg

    IRONMAN | Fine.

    50_char_ui_main_window_ironman.jpg
     
  6. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    Lingering Issues, part 11

    And lastly, the logbook. This has been altered almost not at all except for the font.

    QUESTS | Fine.

    51_logbook_ui_quests.jpg

    REPUTATIONS | Fine.

    52_logbook_ui_reputations.jpg

    EGO | Fine enough. Note that the ego tab retains the Arial 10 point font because Priory 12 fits no way no how.

    53_logbook_ui_ego.jpg

    KEYS | Fine.

    54_logbook_ui_keys.jpg

    RUMORS | Fine.

    55_logbook_ui_rumors.jpg

    That's it, folks. Next I will discuss possible solutions to the remaining problem UIs.
     
  7. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    Lingering Issues - the conclusion

    Okay, there are four UIs that have significant lingering issues.

    Item Creation: the only thing to be done for this is to truncate the item names severely (luckily the list is independent) and keep the item descriptions away. This is unfortunate, as I could have made a sweet-looking UI if we had the control files, but alas it is not so. At least it will be 'fixed' and not appear jarring at a glance.

    Party Pool: Nothing to be done for it, unless a guru can turn 4 lines into 3.

    Track: No fix that I know of. Can't touch the image placement.

    Alignment: The only thing I can think of to fix this is to abbreviate all alignment references for PC creation (LG, CE, etc.). This would also affect the initial party alignment selection screen too though, and the game doesn't bother to define the alignments there.
     
  8. AjiTae

    AjiTae God

    Joined:
    Nov 7, 2012
    Messages:
    50
    Likes Received:
    0
    I'll see what i can do.)

    Scrollbar overflows its drawn container:
     

    Attached Files:

  9. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    Okay, that's actually not the scrollbar but the background image. I can fix it though.
     
  10. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    Woo-hoo, the screen below features the fixed scollbar-appearance thingie, fixed position of descriptive text so it isn't over the bounding box's top line, and most significantly, cool-looking ToEE style buttons for the stat names. I was able to make these because I discovered how to get the game to print no text there dynamically, so we can now just make our own background like in the regular character UI (though we still can't put the actual stats exactly where we want them, so we have to build the UI around the existing positions, as it were). Looks much improved, IMO. We'll do the same (with the buttons and drop shadow text for depth) for the main.

    Lastly, this is also an example of what the alignment choice UI would look like with abbreviations, obviously.

    32_pc_creation_background_alignment_b.jpg
     
  11. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    And the main UI with cool buttons. I have to admit that the main reason I never made them for this UI before was simply that I never thought of it, but it finally occurred to me. The advantages are huge in that they transform an image into a quasi 3D object with the appearance of depth (along with drop shadows for the letters), which is far more pleasing to the eye than a flat rectangular block of color. The drop shadows also make the text easier to read. Some abbreviating was necessary.

    46_char_ui_main_window_inventory_b.jpg
     
  12. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    As a final tweak to this, I switched the vertical placement of HP and LEV, since HP requires more space to display the output, and since the little tiny blue box for HP didn't look good. I also equalized the horizontal space allotment for EXP (now called XP) and HP on the top line, with the buttons and output boxes for both being of equal size respectively. The only time this gets wacky is for HP if a character gets three digits worth of HP and all three digits are greater than 1, at which time the output placement goes a little off and ends up outside the box on the right. That would be an unlikely scenario however I think, as you'd need more than 200 HP in the first place. XP fits any 6 digits comfortably.

    46_char_ui_main_window_inventory_c.jpg
     
  13. sirchet

    sirchet Force for Goodness Moderator Supporter

    Joined:
    Dec 6, 2003
    Messages:
    3,721
    Likes Received:
    49
    That was it!

    Remember when I said I thought the new GUI had a generic feel, but I couldn't put my finger on it?

    Well, now I know what it was and you have fixed it.

    The way the stat boxes are in this picture removes any generic feel I had, I think it's the almost 3D feel of the rounded edges that does it.

    Great job Gaear!
     
  14. Gaear

    Gaear Bastard Maestro Administrator

    Joined:
    Apr 27, 2004
    Messages:
    11,029
    Likes Received:
    42
    Thanks. I was a little daft not to think of it before, to be honest. ;)
     
  15. Salk

    Salk Established Member

    Joined:
    Jan 2, 2006
    Messages:
    258
    Likes Received:
    0
    Really sweet stuff, Gaear!

    Thanks!
     
Our Host!