Age of Fear 3: The Legend

Age of Fear 3: The Legend

View Stats:
This topic has been locked
Les  [developer] Jul 21, 2017 @ 2:10am
AOF GUI RE-DESIGN
Hi all,

Our next big task is to re-code rendering engine. Technology we are currently using (Java Swing) does miss many modern features and occasionally causes issues and rendering glitches.

Therefore, we will start re-coding our rendering engine soon after AOF3 release. However, because our GUI components are closely related to Swing, we would need to re-code them too.

That gives us chance to improve our UI a bit. To be honest - I don't think AOF interface is bad. It's quite functional and presents lots of information on a single screen. There are few glitches that need to be ironed out, e.g. lower bar of units' portraits sometimes overlaps battle field, buttons could be better decorated, fonts should scale with higher resolutions, etc.

Therefore, recently we have been researching various designs for strategy game UI. Here are some thoughts and notes.

Surprisingly, while strategy games are one of the oldest of video games, the UI patterns are not that settled yet. Compare that to FPS games, where GUI is pretty much variation of the same design (that probably will make some FPS players angry! lol).

As for general good UI guidelines, this video presents it quite well:
https://www.youtube.com/watch?v=7OSkB4BCx00

Some reads:
http://www.gamasutra.com/view/news/289637/6_examples_of_UI_design_that_every_game_developer_should_study.php

For more specific notes on strategy games UI design, this blog is a good source:
https://medium.com/@treeform/strategy-game-battle-ui-3b313ffd3769

Also, below are couple of screenshots from various games, showing their UI designs
(I have no idea how to make Steam display images):

http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/134d08d1e58d647d03661d63bcf0c77cbb1874e7.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/b4d0109cfe8964ac217f79f329482c5b7061f78e.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/b75bb5fa3f26d3ad0d6c1a7a64525d4ab9f3d4eb.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/feebe3dab5ec8c38289ebdf0e6bd91c088596576.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/ccfa3585662f9ed5b3286df86c27f9718934837a.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/10461b33a2e35496aaeb8ba5af6dfb4ddd414eb6.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/8a33ee613b832f14b237dd398ac97122e1fa2b65.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/2ad6cc0cb25fb62fa7311d6f7ca6bee29d471149.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/fbc8352d978c18c8e534659532393397775a88e3.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/8177299403cccb9ee9ab7e261f9e9df4422589f4.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/fbc8352d978c18c8e534659532393397775a88e3.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/8177299403cccb9ee9ab7e261f9e9df4422589f4.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/3f4fd922699771b30e754bf6bc086949e5660172.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/acb84445f322e30c58566fb7e43d5663d1676a4e.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/59bd9542e6189a39032c8f32910c08daf17115bf.jpg
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/38e810dd2388e932846342bda4203a1b0476c7d9.jpg


And some UI elements:
http://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/8183641/87f02d57f812b6cab40b155f888eb01a3bdb34da.jpg

This is something we will tackle after AOF3 release.
You are very welcome to leave any input or notes here.


Actually, where are main issues in AOF UI?

I have noticed those (I will be updating it):
  • in battle screen lower bar with units' portraits sometimes is overlapping important areas in battle

  • in recruitment screen players cannot figure out how to re-order units

  • fonts don't scale with higher resolutions

  • END TURN/MENU/UNDO buttons are too simple and could be iconised

  • support for second monitor

  • art style screens (wood+iron borders/crispy buttons, same filter as map/battles...)

  • static environment/lack of animations (terrain effect are already implemented and can be enabled, but have impact on performance)

  • smooth zoom in/zoom out (currently we have three levels of zoom). Maybe battle board rotation as well?

  • HD graphics (like Mac's retina), higher resolutions

  • Support for Steam overlay

  • Ragdoll dialog for items management

  • Tooltip over dead bodies (who died there?)

  • Sorting options for team management

  • [OPTIONAL] display battles map in intro level

  • [OPTIONAL] display blood drops/dead bodies in battles

  • [OPTIONAL] iconised capital letter in intro levels

Feel free to add any feedback.


All of best,
Les
Last edited by Les; Oct 25, 2017 @ 5:20am
< >
Showing 1-2 of 2 comments
Les  [developer] Oct 25, 2017 @ 5:19am 
There is first screenshot of GUI I am working at the moment:
http://steamcommunity.com/sharedfiles/filedetails/?id=1180313271

It's 100% hardware accelerated.
Last edited by Les; Oct 25, 2017 @ 5:20am
Les  [developer] Nov 10, 2017 @ 3:11am 
Next update:
http://steamcommunity.com/sharedfiles/filedetails/?id=1196731307

I know it doesn't look much yet, but it supports skins - they will be added after I have basic components working.

Sorry it's so slow - I have to manage it with other commitments.
< >
Showing 1-2 of 2 comments
Per page: 15 30 50