[WIP] Battlefield 3 UI

[Dozo]

Hey Modacity, as you've probably guessed, I'm working on a UI for Halo: Custom Edition based off Battlefield 3.

Concepts:
27412742
(Click for Larger)

Now to find Purista

Looking for critiques, suggestions etc...

[Amit]

BF3 doesn't exactly have the best UI. I can see it working, though, since it's simple enough. Any ideas for the HUD? Or you're just doing the menus?

[Kornman00]

Just as long as there's no fucking rediculous start menu that requires interaction to actually get to the real menu (fuck your UI designers, DICE). Or an over the top splash screen.

Interesting concepts so far. I.E., keep doing what you're doing.

[ThePlague]

Why don't you make it so whenever you want to join a game or check your stats, you have to view a webpage? :smugsome:

[Limited]

You know what I really like that concept design. Keep it going.

[Dozo]

27432745The HUDs for reference.
The thing with the Battlefield HUD is that is very different from Halo's HUD and some features are different or removed entirely. One of these being a grenade icon. If I were to create it, it would lack a few BF features like a the map (lower left) which is an actual map, not just a radar. Would have loved that feature though.

Okay, on to updates. I've worked out the main menu layout but I've run into an aesthetics problem. In the Battlefield 3 main menu you've got a background of various vehicles while mine is bare. Any ideas for the background? I could just shop some Halo vehicles into the background but I'd like to see what you guys think.
Progress so far
2746

E: wtf is up with that attached thumbnail

[jcap]

Don't forget, it's going to look a whole lot crappier once you get it in-game. Unless you miraculously find out a way to use high resolution bitmaps in a UI, your elements are going to be scaled up from a maximum size of 640x480.

Also you'll need to figure out how to reliably script getting rid of the HUD and desaturate+color the background when you pause. I'm sure OS could do this, but then you'd either need to rely on all players to have OS or you would need some tradeoff for people without OS (without crashing the client).

Let us know if you figure this out because I need to do the same this summer.

[Limited]

Don't forget, it's going to look a whole lot crappier once you get it in-game. Unless you miraculously find out a way to use high resolution bitmaps in a UI, your elements are going to be scaled up from a maximum size of 640x480.

Also you'll need to figure out how to reliably script getting rid of the HUD and desaturate+color the background when you pause. I'm sure OS could do this, but then you'd either need to rely on all players to have OS or you would need some tradeoff for people without OS (without crashing the client).

Let us know if you figure this out because I need to do the same this summer.
I havent looked into how the hud and UI system works in Halo so this may be completely pointless. But can you use a blue bitmap that has like 30% opacity?

[Dozo]

I havent looked into how the hud and UI system works in Halo so this may be completely pointless. But can you use a blue bitmap that has like 30% opacity?

You could, but you would have residual other colours left over at 30% What I think BF does is: Switch to Black/White>Raise Light Contrast>Blurred Blue Overlay which may or may not be possible in halo.

[Limited]

You could, but you would have residual other colours left over at 30% What I think BF does is: Switch to Black/White>Raise Light Contrast>Blurred Blue Overlay which may or may not be possible in halo.Well yeah BF3 has access to its own code so it will make it how it wants it to look. The image is definitely monochrome and then a colour layed on top. I was just trying to think how we could do it in Halo, as we have limited access.

If you could make the menu systems + pause screen work thats all I would want really. Any of the like in-game hud stuff I dont really care for too much.

[Sean Aero]

Any of the like in-game hud stuff I dont really care for too much.

I feel the same, digging the menu.

[jcap]

It looks like total ass if you use a transparent background. It just turns the background into multicolored shit. You're better off removing the background entirely or dimming it black.

[Dozo]

Ugh, more problems. The pause menu this time. In BF3, for every level in the campaign, there is a different level image, difficulty and level name on the pause screen in addition to the various options. In Multiplayer however (See below) you are provided with your team, various objectives and a map of the battlefield. My question is, Is there any way the HCE UI can tell what type of map your running may it be SP be or MP? Also, are any of the functions above like team and difficulty possible for a Halo UI?

2754

[Kornman00]

Every map has the UI tags built directly into it, save for stock tag data that is also found in loc.map. If someone changes a tag that appears in there, that modified tag is added to the map instead of using the non-modified tag.

[Timo]

The only way to get your UI onto stock maps is to upload your own version to halomaps or somewhere else with your tags added.

[Dozo]

Noted. Thanks for that.

E: Would have been working on the server browser but Halo's being a bitch :/

Started on game modes instead.

2757

[Dozo]

Updates.
I've had a lapse of progress due to several surprise exams.
Anyway, finished the server browser.
2767
Game creation screen is nearing completion as well.

[Sean Aero]

Looks sweet, do you think it's possible to increase the Mode column so the full text is shown and decrease the players column as it never goes beyond 5 characters?

[jcap]

Oh that's cool.

Let me know if applying filters on the server browser itself actually works. idk if it does. Never gave it a thought. Could be hard coded in which case you're screwed. Also, you can't change the number of servers displayed per page.

[Amit]

Oh that looks sweet. Do want.

[Dozo]

I've fixed the proportions as per Sean's suggestions. As for Jcap, I can't seem to find an option to merge the filter and browser screens but I swear I've seen it happen in another ui. Might have been kirby's yelo
27732774
To the left is the screen for stuff like quitting the game and checking if you want to save settings.
The right is pretty self explanatory. It's the color selection screen. I'd like to use an MC biped image
for each of the colours in the white box on the right but I really do not want to use the stock MC.
Updated the background as well (finally found a clear version)

[Amit]

Who needs Delta UI if this completes :D

[Timo]

While these concepts are pretty sweet Dozo, don't forget everything needs to fit inside a 640x480 window. The background will scale up from that as well, so it won't look that nice for people running at 1920x1080. I got Veegie to render an MC for us for the DH UI, I don't think he/jcap would have any objections for you to use it, jcap should still have it.

[jcap]

Yeah everything Timo said. You should really make a proof of concept to see how things are going to turn out in-game. You may be disappointed and be forced to change some things.

Also, as Timo said, if you want a new Chief render then you can have the one from our UI.

[Dozo]

Thanks for the feedback. I noticed the degraded image quality when I ingamed part of the main menu this morning. My question is, wouldn't creating the assets at a higher DPI theoretically fix the issue of degraded image quality? Also thanks for the Chief render, I'll have it and of course credit.

[jcap]

DPI is irrelevant if a maximum of 640x480 pixels can be displayed.

[Dozo]

Got it. (testing next solution)

[Dozo]

As an alternative for having just a flat image background, would be following the actual Battlefield 3 method be viable? What I mean is have a textured surface (the road) stretching out into the distance where it meets another vertical textured surface in this case the city in the background. IDK if I'm explaining this the right way so pics.
2840

[Higuy]

That seems like a pretty viable option, yes.

[Donut]

if youre asking if you can have 3d geometry and a camera in your ui background, then yes, you absolutely can.

[Amit]

That's a lot of work, though, isn't it?

[Higuy]

That's a lot of work, though, isn't it?

Compared to most other UI skyboxes, no, that is relatively simple and still can look pretty good if pulled off correctly.

[Amit]

Oh right, it would look best as a skybox.

[jcap]

You can also give it the smoke effect with the background as a model.

[Sean Aero]

Any news on this?

[Dozo]

Not really, most of the functions, assets and the like are in progress. That and a lot of troubleshooting.

[Sean Aero]

Not really, most of the functions, assets and the like are in progress. That and a lot of troubleshooting.
Well I hope you'll be able to finish it, it's a very promising fresh new look.

[Timo]

Not really, most of the functions, assets and the like are in progress. That and a lot of troubleshooting.

Good luck man. Exceptions are damn annoying when tooling around with widgets.

[homebrued]

Update?

[Dozo]

Not really, most of the functions, assets and the like are in progress. That and a lot of troubleshooting.
I'm getting there. While the majority of the work is getting stuff to cooperate in the UI, recently I replaced all of the default mp menu map images with new ones.

Sample Images:
3008

[Amit]

Nice. What's with the darkish filter on the images, though? It looks nice for Timberland and Sidewinder, but it makes the shadowed areas in the Blood Gulch image seem too dark. Why not use a vibrant version of that one?

[itszutak]

Nice. What's with the darkish filter on the images, though? It looks nice for Timberland and Sidewinder, but it makes the shadowed areas in the Blood Gulch image seem too dark. Why not use a vibrant version of that one?I think the idea is to replicate BF3's color pallet, which is fairly desaturated.

[Amit]

I think the idea is to replicate BF3's color pallet, which is fairly desaturated.

Battlefield 3 doesn't look like that. That's what Unreal Tournament 3 looks like. Battlefield 3 just has that gay blue filter over everything.

[Dozo]

The map images in the BF3 Multiplayer menu don't use the blue filter while the loading images do.
As BF3 pc doesn't use an ingame mp menu, I looked to consoles for some inspiration.

Anyway:
I agree the saturation filter for Blood Gulch was over the top. It was one of the maps I tested
the saturation filter on and I was never totally happy with it. I've gone back and redone it, thoughts?
3009

[Amit]

That's interesting. Well, it does look better now.

[ncascouts]

I cant wait till this comes Out!

Im just really waiting this looks cool!

Approved :)


Any Updates? Us players cant keep waiting lol.

[homebrued]

Glad to hear its moving forward. Nice images btw.

[Cortexian]

ncascouts, I just merged all three of your posts. Please don't make a new post if you have the last post in a thread. Instead, use the http://www.modacity.net/forums/styles/modacity/buttons/edit.gif button to add to your last post.

[ncascouts]

Ok so when is this coming how far did you make it to finish the UI.map?

[=sw=warlord]

-when it's done-

[Dozo]

Well, this hasn't been updated since 2012.

Pretty much all progress on this stopped soon after the revelation that the various UI elements would be scaled to 640x480 and then back up to 1080p. It looked horrible. Absolutely, train-wreckingly horrible. After putting all the small intricate details into the existing elements I just didn't see the point of continuing if it was all going to be a blurry pixelated mass anyway. Now, I am interested in picking this up again since I have all the source files (the only thing unfinished is the options menu) and a few tests in the game itself but only if there is a way to resolve the issue of Halo scaling down the image.

I've actually thought of a possible way to do it. Now, as is established, a UI can only display flat images at 640x480 but what is the limit of the size of images inside the game engine itself? In the same way a wall is textured, images could be textured on a flat surface and UI buttons that are invisible (somehow) are placed over the top of them so when you click on a part of the image, an action would be performed. I think this might be better illustrated by an image:
3285
Is there anything wrong with this theory? I haven't tested it out myself since I'm away from where I've got Halo installed but I'm interested in getting this UI finished if this actually works. Any feedback would be great thanks.

[Higuy]

Pretty sure the max resolution is 4096x4096. Thats kinda unnecssary though, as you could just break up the elements into smaller textures while still retaining 1080p if your going to use geometry.

There dosen't seem anything wrong with the theory but I have no idea how you will animate the textures when they are clicked on/hovered etc

p.s i think you might be wrong about the ui elements, ive seen some UI's that definitely look nice at 1080p??

[Dozo]

​Yeah I wasn't planning on having the UI as one big image but rather cutting it up into the buttons, foreground objects and background objects.
please direct me to these UI's. I haven't seen one yet that isn't downscaled.

[Timo]

Yeah I never found a way to do this while working on the delta halo UI. You could use ingame textures models but you'd likely run into issues with people using different FOVs?

[Dozo]

I thought of this problem too and tbh, it's just something I think I'm going to have to live with. I'll be sure to give people ample warning to set their FOV to 90 or something.

[Higuy]

Or you could just use the actual ui elements traditionally, suffer the loss of having your work a bit downsized but still having a nice working UI that everyone can use...

[Dozo]

This is one part me trying to retain the highest visual quality possible but also trying to do things that haven't been done before. As far as I know, nobody has ever made a UI like this.

[Timo]

How are you planning on getting the map to update upon clicks? You'll need a pretty beefy set of scripts to keep up with the number of menus, and ways to navigate. Another thing I couldn't quite get working was a script to function when the escape button was pressed instead of clicking the go back button.

[Dozo]

Setting up navigation should be relatively simple; pressing button x will send you to another set of invisible buttons and images.
One thing I've forgot to mention is that the button-image method I've proposed applies to the main areas of navigation such as the campaign and multiplayer menus while the less navigated areas eg key bindings and audio/video options will simply be an ordinary UI part. I'm content with providing the highest quality imagery for what users see the most (map selection) and keeping the rest simple.