Spectator-UI Ideas
Hello guys!
In NS2HD's latest videos he talked about spectator-mode feedback from the community and how the spectator system should be improved for the release of NS2 (<a href="http://www.youtube.com/watch?v=v7voaNKd0GM#t=7m10" target="_blank">http://www.youtube.com/watch?v=v7voaNKd0GM#t=7m10</a>). With the current spectator mode it is very hard to always be in the right spot with your camera and the minimap is not always showing what is going on with the tech of both teams and this is very frustrating for your spectators if you are casting a match. I know that, because I have also casted some clanmatches in the past months.
The main missing feature is probably the first person view and a directed camera mode, but beside this I wanted to share some GUI ideas with you.
So I gathered some ideas and made a <u>quick, little</u> sketch to show you:
<img src="http://img593.imageshack.us/img593/5908/spectatorui2.jpg" border="0" class="linked-image" />
Explanation:
-- Top-Menu
Here you can see the players of both teams, player/team resources and the current gametime and map. This is similar to the dota2 top menu where you can see the player hero avatars... I think its the best way to show all informations about the players and the current round you need in a very tiny space.
The players are being displayed by their current role / weapon selection (commanders are referenced by a commandstation or a hive). So when they switch to another role/weapon, the icon will also be changed. You could additionally display their hitpoints with a small (colored) bar below the playerbox. Displaying the playernames is something which I would not do. As you can see there are also some small icons showing the current upgrades of each player. I don't know if these icons are too small but making them bigger would cause them to hide the main player icon. I've also added a death time indicator which is overlaying the player icon.
In the center of the top menu you can see the current gametime (now its placed in the score board which doesn't make much sense) and also the map name. The current teamresources are also shown here. If you want to also add the killstats to this position, I'd say to move the maptime/name to the bottom of the screen and align the res/kills stats in a better way.
-- Tech-Locations
In the bottom right area of the screen you can see the techpoints locations. Its showing all available tech locations of the map at the same time. If there is no hive/commandstation on a specific location the little box is left blank (or you could just hide it). Every built up techpoint has some more indicators on it showing the current hitpoints, the egg/IP count or the chosen tech tree of a hive. Techpoints which are being build are greyed out and the build percentage is also shown.
-- Minimap
With the current minimap there are some problems. You can cycle through three states: no minimap, the minimap in the bottom left corner or the full map in the center of the screen. In my opinion it shouldn't be possible to hide the minimap completely and I also think that the smaller minimap is a little bit too small. So two different toggles should be implemented: one for changing the minimap size and one for hiding the minimap and tech-locations to get a clear screen.
-- Screen resolutions and aspect ratios
While designing a GUI you have to make sure that everything runs well on different screen resolutions and aspect ratios. I know that there are many improvements which can be done to my little sketch, eg. reducing the weight of the tech-locations (size, opacity, colors, saturation) or the minimap. But despite this I think it a good start, because the complete GUI also fits well on screens with a smaller aspect ratio (4:3).
I'd love to know what you think of my ideas and also what you would do in a different and/or better way.
In NS2HD's latest videos he talked about spectator-mode feedback from the community and how the spectator system should be improved for the release of NS2 (<a href="http://www.youtube.com/watch?v=v7voaNKd0GM#t=7m10" target="_blank">http://www.youtube.com/watch?v=v7voaNKd0GM#t=7m10</a>). With the current spectator mode it is very hard to always be in the right spot with your camera and the minimap is not always showing what is going on with the tech of both teams and this is very frustrating for your spectators if you are casting a match. I know that, because I have also casted some clanmatches in the past months.
The main missing feature is probably the first person view and a directed camera mode, but beside this I wanted to share some GUI ideas with you.
So I gathered some ideas and made a <u>quick, little</u> sketch to show you:
<img src="http://img593.imageshack.us/img593/5908/spectatorui2.jpg" border="0" class="linked-image" />
Explanation:
-- Top-Menu
Here you can see the players of both teams, player/team resources and the current gametime and map. This is similar to the dota2 top menu where you can see the player hero avatars... I think its the best way to show all informations about the players and the current round you need in a very tiny space.
The players are being displayed by their current role / weapon selection (commanders are referenced by a commandstation or a hive). So when they switch to another role/weapon, the icon will also be changed. You could additionally display their hitpoints with a small (colored) bar below the playerbox. Displaying the playernames is something which I would not do. As you can see there are also some small icons showing the current upgrades of each player. I don't know if these icons are too small but making them bigger would cause them to hide the main player icon. I've also added a death time indicator which is overlaying the player icon.
In the center of the top menu you can see the current gametime (now its placed in the score board which doesn't make much sense) and also the map name. The current teamresources are also shown here. If you want to also add the killstats to this position, I'd say to move the maptime/name to the bottom of the screen and align the res/kills stats in a better way.
-- Tech-Locations
In the bottom right area of the screen you can see the techpoints locations. Its showing all available tech locations of the map at the same time. If there is no hive/commandstation on a specific location the little box is left blank (or you could just hide it). Every built up techpoint has some more indicators on it showing the current hitpoints, the egg/IP count or the chosen tech tree of a hive. Techpoints which are being build are greyed out and the build percentage is also shown.
-- Minimap
With the current minimap there are some problems. You can cycle through three states: no minimap, the minimap in the bottom left corner or the full map in the center of the screen. In my opinion it shouldn't be possible to hide the minimap completely and I also think that the smaller minimap is a little bit too small. So two different toggles should be implemented: one for changing the minimap size and one for hiding the minimap and tech-locations to get a clear screen.
-- Screen resolutions and aspect ratios
While designing a GUI you have to make sure that everything runs well on different screen resolutions and aspect ratios. I know that there are many improvements which can be done to my little sketch, eg. reducing the weight of the tech-locations (size, opacity, colors, saturation) or the minimap. But despite this I think it a good start, because the complete GUI also fits well on screens with a smaller aspect ratio (4:3).
I'd love to know what you think of my ideas and also what you would do in a different and/or better way.
Comments
If it could ever be interactive it would be cool if you could press a key and bring up the mouse to click on a box and spectate it immediately, like a tech location or player.
The right bar though i'm not so happy with. I don't think you need to list every hive/CC location. Just the number of hives, CCs and RTs for every team would be enough. You can see where they are on the minimap easily enough.
This should be forwarded to the new UI Artist.
But you would not be able to see the hitpoints in case of a baserace, so a display for each location is important imo
<!--coloro:#00BFFF--><span style="color:#00BFFF"><!--/coloro-->[CC: <b>Data Core</b>]<!--colorc--></span><!--/colorc--><!--coloro:#696969--><span style="color:#696969"><!--/coloro--> .......... [<b>Crossroads</b>] [<b>Atrium</b>] .......... <!--colorc--></span><!--/colorc--><!--coloro:#FF8C00--><span style="color:#FF8C00"><!--/coloro-->[Hive: <b>Flight Control</b>] [Hive: <b>Sub Access</b>]<!--colorc--></span><!--/colorc-->
Everything else looks excellent, though I also agree that player names would be important to display. This isn't DOTA where you have one player of each class; we have multiple unique skulks, etc. that must be called by their proper names in order to confer what the team is properly doing. I also agree that some kind of health indicator is also very important. Could we maybe colour the players' images with about a 40%-50% solid colour overlay with hue according to their current health (green > yellow > red, etc.)?
Very nice work!
EDIT: Also, the minimap is slightly too small IMO and could be increased in size by about 15% or so.
<!--coloro:#00BFFF--><span style="color:#00BFFF"><!--/coloro-->[CC: <b>Data Core</b>]<!--colorc--></span><!--/colorc--><!--coloro:#696969--><span style="color:#696969"><!--/coloro--> .......... [<b>Crossroads</b>] [<b>Atrium</b>] .......... <!--colorc--></span><!--/colorc--><!--coloro:#FF8C00--><span style="color:#FF8C00"><!--/coloro-->[Hive: <b>Flight Control</b>] [Hive: <b>Sub Access</b>]<!--colorc--></span><!--/colorc--><!--QuoteEnd--></div><!--QuoteEEnd-->
You mean like the controlpoint-mode hud in TF2?
<img src="http://www.rambase.ro/site/system/files/images/tf2_contol_point_capture.jpg" border="0" class="linked-image" />
Yes, I also thought about this. But a problem could be the minimap. Its a large element of the hud and you don't want it to be in the center of your screen. So you have to scale the minimap down a little bit and this will be an information loss.
<!--quoteo(post=1915589:date=Mar 20 2012, 10:39 PM:name=DarkOmen)--><div class='quotetop'>QUOTE (DarkOmen @ Mar 20 2012, 10:39 PM) <a href="index.php?act=findpost&pid=1915589"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->Everything else looks excellent, though I also agree that player names would be important to display. This isn't DOTA where you have one player of each class; we have multiple unique skulks, etc. that must be called by their proper names in order to confer what the team is properly doing. I also agree that some kind of health indicator is also very important. Could we maybe colour the players' images with about a 40%-50% solid colour overlay with hue according to their current health (green > yellow > red, etc.)?<!--QuoteEnd--></div><!--QuoteEEnd-->
I have added health bars with player names in it to the bottom of the player boxes. This seems to be the best solution...
Here you can see the hud in different aspect ratios:
16:9
<img src="http://img26.imageshack.us/img26/2926/spectatorui3.jpg" border="0" class="linked-image" />
5:4
<a href="http://img808.imageshack.us/img808/3553/spectatorui354.jpg" target="_blank"><img src="http://img808.imageshack.us/img808/3553/spectatorui354.th.jpg" border="0" class="linked-image" /></a>
4:3
<a href="http://img594.imageshack.us/img594/8272/spectatorui343.jpg" target="_blank"><img src="http://img594.imageshack.us/img594/8272/spectatorui343.th.jpg" border="0" class="linked-image" /></a>
I dont think the techpoint stuff should be done in the ts2 way. Just consider the case where rines start in atrium, build a base in dc, lose atri, but survive in dc. Then all the order wont work anymore.
Other than that I think it is a little too comic style, I mean the colours. The orange and blue. But thats just personal opinion.
Very good work!
EDIT
One question that just came to my mind is: This kind of hud will be visible while you are in third person view, right? So for first person we will just see the persons hud? How about the game indicators. Those wouldnt be shown in the normal first person view, so I guess they is a need for a second first person view that combines the game informations with the normal hud. But maaaaybe I am just getting all wrong :p.
Yes, you are right, but these are just little dirty sketches for the purpose of a spectator UI layout. I'm not an artist (in fact I'm a programmer, but I don't have the time to create a customization of the current spectator ui, maybe someone else can do?) and so I just used some textures of NS2 which will represent both teams most (marine weapon-hud and the alien evolve menu background).
<!--quoteo(post=1915716:date=Mar 21 2012, 04:15 AM:name=nUfl0w)--><div class='quotetop'>QUOTE (nUfl0w @ Mar 21 2012, 04:15 AM) <a href="index.php?act=findpost&pid=1915716"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->One question that just came to my mind is: This kind of hud will be visible while you are in third person view, right? So for first person we will just see the persons hud? How about the game indicators. Those wouldnt be shown in the normal first person view, so I guess they is a need for a second first person view that combines the game informations with the normal hud. But maaaaybe I am just getting all wrong :p.<!--QuoteEnd--></div><!--QuoteEEnd-->
Whats the reason for using a different hud in first person spectator mode in your opinion? I think it fits well in both 3rd and 1st person views. Or do you have any other ideas for the hud elements?
Broadcaster view:
Player info read out - Life, Res, and Weapon.
Mini map gives the position.
One touch to switch to the players cam.
One touch to switch to a preset area cam.
This view wouldnt have to look pretty but would get the job done. Maybe have a dual monitor support would make this easier.
Audience view:
So far what you have is pretty nice. The suggested TF style hive health and CC health would be nice. Each tech point shown with a color indicator of which team holds it. For this view i would really look into MMO layouts. Those games force players too keep track of a lot of information but still be able to function. Specifically healers.
Awesome mod though. One of my major gripes of watching NS was the broadcaster is always playing catch up and cant keep the camera still. The above "BV" Might give them enough information to really give a professional looking presentation without ESP. Not to mention being able to split the screen and show two action packed frames? Not sure if all this could be coded but throwing it out there.
Have a lot of info, like team res nodes, some player portraits with their evolution/equips in picture form and health/armour etc arranged around the screen on the skycam, with drop down menus showing some statistics like different in res earned, kills, territory or w/e similar to DotA 2.
Then if you go into third person it will clear all the stuff off the screen in order to give a good few of the action, first person gives true player perspective with their HUD and everything.
Also maybe have pre set up third person cameras in room that you can quickly switch to rather than having to position every time.
I think the top menu should be visible at all times... During my playtests in CS:GO I can tell, that a top menu isn't distracting your "good action" view.
<!--quoteo(post=1919416:date=Mar 29 2012, 06:29 PM:name=Jow)--><div class='quotetop'>QUOTE (Jow @ Mar 29 2012, 06:29 PM) <a href="index.php?act=findpost&pid=1919416"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->Also maybe have pre set up third person cameras in room that you can quickly switch to rather than having to position every time.<!--QuoteEnd--></div><!--QuoteEEnd-->
You mean as entry point when you switch from first person view to free camera view? This could be a little bit confusing when the camera suddenly switchs to another location and view angle during combat. Maybe as a entry point for the free look camera mode when you switch the map location by pressing a button.
The only thing I found was
I've seen different variants of this UI on youtube. But my spectator mode doesn't look like this. Any ideas?
Cheers,