[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 ass!

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/de...lpruilogin.jpg

Main Menu
http://img521.imageshack.us/img521/8...elpruimain.jpg

Deploy Menu
http://img100.imageshack.us/img100/7...pruideploy.jpg

Server List
http://img52.imageshack.us/img52/217...ruiservers.jpg

Join IP
http://img253.imageshack.us/img253/5...ixelpruiip.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.

[[R-DEV]Amok@ndy]

looks like you took the minimap of Nasirah :P

[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.

[[R-DEV]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]

Originally Posted by dead.pixel

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]

Originally Posted by dead.pixel

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/5...ixelpruiip.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:


.