[Menu] Concept UI

[dead.pixel]

Hey All,

So I am learning how to create a user interface for BF2 and I thought I would practice by making what I think PR's UI should look like. Now I am very very new at modding BF2 and have no real idea of the limitations of the UI. But if all goes to plan I hope to have a nice high-resolution UI that hopefully kicks ***!

I may be overly ambitious and fail many times but this is something I have always wanted to get into, game UI design.

I have built out some concepts for multiple screens to get a good foundation if you want to see:

Login Screen
http://img5.imageshack.us/img5/33/deadp ... ilogin.jpg

Main Menu
http://img521.imageshack.us/img521/8011 ... uimain.jpg

Deploy Menu
http://img100.imageshack.us/img100/7962 ... deploy.jpg

Server List
http://img52.imageshack.us/img52/2173/d ... ervers.jpg

Join IP
http://img253.imageshack.us/img253/5806 ... pruiip.jpg

So far it is just a few hours of work. I want to sit on it for a while and see if there are any glaring problems I missed. Please give any feedback or suggestions!

.

[The Iron Dreamer]

Very sleek man... I like it very much... Its just simple and I like simple.

[Amok@ndy]

looks like you took the minimap of Nasirah

[dead.pixel]

Yes I did it is also listed in the server list and as a tag for the thread. Wanted to give it some cred since it looks to be a great map. Though I did do several passes in photoshop making the water and tiling textures better as well as adding in the smoke .

If the UI works out I will move over to producing a nice background vid that will resemble the current BG. Run it through some extensive after effects and hopefully have a pretty cool package that I could eventually release.

[AncientMan]

I have to say, I do like some of the things you're doing there . Even though I made the current menu, I really don't like it, I had no idea what I was doing half the time . Really should do a complete rewrite/redesign on that thing one of these days with all the stuff I know now... Hmm...

Anyway, you're going to have a lot of "fun" implementing something like that, I hope you really know your Flash ActionScript 2, since you would have to rewrite a lot of stuff. It does look all possible though... You should be designing it at 1024x768 though, since that's what you'd be creating it in unfortunately, which is kinda limiting .

On limits, there's no real limitations with the design aspect, since it's all created using AS2, and you have access to all the classes. The limitations come with the functionality, communicating with the world outside of flash.

Here's a real entry level tut I wrote up a while ago that you can start with, there's pretty much no advanced ones, it's up to you and your flash skills to work it out . (google it ftw)
How To Modify The Bf2 Flash Menu - Official BF Editor Forums

[Celestial1]

Join IP

This is the only screen I have a gripe with. Lower the opacity of the black overlay behind the Join IP dialog box; it's simply so dark that it becomes difficult to distinguish the dialog box from the background.

With the rest of your design scheme, I would say bring it to a very low value; 50% or less, so that there's just enough of a change to notice that it's a modal window, but you can still see the map background.

Everything else turned out quite nice, good job.


@AncientMan: Is it only AS2, or will AS3 work, even partially?

[dead.pixel]

@AncientMan: Hey, I meant no offence about the current design. I actually applied for a graphic/web design position about a week ago. If that pans out maybe we can tackle this, or some other redesign, together.

I actually have read over your tutorial. I have some AS2 experience the biggest thing is just learning the structure of everything...pretty messy really. Before I muck around to much I want to figure out the font situation as my design relies heavily on the typography.

I know the default file is 1024x768 but I am actually playing around with it to figure out what I can do to get a nice, clean and clear interface on widescreen monitors. So far it is working alright. I wish I had some data that would give me an idea of the median resolution for PR players. I'm willing to bet 1024 isn't near the top.



@Celestial: Thanks for the feedback on the dark screen. I work on an IPS monitor so contrast is much better on my screen than most gamers. Great for print design, bit annoying with digital.

As for the other screens, I don't want to make them any lighter. I want to make everything stark and contrasted with clear definition and usability. When the background is a video it would be annoying to see the movement behind the dialog boxes so easily. But I appreciate the feedback!

Going to mock up a loading screen. I think the information can be presented better than the current design there as well.

What things about the current UI functionality do you guys dislike. What do you wish was there?

[Arnoldio]

It would be fun to havve a menu like in MOH:AA, or Jane's Longbow, where you have to click on buildings/stuff.

But something this simple is win.

[Celestial1]

As for the other screens, I don't want to make them any lighter. I want to make everything stark and contrasted with clear definition and usability. When the background is a video it would be annoying to see the movement behind the dialog boxes so easily. But I appreciate the feedback!

Oh, no no no, I wasn't saying you should change the other screens at all. They're just fine as they are.
I was saying that, based on the rest of your design, that the black overlay on that Join by IP screen should be rather heavily transparent; that it would fit better with the scheme you had going.



Give me a bit and I'll really try to break down where I think the design needs some tweaks, but I do love the overall effect and style you pulled off here. If you're doing this via photoshop and don't mind, I can tweak them that way to show you (along with of course explaining why the changes were made).

Web designer/developer here myself I suck at designing my own things though. I've got an eye for detail but no inspiration...

[dead.pixel]

Ohhh I see what you were saying I took "With the rest of your design scheme, I would say bring it to a very low value; 50% or less" as lowering all of the windows to 50%....it was late. lol

So you were thinking something more like
http://img177.imageshack.us/img177/5806 ... pruiip.jpg

I would have to agree, it is easier to see that way. In motion it would be even more evident.

Think I may have an idea to get animation into the ui as well. Going to be a while still on that front.


Just a little something I was doing in the meantime (may use it for the loadscreen concept, rolling with the whole Nasiriyah)




It is a sort of matte painting/concept art thing I like to do with game images. Compositing images to create a realistic scene all based on a game screen shot. So far about 5 hours in, right side of the image nearly completed.

Here is the original, full screenshot:


.

[Celestial1]

So you were thinking something more like...

Yeah, exactly.

Gotta say that the "Project Reality" text doesn't really fit, though. Perhaps the red of "reality" is throwing me off, though, it looks weird...
But I think that the font/effect itself doesn't really fit either.

Think I may have an idea to get animation into the ui as well. Going to be a while still on that front.

Could, at least as a placeholder, just move the map of Nasiriyah in one direction at a slow pace and eventually just have it flash and reset... sort of like those cheesy satellite shots they do in BFBC2 or whatever, just so that you get some both low-impact (movement of the map) and high-impact (flash) animation going on in the background.

[dead.pixel]

The project reality is meant to stand out a bit, like a logo. Though...I meant to hide it when I saved the jpg...ooops. lol. Though the glow looks better when the overlay isn't there. And I put the logo over the overlay so it looks a bit more jarring there than on other screens.


I think for the background map I am going to bring it into after effect and animate the smoke and screen effects, export a high-def bink movie and try it as the background. So far, with images, high res has been working. I want to try and get some 1080 footage in there and try it out. But the idea is to be subtle. I don't think that there is really any NEED for there to be video of the game you are about to play playing in the background.

[Celestial1]

The project reality is meant to stand out a bit, like a logo. Though...I meant to hide it when I saved the jpg...ooops. lol. Though the glow looks better when the overlay isn't there. And I put the logo over the overlay so it looks a bit more jarring there than on other screens.

I just don't think it fits with the design or the game.
I might feel differently seeing it properly, but the font just doesn't feel right.

Also, logos don't stand out from the product. The branding's colors, typography, etc drive brand recognition home. Logos exist to invoke that feeling and provide an easily recognizable/memorable symbol to associate with; right now, that typography isn't doing that.
Go look at a website for starbucks or mcdonalds... their logos are often the smallest thing on their webpage, and usually blend in with the look of the site.
...I really wish I knew a more articulate way to describe what I'm getting at.

I think for the background map I am going to bring it into after effect and animate the smoke and screen effects, export a high-def bink movie and try it as the background. So far, with images, high res has been working. I want to try and get some 1080 footage in there and try it out. But the idea is to be subtle. I don't think that there is really any NEED for there to be video of the game you are about to play playing in the background.

Sounds good.

[dead.pixel]

Yeah, I get what you mean, I will try just using the dogtags

[karambaitos]

i like the look of it, only i dont think when you select something its should be 100% white make its so you can see through it a bit

[dead.pixel]

Yeah, I'll knock it down to ~80%. Though it is sitting on top of semi-transparent black so not much will show through.

[DeltaCommando]

Wow! That looks amazing! Very good work!

[AquaticPenguin]

Gotta say I agree with the simple design. It's a personal grievance, complex UIs destroy the immersion in-game, and obfuscated menus annoy me out of game (Really hate the vanilla bf2 menus, and even more so BC2 which just has a ridiculous menu design).

Nice work, I fear the quality may go down if you're restricted to 1024x768, but the clean design is a great start and everything is nice and clear.

[dead.pixel]

Thanks guys!

@AquaticPenguin: ?Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.?

My main concern is the way that BF2 handles fonts. I am restricted to using bitmap files which don't really scale at all. That is why the type on resolutions more than 1024 are blurry. I want to see if embedded fonts in the swf will work.

The 1024x768 restriction doesn't seem to really be a restriction at all. I have loaded up a widescreen high-res menu and it seems to work just fine. Though I haven't done extensive testing.

Here is the concept for the Briefing Room/Loading Screen. The background is my unfinished matte.

http://img824.imageshack.us/img824/4015 ... iefing.jpg


If you guys also don't mind answering a few questions (all of which I am sure would even help Ancient with future updates):

What do you find yourself looking for when you use he PR menu?

What do you feel is missing, if anything.

What do you find cumbersome in the current menu design?

What would YOU change?

What resolution do you run PR at?


.

[ShockUnitBlack]

I like it quite a bit., no complaints, althouI particularly liked your PR logo thing.

What would be nice would be in-game videos popping up across the menu at the locations they were shot at, showing the action there.

EG A background video pop-up pointing to a location on the minimap image, showing, foresay, a gunfight happening there.