Summoning Wars Forum

Development => Graphics => Topic started by: dezGusty on January 06, 2013, 01:33:47 PM

Title: UI refresh
Post by: dezGusty on January 06, 2013, 01:33:47 PM
Hi Jorge,

I know you had some plans to update the Summoning Wars GUI before things got... quieter. Are you still interested in updating the UI?
I can help this time, as I played around with CEGUI in the mean time. Maybe you've seen one of my works (http://www.cegui.org.uk/phpBB2/viewtopic.php?f=9&t=6006 (http://www.cegui.org.uk/phpBB2/viewtopic.php?f=9&t=6006)).

I would like to create a new theme taking design elements from the current Summoning Wars theme, some from the GlossySerpent theme, changing others to make it more consistent and releasing it to the world for use (and also using it in Summoning Wars).
Are you interested ? You can PM me, reply in this thread, etc.

See you around :)
dezGusty
Title: Re: UI refresh
Post by: poVoq on January 06, 2013, 06:01:02 PM
Sounds good.

There are also these nice UI files posted on OGA recently that would make for a great CGUI theme:
http://opengameart.org/content/ui-resources
http://opengameart.org/content/inventory-ui
Title: Re: UI refresh
Post by: dezGusty on January 06, 2013, 07:15:48 PM
Hmm... that is looking quite nice poVoq.

Quite similar in style with some early takes on the Diablo 3 UI :-)
Title: Re: UI refresh
Post by: fusion44 on January 06, 2013, 11:21:18 PM
I'm all for it :)
The current ui has some shortcomings like the labels being cut of in some languages in the character screens and the character screen and the inventory is basically a big hack :)
Title: Re: UI refresh
Post by: Jorge Avila on January 09, 2013, 09:35:18 PM
 ;D Go for it.

That diablo thing that povoq posted is good enough to start working.
They are simple, that's good. And could be attached to the edges of the screen with no problem.

I'll bring you all the help i can =).

Can we request you some stuff to be done, related to cegui programming?
Title: Re: UI refresh
Post by: dezGusty on January 10, 2013, 01:12:50 PM
Well, so far I got to be somewhat versed when it comes to the use of XML definitions. I think I also have a solution to the stretched aspect of the GUI.
But I will want either a collaboration, or some feedback/review of the images used in the theme.

Do you have the source files for the images that are currently used in the UI by any chance? DO you have any ideas for buttons for a look and feel based on the links that poVoq posted?

I am busy today and tomorrow (ski and some meetings), so I'll start working on it on Saturday.
Title: Re: UI refresh
Post by: poVoq on January 10, 2013, 04:16:33 PM
I would also contact the guy who originally did those UI graphics (contact is possible via OGA)... he seems to be still working on those and probably as buttons and the like already in the pipeline.
Title: Re: UI refresh
Post by: Pappe on January 25, 2013, 11:28:36 PM
This isn't really a priority right now, but the UI is certainly the most seen element of the game so improving it is never in vain. I would definitively lend a hand. I did a RTS-UI once, well just the graphics. I think we can definitively improve it.

For documentation purposes, we should make a step by step guide on how to manipulate the UI and explain every parameter of all the text files involved so others will have no problems tuning in, should one of us leave the project at some point. What do you think?

Where excactly should we start?

EDIT:
BTW: The inventory from OGA (http://opengameart.org/content/inventory-ui) isn't usable because of license issues. I also attached the source (.psd) of this one http://opengameart.org/content/ui-resources. Just in case we decide to go for this style.
We can't use the font, it's not open source, but that's not really a problem. Also the buttons and the background are simple graphics and just a matter of minutes. We can do that ourselfes.
Title: Re: UI refresh
Post by: dezGusty on January 26, 2013, 12:20:24 AM
Hi Pappe, nice to see you so active :-)

I agree that the UI is not a high priority right now. But for different reasons: I would like the CEGUI 1.0 release to come first, so that an UI update would also involve bringing our lib up to date.

Documenting the UI in its current state would have ... limited benefits, as it consists of many "hacked" items. I would suggest documenting it thoroughly when redesigning it.

Btw: About the licensing: the OGA inventory would only be used as an inspiration, not taken as it is in its entirety. So all files would be recreated by me/us.

Do you have some screenshots for the RTS UI?

Quote
Where excactly should we start?
Coming up with some ideas for some basic style decisions:
- light / plain / dark feel
- fully opaque / translucent (semi-transparent) / transparent or mixed
- general contrast between widgets, colour variety.
- corner styles consistent across most widgets: sharp vs rounded edges. Ideas how these would fit into most widgets: windows, buttons.

Here is how I would like to have the UI:
- A dark feel (darker than what is found now).
- Mixed widget transparency: some parts (mostly background) semi-transparent. Other parts (mostly buttons), fully opaque.
- More colour variety than now. But not by much.
- I would like sharp edges and simple (mostly rectangular) widgets.

Do you have time to be on IRC tomorrow afternoon? (16:00, GMT + 1)? We could discuss for about an hour more in-depth.
Title: Re: UI refresh
Post by: Pappe on January 26, 2013, 01:28:11 AM
Do you have some screenshots for the RTS UI?

I don't think so.. But even if I had some I couldn't show them, unfortunately. It was for a post apocalyptic futuristic RTS.

Do you have any infos regarding the release date of CEGUI 1.0.0? After a quick search of the forum I found none. I agree that codewise we shouldn't change anything, since the API might/will change with the 1.0.0 release, but graphicswise we should prepare some work. That shouldn't be a problem, right?
Also since our next release will probably contain UI updates we should use this opportunity to anounce it here http://www.cegui.org.uk/phpBB2/viewtopic.php?f=4&t=4844 .
(Actually we should anounce the 0.5.7 release there.)

Unfortunately my weekends are really planned out. Best days for me would be monday or wednesday evening. Maybe sunday as well, but I can't promise anything. But I can say that I won't have time tomorrow.

- A dark feel (darker than what is found now). I can agree to this. I would prefer dark reddish or brownish tones.
- Mixed widget transparency: some parts (mostly background) semi-transparent. Other parts (mostly buttons), fully opaque.   I don't like that. I would prefer a completely opaque GUI. The background should either be a very subtle leathery or papyrus like look.
- More colour variety than now. But not by much.    I would add a subtle dark green, but just because that's my favourite color. :)
- I would like sharp edges and simple (mostly rectangular) widgets.  I don't like sharp edges, they don't fit with the medieval fantasy setting, I think. But the widgets can be rectangular. That would make things way easier.
Title: Re: UI refresh
Post by: fusion44 on January 26, 2013, 04:31:25 PM
Please consider different languages for the UI. At the moment we have problems with cut off text in some areas, like the character status screen.
Also I'd like to restrict certain characters in user names for obvious reasons ^^ (I'll tackle this one)

Look at this screen:
http://www.malwasandres.net/owncloud/public.php?service=files&t=34a447e3d2ee73ba83c2ecb934681bc0
Title: Re: UI refresh
Post by: dezGusty on January 29, 2013, 01:55:10 PM
Hello guys,

This is a summary of what we decided on the topic of a UI refresh during a chat on 2013.01.17 (sunday) evening.

1. dezGusty will create a separate project for a new UI (CEGUI skin).
Details:
- The skin will be started as a spin-off of the GlossySerpent skin.
- The skin will be consisting of (mostly) simple widgets that can be combined to produce more complex layouts.
- The skin will be started for CEGUI 0.7. When CEGUI 1.0 is completed, the skin can be adapted using a manual process.
- The skin will use a permissive license (MIT license). This will allow it to be used in other games as well and can encourage contributions to it.
2. The skin will be created and updated first, then the skin will be integrated in Summoning Wars.
- An update of the current layouts used in Summoning Wars will be performed to also try to take into account the various aspect ratios and to switch from TaharezLook to the new Skin. A new named branch (ui-update-skins) will be created for it by dezGusty.
The ones that have shown interesst in contributig so far are:
- dezGusty
- Pappe

3. No name has been chosen as of yet for the skin. What follows are my suggestions for the name of the skin. Other suggestions are welcome.
- "Dark Summoning". Would imply that we need to use a dark theme. Summoning would suggest the relationship with "Summoning Wars".  (Edited: just noticed there is a game with that name).
- "Forged Hero". Would imply a metal look (forged). Would imply a connection with Role playing games, where you have a "hero".
- "Resummoned". Implies connection with the game. And allows freedom of style afterwards.
dezGusty out.
Title: Re: UI refresh
Post by: dezGusty on February 01, 2013, 06:24:53 PM
Hello guys,

as I received no feedback on the name, I went ahead and chose "Resummoned" as the name of the new skin.

I've already set up the project page on sourceforge.net, so if anyone wants to help out... please make sure you have a sourceforge account (or openID, google, etc to log onto sourceforge).
For the time being the only way to access the pictures is to use the SVN repository (https://sourceforge.net/p/resummoned/code/3/tree/ (https://sourceforge.net/p/resummoned/code/3/tree/))
Title: Re: UI refresh
Post by: dezGusty on February 05, 2013, 12:23:28 AM
Just so that you know that there is work being done in the background :-)
I recently updated the GlossySerpent skin to also have a higher resolution version. I plan to use that as the basis of the Resummoned skin.
I will commit the changes to the new repository tomorrow.
Title: Re: UI refresh
Post by: dezGusty on February 11, 2013, 06:22:40 PM
Hi guys,

just a minor update: I managed to get the new skin partially implemented (currently only shown as an example in this picture: https://docs.google.com/file/d/0Byx-8I_NSC6-LXpHU3NPbGRSTHc/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-LXpHU3NPbGRSTHc/edit?usp=sharing) )
In addition, I also managed to get the UI to keep track of the aspect ratio. This can be seen in the two extreme instances:
- aspect ratio 16:9 (1920x1080) https://docs.google.com/file/d/0Byx-8I_NSC6-bU5JZDA4Wkk1RVE/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-bU5JZDA4Wkk1RVE/edit?usp=sharing)
- aspect ratio 5:4 (1280x1024) https://docs.google.com/file/d/0Byx-8I_NSC6-YTlIekk5NHk4ODA/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-YTlIekk5NHk4ODA/edit?usp=sharing)

I'll keep you posted on the progress :)
Title: Re: UI refresh
Post by: dezGusty on February 21, 2013, 10:00:20 PM
Hi guys,

another minor update.
As I noticed that it would be too much work to get a completely separate skin (Resummoned) ready by the end of this month, I focused on adjusting the existing skin (which I dubbed SWB - SumWarsBase) with some retouches.

Here is the new inventory: It supports the custom colour backgrounds again
https://docs.google.com/file/d/0Byx-8I_NSC6-N2x1RnFFOWx3LVU/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-N2x1RnFFOWx3LVU/edit?usp=sharing)
Title: Re: UI refresh
Post by: fusion44 on February 22, 2013, 01:48:05 PM
Looks good! I like it. Make sure you put in that new cursor :)
Title: Re: UI refresh
Post by: dezGusty on February 26, 2013, 12:13:39 AM
Hi fusion,

I committed some changes to the ui-refresh branch. Do you think you can try to make a build out of it, so that anyone interested can test it?

It's still a work-in-progress.
What still needs to be done:
- update the "control panel" (the main ui with the health-orb, potions, skills)
- update the character creation screen (should be quick and easy)
- update the multiplayer screens (should be quick and easy)
- update the notification that informs about a restart being needed to apply video changes
- update the dialog screens.

After that: add depth and detail :-)

Title: Re: UI refresh
Post by: dezGusty on February 26, 2013, 06:21:08 PM
Minor update:

I managed to fix the issues with the fonts being stretched. It seems that they also need to take the aspect ratio into account.
Here are some new screenshots:
https://docs.google.com/file/d/0Byx-8I_NSC6-dTQzeWYzZDF6V00/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-dTQzeWYzZDF6V00/edit?usp=sharing)
https://docs.google.com/file/d/0Byx-8I_NSC6-SG5VQ1hlQkF4bkU/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-SG5VQ1hlQkF4bkU/edit?usp=sharing)
However, I noticed that due to the relatively large size of the used pictures, lower resolutions are severely affected around the fixed size areas (like the new title-bars).
https://docs.google.com/file/d/0Byx-8I_NSC6-SjVTenBKMlBXblE/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-SjVTenBKMlBXblE/edit?usp=sharing)

The changes are checked into the ui-refresh branch in mercurial.
Title: Re: UI refresh
Post by: fusion44 on February 26, 2013, 09:26:33 PM
I'm compiling the branch at the moment. I'll upload the package and update this post when its ready.

The public download link is:
https://dl.dropbox.com/u/3473245/sw/sumwars_gui_update.zip

Its not fully uploaded yet, but Dropbox tells me that the upload will be completed in 24 minutes :)
Title: Re: UI refresh
Post by: poVoq on February 27, 2013, 09:41:05 PM
http://opengameart.org/content/fantasy-decoration

This could be probably extended by two glass balls for the life/mana and used as a center GUI.

Edit: Looks great so far btw. Don't worry too much about the very low resolutions. If it looks ok at 1024x768 it is fine nowadays.
Title: Re: UI refresh
Post by: dezGusty on February 28, 2013, 11:19:18 PM
@poVoq: I don't think that the decoration fits with the rest of the skin. But I do agree that we do need some decorations on the UI.

I also tried to use another font for the game, and the result looks like this:
https://docs.google.com/file/d/0Byx-8I_NSC6-VTZZaVNWVGY1U28/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-VTZZaVNWVGY1U28/edit?usp=sharing) .
Edit: the font is Fell Types, which uses a SIL Open Fonts License 1.1. I think it's ok to use in the game, but I'm not 100% sure. I'll investigate it more thoroughly.

What still needs to be done with regards to UI:
- control panel update. (@Jorge: I was thinking of something like a half human - half skeleton hand holding the health orb. Unfortunately, my skills are not that great when in comes to creating that kind of detail. Do you think you could help out with something like that? Or do you have any other ideas? ). @all: feel free to chip in with suggestions.
- multiplayer dialogs.
- minimap (need to check on turan's progress)
- optional (for later): debug tools (currently using taharezLook skin) and an overall addition of details...

There are also other minor changes that were added to the ui-refresh branch, such as fixes in the way the game treats [ESC] and [ENTER] keys in the dialogs and menu. I hope we'll be able to test it well and merge the changes into the main branch and make a new release in the following 2 weeks (also depends on fusion's availability).
Title: Re: UI refresh
Post by: dezGusty on March 03, 2013, 10:35:21 PM
Hi,

only minor changes are visible after the work done over the course of this weekend:
- the host game and join game dialogs have been updated to suit the new skin.

Behind the scenes, a lot of rework has been done to make the SWB skin more generic, using a FrameWindow like component, instead of the previous "NamedPanel" widget. Among other things, this allows changing the color of the titlebar by simply updating a property. For instance, this is how a framewindow it looks using a darker teal color:
https://docs.google.com/file/d/0Byx-8I_NSC6-c3YwWGkzQ3VoeWs/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-c3YwWGkzQ3VoeWs/edit?usp=sharing)

The control panel and the minimap are the last layouts to update.
Title: Re: UI refresh
Post by: dezGusty on March 08, 2013, 12:09:47 AM
Hi,

I made an attempt at updating the control panel to be more in-line with the rest of the skin.
So far, this is how it looks like: https://docs.google.com/file/d/0Byx-8I_NSC6-WmJlTmZ5TGw0WGs/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-WmJlTmZ5TGw0WGs/edit?usp=sharing).

Almost ready :-)
Title: Re: UI refresh
Post by: Dratz-_C on March 08, 2013, 11:52:43 PM
Hi folks,
I think the work you are doing is very good. I have some constructive suggestions. I hope that it is eventually practical if it is not for the present. Make the entire menu translucent except for the portraits, icons, text, dividing lines and minimal border art. Reduce and eventually eliminate any large ornamentation such as the jewel text backing letting the game underneath help to maintain the suspension of disbelief. A fine example of this approach is the widely popular, user-created interface modification, SkyUI (http://skyrim.nexusmods.com/mods/3863), for Skyrim. Beyond the screenshots, to see it in action look at this 2012 video on a feature of SkyUI (http://www.youtube.com/watch?v=eMn3KHeHmtA) and a youtube playthrough (http://www.youtube.com/watch?v=_JZq1CujvM0&list=SP6BD8AB5BD35F7632) using it starting about halfway into the course of the whole game. It has an inventory search with autocomplete that works on any word in the name of the equipment being searched for. I think having autocomplete in the Summoning Wars would, from a player's perspective, help to push the focus away from inventory management and back at the game itself from a playing perspective. Maybe later we could talk about why or why-not a UI like SkyUI should be a model. Again, I mean this idea to be a possible positive influence rather than a harsh, insensitive bash against the current UI. I really do like what you are accomplishing and look forward to any new work you do on it.
Cheers
Title: Re: UI refresh
Post by: dezGusty on March 09, 2013, 04:26:57 PM
Hi Dratz, thanks for the input.

The SkyUI looks great. Some elements from it could be brought into Sumwars, but a complete redesign would be required for that. Because it doesn't fit with the needs of Sumwars on all accounts.
I think we can move the UI (or an alternate UI) in that direction, as the code was also updated to allow easier changes to the UI in the future.
Title: Re: UI refresh
Post by: Jorge Avila on March 10, 2013, 06:20:58 PM
Well, we could introduce some minimalism...
Title: Re: UI refresh
Post by: Dratz-_C on March 10, 2013, 06:45:28 PM
I should have found this youtube video about SkyUI in the beginning instead of linking to that other stuff that might not have been useful but here is a systematic, better description of it (http://www.youtube.com/watch?v=vcSjapSziuY). I hope that I am not frustrating you with my failings. Again, thank you for your consideration in this matter and for your continued work on the Summoning Wars UI.
Cheers
Title: Re: UI refresh
Post by: Jorge Avila on March 11, 2013, 12:38:25 AM

This is the new orb i've been working on =)http://i.imgur.com/A2ABpo5.jpg (http://i.imgur.com/A2ABpo5.jpg)
Title: Re: UI refresh
Post by: dezGusty on March 11, 2013, 08:20:33 AM
Hey  :D
Looks good. It could be improved by animating it I think. I need to look into the animation framework in more detail to see what could be needed. But right off the bat, I think we might need to have 2 separate images: one for the orb, one for the little electrical sparks on the inside which we can animate. Not sure whether it's possible to export those separately, based on the program you're using.
Title: Re: UI refresh
Post by: Jorge Avila on March 12, 2013, 06:05:13 PM
ufff, would be great, but in that case we should look into something else, i used blender =)
Title: Re: UI refresh
Post by: dezGusty on March 16, 2013, 10:36:22 AM
Hi Jorge, do you have a separate picture for the new health orb?
I would like to try it out with the new GUI.

EDIT:
Btw: the modified world-map window (updated town portal and teleporter icons).
https://docs.google.com/file/d/0Byx-8I_NSC6-aTY2MmdKQlp4YmM/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-aTY2MmdKQlp4YmM/edit?usp=sharing)

As no updates were received on the topic of the mini-map, this is how the mini-map will look in the next revision:
https://docs.google.com/file/d/0Byx-8I_NSC6-Q3JjWUozTkJTc0k/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-Q3JjWUozTkJTc0k/edit?usp=sharing)

Another EDIT:
Also, I started to integrate new skill icons from opengameart http://opengameart.org/content/painterly-spell-icons-part-1 (http://opengameart.org/content/painterly-spell-icons-part-1):
https://docs.google.com/file/d/0Byx-8I_NSC6-SjVISVByX1pIRU0/edit?usp=sharing (https://docs.google.com/file/d/0Byx-8I_NSC6-SjVISVByX1pIRU0/edit?usp=sharing)
Title: Re: UI refresh
Post by: fusion44 on March 16, 2013, 11:28:03 PM
Awesome dez!

I've uploaded new binaries for everyone to try out :)

Get them from my dropbox:
https://dl.dropbox.com/u/3473245/sw/sumwars-gui-16-03-13.zip