OK, this is what I made:
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi34.tinypic.com%2F29kyjyq.jpg&hash=99fe129b4c85dd6acaefe1a0ace7e619495e4eeb)
As soon as I get a new PC with a decent Adobe Flash installed may try and make an animated version of it. I also have some window layouts too but didn't want to overfill the first picture. Probably will rework some of the icons later. I think that simcity and cities xl showed that blue is a great theme in city simulators. Although there is a construction layer mode I've made the panel to contain the construction options too. May be fixed
In the upper right corner are the Main menu, Go to region, Load/save, Albums, Screencapture, Exit.
The left panel from top to bottom:
-Terraforming
-Zoning
-Roads
-Utilities
-Services
-Transport
-Destroy
-Folders and Mods Management
Looks good. Yeah i would agree blue is a good choice. Nice and neutral.
It looks good overall, but I think the UI is way to cluttered.
Quote from: darraghf on November 05, 2009, 03:22:28 PM
It looks good overall, but I think the UI is way to cluttered.
I've come up with a solution for that. It's kinda like Maya's hotbox only simpler and prettier. Essentially my version of UI won't have any buttons or toolbars. When user presses space key, circular menu around cursor appears allowing user to quickly select what he needs. It will also provide circular context menus on right click. I have working prototype for FLTK. I'll upload it soon enough. I've found that it speeds up work very much since you don't have to drag mouse all over the screen to push buttons you need.
Sounds similar to the original Neverwinter Nights interface.
Really like
@townscape layout, its got a familiar but a nice sharp look to it :thumbsup:, but am also very conflicted as I do like the sound of tomkeus idea as well
Quote from: tomkeus on November 05, 2009, 04:49:19 PM
...Essentially my version of UI won't have any buttons or toolbars. When user presses space key, circular menu around cursor appears allowing user to quickly select what he needs. It will also provide circular context menus on right click...
:'(
IMO putting everything into a single pop up menu will confuse the newcomers. At least all data and queries should be displayed, buttons of emergency actions, and buttons that will trigger that context. If you won't have anything displayed, how will you understand your problems.
Anyway, I will remake the interface taking more into account the hotbox tomkeus developed. In my mind the hotbox was a tool that was used for placing roads, terraforming, and now probably for zoning type selection, although if you think that plopables can also be easily used in hotboxes (may look cluttered), I may take into account too.
Back to the drawing board...
Quote from: townscape on November 06, 2009, 01:33:18 AM
IMO putting everything into a single pop up menu will confuse the newcomers. At least all data and queries should be displayed, buttons of emergency actions, and buttons that will trigger that context. If you won't have anything displayed, how will you understand your problems.
There is no single menu. I have main menu, with zones button, transportation button, rewards button , like in SC4, etc... Pressing each button opens submenu, again like in SC4, which is wrapped around the first menu an has detailed options.
BTW, townscape, could you also make version of UI where there is no main menu (toolbar) on the left-hand side (in the case we use circular pop up menus)? Could you try putting the RCI indicator horzontally? Wanna see how it looks and how much space it frees up.
I like the overall design of buttons. As far as I'm concerned, I'd go with it for the final version.
Should I leave the Movement Panel for rotating and scrolling through the world? And modes like city mode, building mode and god mode?
I'd remove the camera controls. I want the entire UI to be accessed with left hand laying over WASD part of the keyboard, and right hand being on the mouse. So camera movements will be done with mouse and keyboard.
As fort the rest, group it by function. Try to free as much screen as possible. I'd put frequently used controls in lower right hand side of the screen (so when user wants to select them he moves his right hand outwards - it seems more natural to me).
Rarely used controls, like Options, Save, Load, Exit, should be grouped in Esc activated menu (we could have Quick Save and Quick Load keys).
For the lefties, entire assembly can be just inverted.
I wouldn't actually rely that much on a keyboard. Simcity 4 camera controls can be handled by the keyboard but they placed the controls anyway.
Maybe organize the ui like most modern mmo's do? everything movable?
Or hide everything if you don't need it with a minimize button...
Quote from: townscape on November 06, 2009, 09:52:34 AM
I wouldn't actually rely that much on a keyboard. Simcity 4 camera controls can be handled by the keyboard but they placed the controls anyway.
Maybe organize the ui like most modern mmo's do? everything movable?
Or hide everything if you don't need it with a minimize button...
Well, player will have to use the keyboard in order to build things. SC4 did put camera controls, but they have scattered keys all over the keyboard and made its use inconvenient so they've relied on the mouse. It is very inefficient if you think of it. Relying on the mouse, you use one hand and 3 fingers. If you use keyboard smartly you can use 5 more fingers. You can put camera controls menu which can be hidden, but I would like players to get used to keyboard just like in playing FPS games. One thing that annoyed me with SC4 was having to click too many times and having to drag mouse constantly to build menu in order to do something. Not to mention addons which make menus extremely long so you have to scroll for 5-10 seconds until you find what you want.
Bottom line is: I want player to have all build commands in the vicinity of the cursor and no more than one or two clicks away.
Offcourse, we can leave both camera controls and build menu for those inclined to use them but I would like to see how would UI look without them.
As for movable UI, I'm against it. It was pretty annoying in CXL. From time to time I would accidentally click on piece of UI and drag it to the center of the screen.
I'd say a 1 key access menu (like space to bring up the circle menu) would be a bit cluttered/deep, you should consider splitting the menus up to maybe modX+space or modX+right click for each submenu, or maybe seperated keyboard shortcuts to open submenu
I like the idea of the round-the-mouse thing though :)
you have to remember that this is just one of the GUI's...any one can make one, with whatever controls they like, it would probably be quite easily to hack a fork of Toms one into something else.
Joe
Quote from: JoeST on November 06, 2009, 10:47:11 AM
I'd say a 1 key access menu (like space to bring up the circle menu) would be a bit cluttered/deep, you should consider splitting the menus up to maybe modX+space or modX+right click for each submenu, or maybe seperated keyboard shortcuts to open submenu
Space will bring up build menu. Buttons will open one submenu. Off course we could use Shift+'1', Shift+'2'... to directly access submenus but it's a little inconvenient. Right click will bring up context menu without the submenus.
Anyway, you'll be able to try it soon, so we'll see how will it go.
Townscape, can you make 30x30 icons for build menu (zones, roads, public transport, rail, airports/seaports, public services, utilities, parks/rec) and upload them here?
Another option is to copy how launchers work. SuperKey + spacebar, start typing in the name of the program or plugin you want, it will autocomplete it, then tada. Such an interface would be a lot more comfortable for people with a lot of addons.
I'm kind of bored of the menu on the left, it was like that in SimCity and in CXL.
Also that design take up too much screen space. I think having shortcut keys like SC4 would be great, as well as being able to change/add shortcut keys to any item. Also a moveable UI would be useful with a lock button, so we don't accidentally move things we don't want to.
Personally I like mouse control (vs keyboard), with short cut keys you have to remember the comibinations for everything, the only time I find them useful is when using/doing the same thing repeatedly. A mouse however you don't have to remember as you just point to the button on screen and click. (what I really want is that keyboard with little screens in each key which change according to the program your using :), but costs 2000USD :( )
I think though the UI should be fully customizeable, using XML or similar which is relatively easy to change. Everyone likes different colours, and finds different layouts easier to use and for widescreen monitors some people may prefer a sidebar type UI.
Just my thoughts.
Quote from: tomkeus on November 06, 2009, 11:12:30 AM
Townscape, can you make 30x30 icons for build menu (zones, roads, public transport, rail, airports/seaports, public services, utilities, parks/rec) and upload them here?
Isn't that too small? I would double that size.
And also should I include the ones for pressed and hovered?
IMHO, icons should be in vector format (svg maybe?) so that way they can scale
Hi, I've been following this project for a while but never felt the urge to pitch in since I'm not a programmer. Really a great project and good to see that it only takes a few people with great devotion and ideas to make something fresh. Chapeau!
I think I can help on this aspect of the game. I've been a betatester for CitiesXL and if anyone of you here was too you'll know how effed their UI was/is. In my betatest period I made a mockup of how I thought the UI could look. They even took some of my ideas to improve their UI (but imo in a half-assed way). I'll post it here so you can decide if i can be of any help or not.
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fimg690.imageshack.us%2Fimg690%2F4301%2Fcitiesxlgui.th.jpg&hash=fa848768d1f655ece79d3af56f2526342fab5f0a) (http://img690.imageshack.us/i/citiesxlgui.jpg/)
Note: This was the one for CitiesXl, so it's not so much a demo of what i think the controls for this specific game should be, but how I envisioned the UI for CitiesXL.
So if you guys want to I could help out designing the UI.
[edit]
I personally think a radial menu could work pretty well for the build options and/or 'main menu'. That is more or less a click-and-forget menu which you don't need to see the whole time. For statistics and info I'd keep at the most important (cash(flow) and population) in a fixed position.
Quote from: townscape on November 06, 2009, 12:51:10 PM
Isn't that too small? I would double that size.
And also should I include the ones for pressed and hovered?
I don't want to test UI appearance, but I need some pics to put onto menu buttons because I cannot fit any informative label on a button of that size. Make them 60x60 and I'll set them to size that feels good to me. Maybe 30x30 is too small. I need to see. Just make one set.
here you go tomkeus, if you would like icons for deeper menu's please tell me:
http://www.mediafire.com/file/jgymjtttiwf/for tomkeus.rar (http://www.mediafire.com/file/jgymjtttiwf/for%20tomkeus.rar)
also I reworked as much as I could of my interface and here you have it:
One with camera controls:
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi38.tinypic.com%2Fjqj4h5.jpg&hash=c24eb8c9c997c1acc0d7712a74851133b75f5e78)
And one without:
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi36.tinypic.com%2F2qdbsaq.jpg&hash=e1de5761ff739f795649e7355c07d6d8b8656310)
Hope you like it.
@toberas: I like your mock-up on the beta forums and surely you can contribute to the project. If you would like to cooperate you can PM me and we will discuss. Anyway, help is always welcome.
EDIT: Made some minor changes to the images
I like those. UI is nonintrusive. Thanks for the icons. I didn't expect them so soon.
My favourite UI was in Simcity 2000. I liked the simple draggable menu window it had, and the toolbar for other options. But i guess that game is a bit outdated so...
I like the idea of a 'lock' hotkey/button for the draggable features so you don't accidentally move them. That seems pretty handy. As to the circular near cursor menu system... I personally loathe the idea but I won't try to stand in the path of progress and if it is better then why not... I guess I just like to always have the menu, or the main buttons, visible, that's all.
In my game Virtucity I have a rather simple system using the limited view method so I have a permanent menu/UI area and a permanent city building area separated into two view panels.
But I reckon the way Simcity 4 did things wasn't too bad. I never liked the transparency or the menu design but the layout of the main block was nice.
However a point made earlier should be taken into consideration imo. That new players would find it confusing to see very little of the buttons at first. Also if you are using lots of tools at once, rather than only one or two, you would want quick access between them.
Another point is the map. In Virtucity I have a combined mini map/data map, and in Simcity 4 the mini map is always visible unless you minimize the whole UI. The way you could click on a part of the mini map and go to that place was useful.
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fimg262.imageshack.us%2Fimg262%2F1561%2Fcitymania.jpg&hash=5755751acb0a262897b5e6fac11c9b650e126646)
I made a quick mockup for a GUI layout if you don't mind. I find it easier to explain what i mean that way.
the menu from left to right
menu button [all the options, save/load etc.]
active tool [with spacebar or this button you open and close the radial menu, right mouse button closes too]
cityname + speed [speaks for itself]
rci indicator [does what it's name implies and on pressed shows a menu with all city statistics]
pop + budget [on pressed shows a menu with all financial options and population options]
messagebox [you can make it larger so you can scroll back to older messgaes and there's a button to toggle multiplayer messages]
radial menu
FASE 1: in the first fase you can choose between the main options like build, terraforming, roads, bulldozer etc.
FASE 2: in case of build this is where you choose between the type and density
The active tools button in the menu always shows your current tool, in this case the mouse cursor.
In Left 4 Dead they use radial menus for voice commands and I have to say that it works pretty good. It's very fast and you can group all options according to context. Maybe it could even be done so you have a 'favorites' to which you can add you most used tools. Combing this with hot-keys is another option. For example[SPACEBAR=radial menu], [1=build], [1=residential], [1=low density]. Then, SPACEBAR, 1, 1, 1 immediately gives you that tool.
So this type of structure would minimize screen clutter a lot and still be very functional because everything is in one manageable space. My personal opinion towards draggable menu's is that it's very useless. If you optimize your menu's to take as less screenspace as possible and keep everything in a well organized structure the clutter is the least possible. Maybe the windows could be draggable, but I wouldn't do it to something as the bottom bar or even the radial menu.
controls
I play fps too, so for me a WASD + MOUSE combo is a very natural way of navigating through a world. Combined with scrollwheel for zoom this a perfect solution. With every new game people will have to adjust to the controls and structure, but with WASD+MOUSE you are actually keeping this to a minimum because it's such a well known standard.
This is just an idea so maybe there are valid reasons against it, but wouldn't it be handy (when you use this system) not to use a minimap but to make the fartest zoom-out a topdown view. If then a menu would popup with the choices for overlays (fire safety, trash etc.) your map would be the 'mini'map.
$ 0,02
[edit] typo's
Hmm well whilst i'm never going to be reconciled with the radial menu idea if everybody thinks it is a good one I will not make further objections against it.
maybe it's my age showing... I'm not as keen on the radial either... but I am not so old that I can't learn new tricks! ;D
I guess the main reason i'd prefer a more traditional UI (think Simcity 2000) is because i haven't really played many video games, and Simcity 2000 was my favorite vg.
I guess it makes sense though...
like I said, it shouldnt be hard to hack the client to make it look like what you want
But if the original options are good, it won't be that much necessary.
Actually radial menu's are not that complicated, just different situation of icons.
If the radial menu's will appear too complicated, we can make it as an advanced option to clean the screen a little.
Well, I think there's a lot to say for both options. Maybe a test at an early stage (when the time is there for the GUI to be implemented of course) could determine what is the best choice. It would then be a choice based on experience instead of assumptions. I don't know yet if it would work better or worse than the traditional way.
I rather like the radial menu, reminds me of Crysis and L4D.
I going to enter out of nowhere and say i like the radial dial menu too but the normal one without is very stylish but i think it would be better if it had the building icons above the news ticker but that might just be me ::)
regards
My request is to remove the news "ticker" and replace it with a chat/terminal/news window.
I like it the radial way, if it's made in a proper way the radial menu can become very easy and quick to operate.
Quote from: toberas on November 07, 2009, 01:44:15 PM
I play fps too, so for me a WASD + MOUSE combo is a very natural way of navigating through a world. Combined with scrollwheel for zoom this a perfect solution. With every new game people will have to adjust to the controls and structure, but with WASD+MOUSE you are actually keeping this to a minimum because it's such a well known standard.
As long as these can be remapped (WASD becomes ZQSD on azerty keyboards) I like that idea as well.
What about DVORAK keyboards? Custom key-mapping is definitely going to be a must. Extrapolating off that, wouldn't it be interesting to play this with a USB game controller?
Oh yes, user defined keymaps are definity going to be in. I think tomekeus and I both separately started on this.
Four page article on UI designs from this years DICE. Talks about FPS but still interesting none the elss.: http://www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php
why not have a radial menu based on the edge of the screen, m screen...f circle at the centre of the top of the screen... rise of nations used a similar but simple & square based setup on many of its additional submenues.
Bump. I want to compare and contrast the user interface of Civilization4 and what we know of Civilization 5. Civilization is a turn based strategy game. Both TBS and simulations need to present players with a lot of options and information.
Civ 4
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fui16.gamespot.com%2F1935%2Fciv4screenshot0000_2.jpg&hash=04274ce5999e6714404cab8ab9c3181efdec5c3e)
Note how the bottom half is busy and covers the lower quarter of the screen.
Civ 5
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fwww.civilized.de%2Fwww%2Fcontent%2Fciv5%2Fimages%2F100309-2l.jpg&hash=5faffac0fdfc5d8ed2476473a0205504e28c763b)
Note the simple all business top bar. Context aware action buttons pulled to the left side.
Well could you implement a UI similar to Sc4 in that it is customizeable, but not similar to SC4 that it is very customizeable. SC4 uses a system roughly based on XML in that it has elements/nodes with properties for the layout and uses PNGs for the visual stuff.
We can customize the SC4 UI quite a lot but not add new buttons or menus. So something like that would be great but I'd imagine it would be quite hard to implement.
Not hard at all actually. One way to do it is create a tree like system, the root being the top of the menu, and then various branches. A standard tree would be created and then each item would say where in the tree to add, and make new branches as needed. This can be organized linearly (as before) or radially.
Hi everyone!
I have something new to show you:
An interface mockup, upgraded
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2F%5Burl%3Dhttp%3A%2F%2Fwww.citymania.org%2Fgallery%2Findex.php%2FUI-mockups%2F05042010-01%255Dhttp%3A%2F%2Fwww.citymania.org%2Fgallery%2Findex.php%2FUI-mockups%2F05042010-01%255D&hash=37cc6a4a57000dfb736890c47d53dc2a13779a50)
This is the clear screen
Blue for standby, orange for selected
Upper segment (from left to right):
City name - mayor name - population - quicksave - snapshot mode - album - menu button
Lower panel (from left to right):
- Info zone (at hover appears an info type chooser, similar to budget, advisor, etc. in Simcity 4, click for more details)
- Demand graph
- Landscape or Visual mode (naming in progress, is used for camera controls, weather, and other possible functions as first person vehicle view)
- Construction Layer Mode (switch to the tool)
- BUILD (press to show the build menu)
Build menu (From top clockwise):
- Environment (parks, terraforming, trees, water)
- Commercial
- Residential
- Industrial
- Public Services
- Utilities
- Transport (includes freight and intercity such as water and air)
- Roads
Opinion, criticism, suggestions welcome
I like it alot. Nice and minimal, yet the potential for the information to be right under the finger tips.
The only thing that I would add (that I want) is a small terminal feed for news/playeralerts/chat and a text entry for players to insert chat or commands.
Quote from: croxis on May 05, 2010, 11:31:51 AM
I like it alot. Nice and minimal, yet the potential for the information to be right under the finger tips.
The only thing that I would add (that I want) is a small terminal feed for news/playeralerts/chat and a text entry for players to insert chat or commands.
I'll second that ;) I really like it, way better and less of a dated look compared to the SC4 UI
It looks fantastic I must say! :thumbsup:
townscape:
It looks great, but we need to clear the thing about the radial menu. The radial menu I've planned is less obtrusive then that you've shown. It is adaptable circular array of buttons, it is not solid object like the one on the picture, but I guess it's my bad since I didn't explain myself at all.
Here's the picture:
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi4.photobucket.com%2Falbums%2Fy127%2Ftomkeus%2Fradialmenu.jpg&hash=069d4932431f707dfc68c6af91348976d6c12e4e)
This way, menu can be adapted to the number of items, and submenus can be opened, just by wrapping the menu around the parent menu. Also, there is a numerical entry field in the middle, in order for user to have quick, context adapted way to adjust certain values (or text ones if needed)
To improve visual appearance, circular arc strip can be added between buttons, but mostly, the space is empty and it does not block the stuff bellow.
i think tomkeus his menu structure in combination of townscapes solution is the gold we're looking for! &idea.
What about:
* clicking on one of those items (subitems) to open (optionaly multiple) 'pinable' panels with all (zone/road) types/options for construction, so you can setup your needed panels first in your screen (let's call it build-screens, that you can save, import and export too!), and start building. When you think you're done, you can click them away and reactivate them by the radial menu (or VERY IMPORTANT, a short-key). Maybe we can add an option to 'pin' shortcut icons to the radial menu or the upper/bottom left corner to 'fast activate' a build-screen of choise.
This way, we can support unlimited (custom/plugin) items within the panel.
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi5.photobucket.com%2Falbums%2Fy199%2FNe0que%2FCityMania%2Fradialmenu.jpg&hash=2531e171d4779e8d2d53b6ca4c3faf85520f3018)
Since client app is going to be plugin based, it shouldn't be too hard to add new UI elements through plugins. Default UI is plugin by itself (actually, almost everything will be a plugin, game will only have a small core).
Great job guys! Great job.
Quote from: townscape on May 05, 2010, 11:25:12 AM
... Opinion, criticism, suggestions welcome
Really love
townscape's idea and it looks great &apls
my only suggestion is the ability to make it translucent and have a version for left-handed folks
Hey, townscape
Can you make the same set o icons, as displayed on circular menu you've shown here (http://www.citymania.org/gallery/index.php/UI-mockups/05042010-01), only adapt them to the layout I've shown couple of posts above. Also, could you make a set of icons for transportation submenu? They don't need to be rectangular, and I would prefer to have rounded corners, but if you come up with something else I would like to see it. Save them as PNG files (in order to have transparency).
Here is what i have: four choices
Option 1: One with a solid number of primary menus and a limited but big enough number of submenu buttons. Alternative of option 3
Option 2: Looks like your illustration only more pretty :) More possible primary menus, but in my opinion a little too cluttered. With the addition of more primary menus (max of 12) the Build Menu will start to look quite confusing.
Option 3: Is this the layout adaptation you suggested? I pulled the "Landscape" button to show how the Build Menu is structured.
Option 4:Or is this? (Quick one)
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi863.photobucket.com%2Falbums%2Fab193%2Ftownscape%2FCMbm1.jpg&hash=9fcc7e928db4ad7e5d5a8e9f1362bff677693bf6)(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi863.photobucket.com%2Falbums%2Fab193%2Ftownscape%2FCMbm2.jpg&hash=fe4f6d7d38c7f258cff90fc9e43b698727d36f40)(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi863.photobucket.com%2Falbums%2Fab193%2Ftownscape%2FCMbm3.jpg&hash=77ada4b215487dcb3e1295de4f63be8e1b36ddde)(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi863.photobucket.com%2Falbums%2Fab193%2Ftownscape%2FCMbm4.jpg&hash=b893453e1988617ffe84625e2f0e6cc5a6dac8a8)
Side note: What numerical values could be needed directly in the menu? I could think of it being a coordinate field in which you enter submenu order coordinates ( 1.Landscapes -> 4.Monuments -> 12.Park tile 12) but nothing other than that.
I think option 3 is the only good one if you want the user interface actually being usable. Those floating icons will be getting annoying when you miss-click for the umpteenth time. You could always make the center transparent if it doesn't work visually (too clunky) but that needs to be seen. I think clunkyness in this version is not so much because of it's size but the lack of further detailing which I'm sure will be improved when a choice is made.
What I'd like is option 3 except slightly smaller (takes up too much space on screen) but also instead of clicking on each ring you click on the first icon and keep the mouse button down and just hover over the menus you want to open until you get to the lot/network/whatever you what and let go of the mouse.
EDIT: also maybe some kind of dock where you can put your most commonly used items, which will be different for each user.
and you might think of making sure the UI is touch screen friendly as that seems to be becoming the future of interacting with computers.
but the only problem with circular menus is that what if the user has like 100s of parks or something then how do you plan to fit that into the UI.
Adding a dock to a menu which you think already takes up too much space makes no sense. Also, if you use a specific combination alot than this type of menu lends itself perfectly to use you're muscle memory. And I thought it is proposed to be able to use number codes which is another shortcut.
My biggest problem with the option 3 is that number of items in the menu cannot be changed. I want to have menu that can grow to accommodate new items. I already did some test last year with such menu structure with FLTK and I never had any problems to pick stuff from the menu. Maybe I should upload a small app for you to check out how that menu feels.
Sorry I didn't mean to the actual menu, but like on the edge of the screen (kind of like a Mac Dock in that sense). but yep just ideas.
100 parks is going to put any interface under a lot of stress :)
(Side tangent. What if parks were another zone type? There could be family/neighborhood park zone, wildlife/habitat/nature reserve zone, maybe a couple others. maybe not, something to ponder.)
The last thing we want is the problems SC4 interface had. My intention is to have a UI where the content creators can create new menues, submenues, subsubmenues, and so on as needed. This is something I want the user to be able to override as well.
I do think a dock could work well, especially if users can create custom settings like intersection types and so forth. Taking a look at MMO GUI might not be a bad idea in this case (minimap, doc, chat/command/news window).
Some links of interest:
http://en.wikipedia.org/wiki/Pie_menus
http://www.donhopkins.com/drupal/node/128 Python pie menu by Don Hopkins, who wrote much of the Sims1 and its UI.
How about a menu that can show a beter object than we see when trying to add to the city you are working on. Perhaps one that you can split your screen. if you have two screen's than one will show your object and the other your city. This would have to be scripted to make SimCity 4 D to operated in a framed window or only to one of your screen's without taking over your complete system. Yes/ theres the options of adding the -w and res into your exe shortcut. but that still pauses the play of your city when your using other applications. I know it's possible... so if you creat a rolodex menue for all types of addons and plapables. than you would have a good thing. and make it so you can breack it away from the main play screene and be outside on a diferant box or screen. well. Dont know. something to look into I think. Thank you everyone for all the good ideas and things here at SC4D AND THE LEX. God Bless
Quote from: croxis on May 11, 2010, 05:15:37 PM
The last thing we want is the problems SC4 interface had. My intention is to have a UI where the content creators can create new menues, submenues, subsubmenues, and so on as needed. This is something I want the user to be able to override as well.
This is exactly what I'm talking about. But I guess we'll have to make some small demo to see how is that going to work with the crowd.
just a quick question that popped up. Won't there be problems with upside down icons when you can rearrange and add menu items?
It will mean that if you want to rearrange them you will have to replace the icons in question. Not the most modular way but i can always give out the source file for anyones editing.
Also on the topic of docks: We could use pallets (collections) for certain submenu choices which would display [park tiles, train stations, transport type, roads] of a certain style as the chosen current one.
Example: we choose a two-lane road in the menu. The build menu disappears and a pallet bar shows up at the right edge of the screen with the other similar choices like Single Lane, Highway, Avenue, Pedestrian
Also, tomkeus, can FTLK, or whatever language you are using, rotate the button it is using (maybe procedurally rotating depending on it's placement in the circular array) and have the symbols as a separate layer so they won't rotate with the buttons? Can we have special animations (like resize, replace image with other) at hover or press?
Never mind FLTK now. It's irrelevant.
I don't need to replace textures when I rearrange icons. I only need to change texture coordinates on the button. This also means I will have to use multitexturing (one texture for the button background, and one for the icon symbol) but it's no problem.
Background texture needs to be gradient as in your pictures and it can be small (32x32 pixels or 64x64 pixels). Same goes for the icon, but since it'll have to have some sort of transparency, I suggest you use grayscale image for the icon so I can use blend mode (see this link (http://www.panda3d.org/wiki/index.php/Texture_Modes)). I hope you can understand what to do once you read the text on the link I've supplied.
Each button in Panda3D has four states: ready, press, rollover and disabled so providing textures to display this states is also a requirement.
That was the link I was going to show :D
The GUI in panda are actual 3d objects, so the graphics become textures. This also allows us to freely rotate, stretch, spin or recolorize. The actual icons can also just be black and white (see the blend mode in tomkeus link). They gradient could also be greyscale and the base color of the button can be set in code. This opens the door for more easy ui theming where the user can define what color they want the ui.
Great, everything grayscale and .png? Won't even have to worry about color then :D ..... of course I will
So can you be more specific about what enters in the Primary menu and transport menu? A more precise list of objects please
Its great if you render it in black/white so the end-user can set his own color scheme ;)
Quote from: townscape on May 12, 2010, 08:04:19 AM
So can you be more specific about what enters in the Primary menu and transport menu? A more precise list of objects please
I think it is the best way to design a button, without hard-rendering text on it. Because we want to make some things customizable (for future?).
I need to do icon symbols anyway
Quote from: townscape on May 12, 2010, 08:23:38 AM
I need to do icon symbols anyway
True,
Anyway, nice design there :thumbsup:
we do have a chat room ya know ;)
Quote from: townscape on May 12, 2010, 02:46:50 AM
Example: we choose a two-lane road in the menu. The build menu disappears and a pallet bar shows up at the right edge of the screen with the other similar choices like Single Lane, Highway, Avenue, Pedestrian
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fimg249.imageshack.us%2Fimg249%2F204%2Fradial2.jpg&hash=44abd754107287e06ee017c6317d9bf0ed464ea1) (http://img249.imageshack.us/i/radial2.jpg/)
Wouldn't it be more user friendly to just change the radial menu to the new situation instead of making it disappear and let something else popup at a completely different place. The 'favs' should maybe be renamed to 'related'.
Example: You build something in 'all' mode and after you've selected the item you want to build the menu indeed disappears like it should. If you later want to build something related you invoke the menu again. You toggle the mode and it will show you the related items to your last choice. This way the 'related' items can even be nested. So if you've built a certain type of zone it will show you the type of public services that go with that zone (or something like that). Although a 'favorites' dock seems more useful because users can set it up for themselves instead of devs controlling what should be related or not.
$ 0,02
With my suggestion I was trying to solve the functional issue which appears with non-sidebar build menus: you have to get through the whole menu path to get to the needed category again when you want another puzzle piece. But it's easy to fix if the scrolling plop menu in the end remains in the side.
My idea was to make it even more useful with "collections" - user or item default defined categories which would display choices in the scrolled menu which are related to the item you just selected to use. In combination with your suggested button it could toggle between "related" and "all".
I wanted to solve the issue of very long lists with 100 park tiles/ (fills in our game?) you needed to scroll through in sc4 which always annoyed me and lowered my enthusiasm for additional content. Also the numerical input field can use keyword quick-search, so you could easily find the needed item by typing it in.
can you not make a keyboard shortcut that goes to the last selected item and another for the last selected menu.
But if you hate the scrolling with long lists why would you choose to use a bar which will eventually lead you again to scrolling. Isn't that the beauty of the radial menu that when you have a lot of items in a submenu you could have them all displayed in a ring on the outer edge of the menu?
If all your items don't fit with the standard size of the menu you can have the most outer ring (in my example the main ring would be 'beautification' the subring would be 'parks' and then it will add another ring for the different kind of parks) to scale up or down according to the number of items.
With the dock you can toggle between the standard build menu with ALL items or your CUSTOM/COLLECTION (isn't that what it'll be?) build menu. This way you have access to everything in one single menu and you can switch modes if you want to. There's no scrolling because the rings will scale to accommodate all items. I don't see what the problem is with going though the first two rings to get to the third. Especially when you use a lot of the same items you'll remember the shortcuts very quickly. Ask anyone that plays Counter-Strike to name a couple of buy-menu codes and you'll get at east 6 in 10sec ;D
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fimg341.imageshack.us%2Fimg341%2F8537%2Fradial2.gif&hash=8dd36c3880b8fe70b60dab609ce5ec404394efde) (http://img341.imageshack.us/i/radial2.gif/)
example
I think a tagging system would be nice... each item is tagged with arrays of keywords, for example:
* Road tool: ["construction"(one of the main sections), "roads"] would appear as the construction→roads→road
* Highway: ["construction", "roads"] => construction→roads→highway
* Rail: ["construction", "rail"] => construction→rail→track
* ZHouses: ["construction","housing"],["zones","green"] => construction→housing→Zhouses and zones->green->zhouses
* BusRailStation ["construction","road","busstops"],["construction","rail","stations"],["lots","stations","bus"]
...you get the gist.
Joe
why not an oval?
Benefits of the circular menu except with more room.
Also are you going for zones in the way SC4 had them, not like you draw a region, then up pops a properties (except way more userfriendly than properties) and lets you choose like max number of floors/height. Whether the zone is com or res or ind or mixture of com/res.
Lol I was going to suggest a synaptic tag based search system too. Darn people keep beating me to it!
100 items for a category is simply too big and poor design. They will either need to be sorted into sub categories and/or use a tag based system to help filter.
"favorites" was part of my suggestion
yes I agree 100 items in a place is too much
but it can be true
should these items be organised in a circle or scrolled box is a debatable issue
couldnt you have a scrolling arc? Like the items on that level are arranged on a corkscrew and when you get to the edges of the viewable area, it simply twists round?....twould also mean you could have a quarter-circle menu that fits snuggly into the edge of the screen, rather than waste all that space :p
Joe
The function of a pie menu is that it adds direction in addition to order. A traditional line menu (sc4) only has order. This results in pie menus being drastically faster to navigate and use than traditional menus. Using a scrolling arc will eliminate the power of direction.
Quote from: croxis on May 13, 2010, 03:28:13 PM
The function of a pie menu is that it adds direction in addition to order. A traditional line menu (sc4) only has order. This results in pie menus being drastically faster to navigate and use than traditional menus. Using a scrolling arc will eliminate the power of direction.
Thanks, you say what I meant better than I could. And in so much less words too :)
I think we all agree with this radial menu by now? It has huge power when we combine it with a tagging system. My only concern related with this menu is zoning types. Because according to the draft, it is slightly different from SC4.
For example:
- Environmental
- Parks
- Sports
- Amateur
- Simple city sponsored sport complexes
- Sport fields
- Professional
- for example: Football clubs (with stadium)
- etc..
- Tools
- Road (noise) barriers
- etc..
- Residential
- Rural
- Mansions, villas. (high wealth)
- Farm houses, villages/hamlets. (medium/low wealth)
- Suburbian
- Typical village buildings, row houses etc
- Urban
and so on (http://wiki.github.com/Nique/CityMania/transpose-from-old-wiki)
I also want to keep the 'zone demand' displayed on the screen. And i liked it to be on the bottom of the screen, because it is natural to have a 'interface' of 'what you need' at the bottom and an 'interface of what you have' on the top (see warcraft, starcraft etc). But because we do not need resources our selves the top bar is not needed. But a city hall overview (and a small version of that on the bottom right like in SC4, (financial stuff)) will be great.
It is natural to have 'the control panel' at the bottom of the screen. A train driver doesn't have his controls above the window either ;)
I'm a big fan of top bars. We need a good way of providing quick information without being clunky. In most games I have played (Star Craft, Civilization4 and Civ5) resource data is at the top of the screen. It is an established convention that keeps a cleaner interface than sc4, which looks increasingly clunky as it ages.
This was already posted on the third page, but here you are a layout:
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fwww.citymania.org%2Fgallery%2Fvar%2Falbums%2FUI-mockups%2F05042010-02.jpg%3Fm%3D1273849276&hash=eead56d811eb1e73d55cf69f9e5155f63d563173)
don't mind the build menu, the image was taken before the discussions
larger image in gallery (http://www.citymania.org/gallery)
Quote from: croxis on May 12, 2010, 08:41:50 AM
we do have a chat room ya know ;)
Yes, but here your text will be stored.. ()stsfd()
Quote from: townscape on May 14, 2010, 08:05:43 AM
This was already posted on the third page, but here you are a layout:
(image)
don't mind the build menu, the image was taken before the discussions
larger image in gallery (http://www.citymania.org/gallery)
I know that image. It's something i meant. But i think it is too 'city xl ish'. :)
Quote from: croxis on May 14, 2010, 08:03:47 AM
I'm a big fan of top bars. We need a good way of providing quick information without being clunky. In most games I have played (Star Craft, Civilization4 and Civ5) resource data is at the top of the screen. It is an established convention that keeps a cleaner interface than sc4, which looks increasingly clunky as it ages.
Overview on the top
Controls on the bottom
Actually why not build the UI to be very basic simple menu. Then you can create the game and UI mods can be made. As your not going to satisfy everyone with one UI.
UI mods will be possible.
I know so you don't need to spend time on the UI now was my point
anyway...
Here is a restyle of the original interface:
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fwww.citymania.org%2Fgallery%2Fvar%2Fresizes%2FThumbs-for-forums%2FInterface_restyled_17052010_01_thumb.jpg%3Fm%3D1274040252&hash=48c17ac5aa6657c76102cffc8bee91de38f37b9e)
larger image here (http://www.citymania.org/gallery/index.php/UI-mockups/Interface_restyled_17052010_01)
my main goal was to make it available for greyscale:
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fwww.citymania.org%2Fgallery%2Fvar%2Fresizes%2FUI-mockups%2FInterface_restyled_17052010_02.jpg%3Fm%3D1274039379&hash=ae8ddaa4537a84036338ee504ca7958a18177cf0)
would it translate correctly if it used the color property in panda3d blend mode?
do you like it? ()stsfd()
Like I said in chat. I love it. I am very egar to getting this in.
Here is a circle menu button with all phases and a symbol to go with it for tests:
Download (http://www.mediafire.com/?oggjkc1n1nu)
filename:Icon_test.zip
size: very small (29.26 KB)
townscape, these button shapes are kind of a problem because they can fit well only onto the radial menu of particular radius. Remember, each new submenu level has greater radius and radial menu I've coded supports arbitrary number of submenu levels.
All my earlier examples used this button and in my opinion they looked normal.
In my design I use slightly smaller buttons for additional submenus.
could you show me an example of not fitting well?
or would you rather have another form? how about a similar one but of smaller width?
Did the grayscale button work properly at least or should I give you one with a black background?
I believe they are not intended to fix tougether and touch, but have some space in between them like in the sample shots.
OK. I'll try them out.
Where to put the minimap ;)
do we need one? hmm... does it have to be constantly on the screen? do we use it that often? I could place it in the upper left corner...
Yeah, make a little tab so it could be expanded ;D
Townscape, what will it look like in 'statistics'-view because it seems to me that the lower right bar is too small to show overlays and statistics. Will it be another floating menu, will it expand or is there another plan for it?
Quote from: toberas on May 18, 2010, 01:27:18 PM
what will it look like in 'statistics'-view because it seems to me that the lower right bar is too small to show overlays and statistics
my thought was that overlays will display around 6 most used or important overlay options and clicking it would show the full list and a minimap or top view
and we can take out the statistics from the panel and show it when pressing the demand chart displayed in the lower bar
Another issue to be raised what enters every submenu:
zoning options can be simple and not so branched out:
Residential:
-low density
-medium density
-high density
Commercial
-low density (includes small shops and offices)
-medium density
-high density
-mixed use
Industrial
-agriculture
-industrial (buildings grow by demand)
Let's not forget that the less zoning types the more challenge you get in limiting industrial pollution, getting a clean neighborhood, etc.
What about other categories?
Beautification:
-Terraforming
-Trees
-Parks
-Plazas? (as a separate category?)
-Recreational?
-Labels
Transportation:
-Busses
-Trams
-Rail
-Subway
-Airports
-Ports
Roads:
-Roads
-Highways
Public Services:
-Fire safety
-Police security
-Healthcare
-Education
-Landmarks (rewards)
Utilities:
-Water
-Power
-Garbage
Discussion is welcome and even needed, everyone is invited to comment
Quote from: townscape on May 18, 2010, 10:04:15 AM
do we need one? hmm... does it have to be constantly on the screen? do we use it that often? I could place it in the upper left corner...
I think so. I always use the minimap to click on it to get my camera to a specific location on the field.
I think the bottom left corner is great for a minimap. ;)
Menu is complete (edit: I'm only talking about the code here):
http://www.youtube.com/watch?v=ywGmAGcEkdc
Menu appearance is easily changed so don't consider this design set in stone. What is important, is that all functionality needed is there.
I just had a look at it and functionality-wise, it looks very good so far. I'd personally use another colour than that yellow (something a bit more...blue), but that's just my 2 cents
Quote from: Nique on May 18, 2010, 03:55:38 PM
I think the bottom left corner is great for a minimap. ;)
How would that be :D now, seriously: Most games place their minimap there, so if a minimap would be includer, that would be the place to put it
How about making the minimap moveable. I think the entire UI should be click and drag moveable with a lock icon to change between using the UI as a UI and moving the UI.
Indeed, reordering the menu on the fly would be awesome too!
Quote from: tomkeus on May 20, 2010, 12:35:17 PM
Menu is complete (edit: I'm only talking about the code here):
http://www.youtube.com/watch?v=ywGmAGcEkdc
Menu appearance is easily changed so don't consider this design set in stone. What is important, is that all functionality needed is there.
Great!
http://www.youtube.com/v/ywGmAGcEkdc
Is that menu colorized?
Quote from: Nique on May 21, 2010, 05:36:30 AM
Is that menu colorized?
I don't get it. What do you mean?
Looks great. I always imagined the radius popping up in the center of the screen, but I think this is better because it acts even more as a quickmenu because you don't need to change your focus to a different spot. Also the way it pops up is good. It's very tempting to over-animate such menus, but that would become very annoying after a while (citiesxl anyone?) so this is fast, works good and looks great! GJ.
I don't really understand what people have with rearranging the UI. I can understand why a developer would want to build the UI adjustable for modders, but to have all UI elements draggable and resizable by the player is not a good idea imo. Their needs to be a base on which you can trust and build as a modder and as a player. A certain style and guideline for the game to be cohesive and understandable is necessary. The UI needs to be well thought out and balanced for it to be usable and even fun to use. Draggable elements most of the time do the opposite of what their purpose is. It will clutter as hell because there will be elements obscuring each other and the balance will be gone. As a player you don't want to have to look and search every time where that certain button is. In a fixed UI you'll know where everything is after a short time and you'll be able to go to what you want with minimal effort so your focus is on playing and not on searching.
I don't think that draggable/resizable elements are the way to go but that's just my 0,02
Quote from: tomkeus on May 21, 2010, 06:25:20 AM
I don't get it. What do you mean?
I mean, did u use the grayscale sprites, and then color it orange?
No. Textures are orange. I though it might be too restrictive on the design.
Ok,
before we continue, maybe it is a good idea to choose a 'font' for the game. If we use different fonts the game's interface will become a mess. :)
are there any copyright laws we need to take notice before looking into the options?
Quote from: townscape on May 22, 2010, 05:03:22 AM
are there any copyright laws we need to take notice before looking into the options?
Yes, only use free fonts that may be used for open source projects.
the first thing that came up my mind is DejaVu Sans Condensed:
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi863.photobucket.com%2Falbums%2Fab193%2Ftownscape%2Fdejavu.jpg&hash=600b3fffc4eefc2ef26ef6572113ded003d047b6)
but i'm still searching for some open source fonts on the internet
also here is a recolor in blue-grey and the radial menu in the colors. the main goal of the color is to bind seamlessly
in urban landscapes and not distract from the game experience
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fwww.citymania.org%2Fgallery%2Fvar%2Fresizes%2FUI-mockups%2FInterface_restyled_23052010_01.jpg%3Fm%3D1274646053&hash=f1cddea7fa9da777d974291d2bbba96e208d935c) (http://www.citymania.org/gallery/index.php/UI-mockups/Interface_restyled_23052010_01)
(https://www.sc4devotion.com/forums/proxy.php?request=http%3A%2F%2Fi863.photobucket.com%2Falbums%2Fab193%2Ftownscape%2FMenucolor_23052010.jpg&hash=85b8d9cd9e15247a0967f8b47f59418750e4c863)
I'm not sure whether it's open source but it's a widely used font I believe and I know Apple use it, though it isn't theirs. called Helvetica?
EDIT: and how could I forget, the UI is looking awesome :thumbsup:
&apls The menu is great, like the colors and the way i see you working it in the vid... are you planing to colorize the items per there zones? that would be brilliant :-). look forward to the beta.. would be happy to try it out...
if it werent for possible copyright issues i would have suggested MP Helvetica and Myriad Pro
Quote from: MOREOPTIONS on May 23, 2010, 02:22:14 PM
&apls The menu is great, like the colors and the way i see you working it in the vid... are you planing to colorize the items per there zones? that would be brilliant :-). look forward to the beta.. would be happy to try it out...
what do you mean? color buttons green for residential, blue for commercial, etc.?
maybe...
townscape: 2 things
If you haven't figured so far you can take screenshot in the app I've sent you by pressing the 'p' key. Also, I've noticed on your enlarged screenshot that stripe is not being drawn correctly. I've fixed that so remind me tomorrow to send you fixed version.
How to remind you ;D
Quote from: Nique on May 25, 2010, 04:19:59 AM
How to remind you ;D
In our chatroom. We have a chatroom, remember?
Quote from: tomkeus on May 25, 2010, 05:24:07 AM
In our chatroom. We have a chatroom, remember?
Like i said before, chat is for well .. chatting. I think the things we are discussing here is not suitable for chat...
I like to 're-read' messages. That's a hell of a job when searching in chat logs..
why don't you use your google wave then, it's like a cross between the 2.
A lot of developer discussion happens in chat for many projects, there is a lot more that heppens and is planned there than the forums. If there is something I need to remember I jot down notes on paper.
Quote from: Jonathan on May 25, 2010, 10:30:57 AM
why don't you use your google wave then, it's like a cross between the 2.
Well that was the original idea, but somehow it fell out of use. Me and croxis just brushed on that topic recently and concluded that we should try and move internal discussion to the wave.
wave is available for everyone now as well, so no more invites needed
Yes, Green=Res and so on, and I think with Parks if your doing it. perhaps Orange.. Nice healthy color for them... would be great to zone them... :-). your doing good :-) &apls
May I make a suggestion for the UI.
The overall layout I have no complaints about and seems very intuitive, I would like to mention though something that is very important when I am doing any sort of UI "experience" and that is something called feedback.
Menu style is great I might suggest adding a border that changes colors around each icon based on whether it is selected, not selected, or being selected (mouse button suppressed and/or button highlighted) something that is small and perhaps 2 pixels wide would be perfect and fit with the overall minimalist design and not look funky on the diagonal edges.
Just my two cents, I am a major stickler for feedback, hell I refuse to purchase touch screen things for the lack of any tactile feedback.
On an entirely separate note may I suggest setting some color standards for this game eg. res = green, park = brown, civic = red etc. etc.
All in good faith! Cheers.