search

Double-Fine-Game-Club / bad-golf-community-edition

A community developed version of Patrick Hackett's Bad Golf Amnesia Fortnight pitch!
Other
52 stars 38 forks source link

Lobby UI Design (split from #16) #100

Open Cheeseness opened 10 years ago

Cheeseness commented 10 years ago

Split from #16, we need a design for a lobby which allows for options for player model and cart selection (with possible expansion for other customisations such as voice?). The lobby should also provide text chat functionality and show other players' model/cart selections.

We'll also want a lobby creation screen where the host can set game parameters (in the future, this will be game name, course, game modes if we have them, etc.), as well as a lobby join screen where a player can select from available lobbies (or enter details for a lobby to directly connect to?)

Taekon commented 10 years ago

Two ideas I have: my initial idea and one with Cheese' suggestions.

concept_lobby multi_1

I think the basic sections we need for a multiplayer lobby should be:

I have but a vague idea about the size of the player model and the cart model, hoping to do a more detailed/illustrative sketch for the second design.

Also, I think we need a room/match name section (this would require a pre-lobby in which you choose the room you want to play in), but atm that could be put in front or above the host's name.

Cheeseness commented 10 years ago

Ah ha ha ha, I love the wide arms :D

ErikBehar commented 10 years ago

I suggest to add:

Cheeseness commented 10 years ago

Should input device be an options menu thing? (perhaps not since we'd like to use as much of the same lobby for network and local play as possible)

Taekon commented 10 years ago

Here's a more detailed sketch of design 2 (excuse the rushed handwriting):

concept_lobby multi_2

I was thinking the background of the lobby could be the actual lobby/entrance hall of the clubhouse (in which case the other 3 players would be leaning against the bar :D) or outside on the field with a screaming audience behind.

Right-clicking on a different player should bring up a menu to mute or kick them out of the game.

The relative scale and position of the player model and the cart is to be experimented with as I'm unsure how everything is going to look on an actual screen.

Erik: I added the colour selection. For the control options, I think pressing escape to bring up the pause menu should be able to cater to that.

Taekon commented 10 years ago

Here's the local multiplayer lobby concept (based on the first sketch in the first photo):

concept_lobby multi_3

Couple of things I'm unsure about this design:

  1. The customization (head, colour, cart) selection arrows for each player. I have no idea where to put these and in what shapes. Should the be there at all? Is there a different way to tell the player that they could customize their stuff?
  2. The button space down the bottom. Feels a bit empty as I don't know all of the buttons that should be included. Although with the background in and the carts moved down a bit, it shouldn't be too bad. Other options like graphics and key binding should be accessible through the pause menu I think.

Suggestions and feedback would be much appreciated!

ErikBehar commented 10 years ago

@lightsoda can u make these pretty ? = ]

ghost commented 10 years ago

@ErikBehar I can try :)

Cheeseness commented 10 years ago

Aww, they're already pretty :D

Can't wait to see what you come up with, @lightsoda!

ghost commented 10 years ago

@Taekon has some solid ideas here at least, I don't have much to say about the overall design at this point, I might try my hand at creating a mockup with a clubhouse/bar/crowd etc, and maybe adding some details.

ErikBehar commented 10 years ago

by pretty I meant like actual usable in game ui art, not just mockups = ]

Taekon commented 10 years ago

@lightsoda I planned on designing the clubhouse interior anyway, so would you mind doing the UI art? That's the bit I have no idea how to do :\

ghost commented 10 years ago

@Taekon sure!

EmberEgg commented 10 years ago

Hmm... how about animations when the characters make silly faces when you mouse over them? I mean, this IS Double Fine.

Cheeseness commented 10 years ago

@EmberEgg That's probably something for discussion over in #7, and might be something to come back to after other animation related aspects are bedded down.

ghost commented 10 years ago

lobby_online_mock_01_brown lobby_online_mock_01

ErikBehar commented 10 years ago

@lightsoda nice = ] havz PSD's ?

ghost commented 10 years ago

@ErikBehar sure, I'll push up all my PSD's to the asset repo in a bit.

fierydrake commented 10 years ago

@Taekon, @lightsoda: that is awesome

ChrAfonso commented 10 years ago

This looks positively amazing! :D

Cheeseness commented 10 years ago

I really do like this ^_^

The warmer one feels like a nicer fit to me, but both variations feel strong.

klamp commented 10 years ago

Hey guys. Sorry I'm so late to the party. Wanted to throw in some ideas I had for the character select screen: lobby_wip02

I was thinking you'd select your character on one screen, then have the course selection/chat on the following screen. Thoughts?

Still adding ideas to this. I realize this stuff probably wouldn't make it in by the end of AF - even if you guys liked it and wanted to move forward with it - but thought I'd throw some ideas out there.

klamp commented 10 years ago

Finished up the other stuff I wanted to add: bg2_charselect_mockup

Also, to reiterate what we were talking about in chat, this idea would be for local multiplayer, where you only have 4 players in a match. I've got other ideas for network games (32 players). I'll try and mock something up for that, too.

ghost commented 10 years ago

@klamp digging the skin, some more elaborate texture work is certainly worth looking at long term. I'd love to see what you can come up with for 32 player!

mcflydesign commented 10 years ago

Hey guys just adding some UI concepts here as per Taekon's request on the forums - didn't realise there was a bunch of great requirements info here.

Initial concept here - but looking at refining currently. lobby_online_mock_02

Cheeseness commented 10 years ago

Nice work, GunnyMcfly :)

mcflydesign commented 10 years ago

Refined the concept a bit today :) Tried to open up the character customisation area and better integrate the preview with the choices. Decided the transparency wasn't working (looked too much like unity's default gui stuff) and blocking the view of the background wasn't such an issue after "deblocking" the foreground UI. Did some overall refining of the styles too. lobby_online_mock_02

thegsm commented 10 years ago

Look real nice. Some players will use controllers so need to see the layout works for that too (for example going between different UI elements and changing settings)

mcflydesign commented 10 years ago

Ah thats a good point man, from that perspective i can see chat being tricky too - will have to have a think - Cheers

drewaburden commented 10 years ago

I'm really liking the most recent concept.

ghost commented 10 years ago

@GunnyMcfly Very nice, is that Garamond? I think we're trying to move away from that, legal stuff etc. Not sure which fonts we want to/can use.

mcflydesign commented 10 years ago

Nah mate it's cooper black - thought i saw one it being used in one of the screen grabs floating around on the forums (or at least something that looked like it) - so yeh not wedded to the font at all, in fact would be happy to try something else. I just wanted to try and not totally depart from work people had already been doing as much as possible :)

thegsm commented 10 years ago

added a separate issue for fonts (#170) so someone can take a look at those and offer possibilities.

mcflydesign commented 10 years ago

sweet man - looks like cooper black is free but if you guys aren't set on it I'd be keen to replace it to be honest - i really only used it as i thought it was already being used :) I'll have a look for a better free option

thegsm commented 10 years ago

@GunnyMcfly if it's free and you like it, we can use it. We never said there will be only one font, we can give options to switch if people here like more than one option.

mcflydesign commented 10 years ago

Tried out something different - free font called Matiz - http://www.fontsquirrel.com/fonts/Matiz Nice and blocky but with a bit of grunge to it - mirror the mayhem of bad golf? :) Anyway open to suggestions: lobby_online_mock_03

Cheeseness commented 10 years ago

Nice work! :D

Overall, it looks good. It's a small thing, but I really dig the icon you're using for what I assume is a "par" indicator.

fierydrake commented 10 years ago

Good stuff @GunnyMcfly, looks great. One comment, I had to double-take the faded out cart icon it jars in my mind against the menu that seems to be showing you are selecting your cart. I guess this is to show you can't activate it again, but it makes the shirt pop out to me. Small thing, looks great nevertheless.

ghost commented 10 years ago

@GunnyMcfly Ah yes, Cooper, I used it in some early menu mocks.

mcflydesign commented 10 years ago

@fierydrake yeh its tricky showing interaction in flats - the screen is showing a state as if you've already clicked on the cart icon and that menu has popped out - I'm thinking we'd need to show more of an obvious selected state in the menus to help people using controllers know where they are on the screen?

mcflydesign commented 10 years ago

Has there already been discussion around controller support and how integrated with the menus it would be?

Cheeseness commented 10 years ago

Yup, we've got controller support in at the moment. You can see an initial menu implementation in the most recent build in offline mode.

mcflydesign commented 10 years ago

Here's the new typeface insitu - about controller support I actually meant can you use the thumbstick and buttons to navigate around the lobby menus? I still need to add in a selector for keyboard/controller selection for in game. Might also try a few interaction test animations on some of the UI components in the next few days :) lobby_online_mock_04

mcflydesign commented 10 years ago

so i have no idea about git... how do i add assets to the repository?

Cheeseness commented 10 years ago

You'll need to fork the asset sources repository, clone that down, push your changes up to your fork and then make a pull request. If that sounds like gibberish, we can do it for you if you post a download link here in the issue, or we've got some notes on using Git/GitHub in the wiki (and you can usually find someone to help talk you through stuff in IRC).

mcflydesign commented 10 years ago

no not gibberish :) had kind of figured it out but starting the process by "forking" didn't sound right - was like i was making a new separate version - anyway i'll do some more reading and if really get stuck i'll stick a download link here :) cheers mate

Cheeseness commented 10 years ago

No problems :)

mcflydesign commented 10 years ago

so i was looking through the repo and looks likes its only for raw game assets - @lightsoda current psd link here if you want it :) https://copy.com/Hqx622z3NHMyYOkS

mcflydesign commented 10 years ago

Took a bunch of screen shots from the latest build and will hopefully get a chance to do some skin layouts based on the current functionality over the next couple days

Cheeseness commented 10 years ago

I was thinking that the server browser should probably be presented as a table. At the moment, it looks like we're exposing server name, server IP, server state (started or not), and player count.

There should also be some kind of indicator for whether or not a server list refresh is in progress.

The multiplayer lobby screen now also has a player list which should be taken into consideration.