UI Mockup
UI Mockup
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](https://forums.bzflag.org/download/file.php?mode=view&id=16552)
- Attachments
-
- mockup_background.png
- (648.98 KiB) Not downloaded yet
-
- mockup.png
- (105.12 KiB) Not downloaded yet
Re: UI Mockup
What about the radar-thing?
Re: UI Mockup
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).kaadmy wrote:What about the radar-thing?
- Zehra
- Private First Class
- Posts: 921
- Joined: Sun Oct 18, 2015 3:36 pm
- Location: Within the BZFS API and Beyond it
- Contact:
Re: UI Mockup
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 :idea:](./images/smilies/icon_idea.gif)
Would like to see that in a different game sort of like bzflag although.
![Idea :idea:](./images/smilies/icon_idea.gif)
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
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
Re: UI Mockup
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
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
Re: UI Mockup
@trpted I'm pretty sure it's just a simple image, not in-game yet, unfortunately.
Re: UI Mockup
#1 So, you used Photoshop / GIMP (or something like that/those programs/apps) to create that?kaadmy wrote:@trpted I'm pretty sure it's just a simple image, not in-game yet, unfortunately.
#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?
Re: UI Mockup
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.
- Zehra
- Private First Class
- Posts: 921
- Joined: Sun Oct 18, 2015 3:36 pm
- Location: Within the BZFS API and Beyond it
- Contact:
Re: UI Mockup
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.
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
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
Re: UI Mockup
"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.
rofl!!!
btw, I really like the UI mockup.
Re: UI Mockup
can it also show the mouse box?
Looks great otherwise!
Looks great otherwise!
Re: UI Mockup
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.Monster wrote:can it also show the mouse box?
Looks great otherwise!
Re: UI Mockup
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](https://forums.bzflag.org/download/file.php?id=16618)
- Attachments
-
- mockup-small.png
- (118.71 KiB) Not downloaded yet
-
- mockup_background-small.png
- (529.67 KiB) Not downloaded yet
Re: UI Mockup
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](https://forums.bzflag.org/download/file.php?mode=view&id=16698)
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.
- Attachments
-
- mockup_small.png
- (269.19 KiB) Not downloaded yet
-
- Private First Class
- Posts: 154
- Joined: Fri Nov 13, 2009 7:53 pm
Re: UI Mockup
This looks really nice.
-
- Private First Class
- Posts: 14
- Joined: Tue Aug 21, 2012 3:48 am
Re: UI Mockup
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.
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
Re: UI Mockup
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.Bacon Grease wrote:Who/what would be needed to implement this UI into the game?
Re: UI Mockup
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](https://forums.bzflag.org/download/file.php?mode=view&id=16741)
- Attachments
-
- mockup.png
- Large Version
- (264.94 KiB) Not downloaded yet
-
- mockup_small.png
- Small Version
- (218.42 KiB) Not downloaded yet
Re: UI Mockup
Really, really nice @Constitution ![Smile :)](./images/smilies/icon_smile.gif)
I'd love to see this become the next BZFlag!
![Smile :)](./images/smilies/icon_smile.gif)
I'd love to see this become the next BZFlag!
Re: UI Mockup
Nods in agreement.kaadmy wrote:Really, really nice @Constitution![]()
+1 at least the option to.kaadmy wrote: I'd love to see this become the next BZFlag!
Re: UI Mockup
One more small update, with an updated background rendering from a prototype I've been working on lately.
![Image](https://forums.bzflag.org/download/file.php?mode=view&id=17718)
- Attachments
-
- mockup.png
- Large Version
- (688.92 KiB) Not downloaded yet
-
- mockup_small.png
- Small Version
- (207.93 KiB) Not downloaded yet
- fox in the fog
- Private First Class
- Posts: 237
- Joined: Fri Aug 06, 2010 7:21 am
Re: UI Mockup
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
fox
Re: UI Mockup
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](https://forums.bzflag.org/download/file.php?id=18507)
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.
- Attachments
-
- Mockup (Small).png
- (569.75 KiB) Not downloaded yet
-
- Mockup.png
- (1.77 MiB) Not downloaded yet