UI Mockup

BZFlag related only please...please attach large images
Post Reply
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

UI Mockup

Post by macsforme »

Had a moment of inspiration last night, and I mocked up a new UI interface idea that seems more minimalistic and modern. The center circle is the mouse dead zone. To the left of it are shot reload indicators. To the right of it is the flag you are currently holding.

Image
Attachments
mockup_background.png
(648.98 KiB) Not downloaded yet
mockup.png
(105.12 KiB) Not downloaded yet
User avatar
kaadmy
Private First Class
Private First Class
Posts: 37
Joined: Wed Oct 28, 2015 5:31 pm

Re: UI Mockup

Post by kaadmy »

What about the radar-thing?
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

Re: UI Mockup

Post by macsforme »

kaadmy wrote:What about the radar-thing?
It would have more detail than what's in the mockup (probably similar to what we have now), but in the new position and with perspective projection (so it looks like it's tilting away from you).
User avatar
Zehra
Private First Class
Private First Class
Posts: 914
Joined: Sun Oct 18, 2015 3:36 pm
Location: Within the BZFS API and Beyond it
Contact:

Re: UI Mockup

Post by Zehra »

Looks nice Constitution, but it looks a little too modern for bzflag.(bzflag is retro)
Would like to see that in a different game sort of like bzflag although. :idea:
Those who are critical of me, I'll likely be the same of them. ~Zehra
The decisions we make are the ones we look forward too and the ones we regret. ~Zehra
There's a difference between knowing my name and knowing me, one shows respect to my name and the other is to who I am. ~Zehra

See where I've last been active at Strayers.
Visit BZList.net for a modern HTML5 server stats site.

Click here to view the 101 Leaderboard & Score Summaries Last updated 2021-01-12 (YYYY-MM-DD)
Latest 101 thread
trpted
Private First Class
Private First Class
Posts: 242
Joined: Mon Feb 21, 2005 8:29 pm

Re: UI Mockup

Post by trpted »

Looks interesting.

How did you make this mockup ?

If the new UI exist and not for example photo-shop-ed : Where can I down load the new UI?

Thank you
User avatar
kaadmy
Private First Class
Private First Class
Posts: 37
Joined: Wed Oct 28, 2015 5:31 pm

Re: UI Mockup

Post by kaadmy »

@trpted I'm pretty sure it's just a simple image, not in-game yet, unfortunately.
trpted
Private First Class
Private First Class
Posts: 242
Joined: Mon Feb 21, 2005 8:29 pm

Re: UI Mockup

Post by trpted »

kaadmy wrote:@trpted I'm pretty sure it's just a simple image, not in-game yet, unfortunately.
#1 So, you used Photoshop / GIMP (or something like that/those programs/apps) to create that?

#2 Any ETA as how soon that can used/will be used in game?

Thank you

[EDIT] Duh- hits head on wall - you are not the OP, who created that image.

#1 So, you think that they used Photoshop / GIMP (or something like that/those programs/apps) to create that?
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

Re: UI Mockup

Post by macsforme »

It was just a mockup created in inkscape and gimp. Right now it is just a concept. There are several discussions ongoing about how to overhaul the game and make it more appealing for players, including simplifying and modernizing the user interface, so I was just throwing this out there as a part of the overall discussion.
User avatar
Zehra
Private First Class
Private First Class
Posts: 914
Joined: Sun Oct 18, 2015 3:36 pm
Location: Within the BZFS API and Beyond it
Contact:

Re: UI Mockup

Post by Zehra »

I'm looking for an improvement in the interface, looks like a clone or fork may happen if no development in the interface occurs.
But if that does not happen I hope that a clone or fork will bring back the "bzflag" experience back for our users.
I hope a clone or fork may not occur, but that will depend on what happens in the development of bzflag.
Those who are critical of me, I'll likely be the same of them. ~Zehra
The decisions we make are the ones we look forward too and the ones we regret. ~Zehra
There's a difference between knowing my name and knowing me, one shows respect to my name and the other is to who I am. ~Zehra

See where I've last been active at Strayers.
Visit BZList.net for a modern HTML5 server stats site.

Click here to view the 101 Leaderboard & Score Summaries Last updated 2021-01-12 (YYYY-MM-DD)
Latest 101 thread
User avatar
indy
Private First Class
Private First Class
Posts: 268
Joined: Fri Mar 18, 2005 9:49 pm

Re: UI Mockup

Post by indy »

"Consti: have you ever noticed that it's always the worst feeling ever to type a message that's so long that it gets cut off at 128 char"

rofl!!!


btw, I really like the UI mockup.
Monster
Private First Class
Private First Class
Posts: 209
Joined: Thu Sep 20, 2007 7:06 pm

Re: UI Mockup

Post by Monster »

can it also show the mouse box?
Looks great otherwise!
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

Re: UI Mockup

Post by macsforme »

Monster wrote:can it also show the mouse box?
Looks great otherwise!
It would probably be a mouse circle, and I envision that a section of the circular border would appear as your cursor approaches close to it. It would look kind of like a sliver of the moon.
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

Re: UI Mockup

Post by macsforme »

Here's another revision. The mouse box dead zone outline would always be visible (so you can aim), but the outer box would only become visible as you approach it (and only the part of the boundary you're close too, with the rest fading away). Text on the left is chat, text on the right is status stuff, and the text above in the center would be for notifications and important information. I think the rest is pretty self-explanatory.

Image
Attachments
mockup-small.png
(118.71 KiB) Not downloaded yet
mockup_background-small.png
(529.67 KiB) Not downloaded yet
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

Re: UI Mockup

Post by macsforme »

One more revision. I tweaked a few things, showing where more stuff would go like notifications, user prompts (like for polls), the player's score and currently-held flag, and the text box where you type stuff in.

It wouldn't always look this busy, but at least everything has a place when it needs to be shown. This is also an example of what it would look like at the lowest supported resolution. At higher resolutions, everything would be much more spread out.

Image
Attachments
mockup_small.png
(269.19 KiB) Not downloaded yet
click click boom
Private First Class
Private First Class
Posts: 154
Joined: Fri Nov 13, 2009 7:53 pm

Re: UI Mockup

Post by click click boom »

This looks really nice.
Bacon Grease
Private First Class
Private First Class
Posts: 14
Joined: Tue Aug 21, 2012 3:48 am

Re: UI Mockup

Post by Bacon Grease »

I love this, Constitution!
It looks very functional and modern while still respecting the look-and-feel of BZFlag.
I especially like the user prompt idea. I don't know how many times I've had to say "type '/vote yes/no' to vote"...

Who/what would be needed to implement this UI into the game? I'm not very knowledgeable about this sort of thing but I love the game and would fully support an upgrade to it.
Stay greasy my friends
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

Re: UI Mockup

Post by macsforme »

Bacon Grease wrote:Who/what would be needed to implement this UI into the game?
I don't currently have plans to begin a project of this magnitude in the current codebase. Such a significant re-work of the user interface has to touch so much of our (awful) code that it might as well be a part of a larger effort that solves some of our other issues as well. For now, I am throwing around some concepts and demos for a major overhaul or reboot that might happen later.
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

Re: UI Mockup

Post by macsforme »

One more update. The rendered scene in the background is from a rendering prototype I'm working on, and the rest is a mockup. I added a black silhouette to UI features so they stand out better against a light background.

Image
Attachments
mockup.png
Large Version
(264.94 KiB) Not downloaded yet
mockup_small.png
Small Version
(218.42 KiB) Not downloaded yet
User avatar
kaadmy
Private First Class
Private First Class
Posts: 37
Joined: Wed Oct 28, 2015 5:31 pm

Re: UI Mockup

Post by kaadmy »

Really, really nice @Constitution :)
I'd love to see this become the next BZFlag!
trpted
Private First Class
Private First Class
Posts: 242
Joined: Mon Feb 21, 2005 8:29 pm

Re: UI Mockup

Post by trpted »

kaadmy wrote:Really, really nice @Constitution :)
Nods in agreement.
kaadmy wrote: I'd love to see this become the next BZFlag!
+1 at least the option to.
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

Re: UI Mockup

Post by macsforme »

One more small update, with an updated background rendering from a prototype I've been working on lately.

Image
Attachments
mockup.png
Large Version
(688.92 KiB) Not downloaded yet
mockup_small.png
Small Version
(207.93 KiB) Not downloaded yet
User avatar
fox in the fog
Private First Class
Private First Class
Posts: 237
Joined: Fri Aug 06, 2010 7:21 am

Re: UI Mockup

Post by fox in the fog »

I love this modern slick minimal look. The whole mouse box thing is great, the side and top displayed infos are also nice rendered. The only thing I'm completely against to is the prospective projection of the radar. This will make dodging shots so much harder because the relation between your tank and the shots is no more direct, but has to go through a projection process. I think that would be tricky for the eye to compensate to and properly dodge. However I think all the numbers around the mousebox like altitude ecc, and the coordinates are nice, they add a military feel and I think that shouldn't go away in my opinion. Lastly, what makes me not using the exposed treads (that you rendered in the last post) is it being too big, it covers a great portion of the scene vertically and consequently horizontally.
fox
User avatar
macsforme
General
General
Posts: 2069
Joined: Wed Mar 01, 2006 5:43 am

Re: UI Mockup

Post by macsforme »

Here's another mockup with an idea I've been thinking about for a little while. I remember in the 2.0.2 days I would see the most competitive players with their radar covering over half their screens, even partially covering the mousebox in the center of the screen (so basically, you gave up a lot of 3D view for the sake of a large radar). The chosen solution at that time was to reduce the maximum size of the radar, but I wondered if there was a better way to arrange the user interface so you could do justice to both the 2D view (radar) and the 3D view.

This mockup shows a split-screen approach, where you have the radar occupying one side, but on the other side the 3D view is shifted to the side and the field of view is increased. So basically, you still get a decent 3D view with some margin on both sides of the center (obviously not as much as before), but you can also maximize the radar based on the height of your screen. While this would probably not be a great default view setting for new players, and I'm not even sure whether it would work in the real world, I thought it would be an interesting concept for league/competitive players (especially those with wider screen aspect ratios).

There are also a few other proposed elements, such as a new HUD design, separate chat and notification text, a dark shadow behind all UI elements (for better readability), and new FOV/aim guides on the radar.

Image
Attachments
Mockup (Small).png
(569.75 KiB) Not downloaded yet
Mockup.png
(1.77 MiB) Not downloaded yet
Post Reply