Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lobby UI Design (split from #16) #100

Open
Cheeseness opened this issue Feb 23, 2014 · 62 comments

Comments

Projects
None yet
10 participants
@Cheeseness
Copy link
Contributor

commented Feb 23, 2014

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

This comment has been minimized.

Copy link

commented Feb 23, 2014

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:

  • Head and cart selection for 4 players.
  • Their names
  • A chat room.
  • A ready button.
  • A quit/back-to-menu button.
  • A map selection.

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 23, 2014

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

@ErikBehar

This comment has been minimized.

Copy link
Contributor

commented Feb 23, 2014

I suggest to add:

  • ability to select the main color of your player
  • select keyboard or joystick
@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Feb 23, 2014

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

This comment has been minimized.

Copy link

commented Feb 23, 2014

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

This comment has been minimized.

Copy link

commented Feb 23, 2014

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

This comment has been minimized.

Copy link
Contributor

commented Feb 24, 2014

@lightsoda can u make these pretty ? = ]

@ghost

This comment has been minimized.

Copy link

commented Feb 24, 2014

@ErikBehar I can try :)

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Feb 24, 2014

Aww, they're already pretty :D

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

@ghost

This comment has been minimized.

Copy link

commented Feb 24, 2014

@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

This comment has been minimized.

Copy link
Contributor

commented Feb 24, 2014

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

@Cheeseness Cheeseness added the asset label Feb 24, 2014

@Taekon

This comment has been minimized.

Copy link

commented Feb 24, 2014

@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

This comment has been minimized.

Copy link

commented Feb 24, 2014

@Taekon sure!

@EmberEgg

This comment has been minimized.

Copy link

commented Feb 24, 2014

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

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Feb 25, 2014

@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

This comment has been minimized.

Copy link

commented Feb 26, 2014

lobby_online_mock_01_brown
lobby_online_mock_01

@ErikBehar

This comment has been minimized.

Copy link
Contributor

commented Feb 26, 2014

@lightsoda nice = ] havz PSD's ?

@ghost

This comment has been minimized.

Copy link

commented Feb 26, 2014

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

@fierydrake

This comment has been minimized.

Copy link

commented Feb 26, 2014

@Taekon, @lightsoda: that is awesome

@ChrAfonso

This comment has been minimized.

Copy link
Contributor

commented Feb 26, 2014

This looks positively amazing! :D

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Feb 26, 2014

I really do like this ^_^

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

@Cheeseness Cheeseness added this to the Bare, Bare Bones milestone Feb 27, 2014

@klamp

This comment has been minimized.

Copy link

commented Feb 27, 2014

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

This comment has been minimized.

Copy link

commented Feb 27, 2014

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

This comment has been minimized.

Copy link

commented Feb 27, 2014

@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

This comment has been minimized.

Copy link

commented Feb 27, 2014

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

This comment has been minimized.

Copy link
Contributor Author

commented Feb 27, 2014

Nice work, GunnyMcfly :)

@mcflydesign

This comment has been minimized.

Copy link

commented Feb 28, 2014

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

This comment has been minimized.

Copy link
Contributor

commented Feb 28, 2014

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

This comment has been minimized.

Copy link

commented Feb 28, 2014

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

@mcflydesign mcflydesign referenced this issue Feb 28, 2014

Open

Fonts #170

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Feb 28, 2014

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

This comment has been minimized.

Copy link

commented Feb 28, 2014

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

This comment has been minimized.

Copy link

commented Mar 1, 2014

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

@ghost ghost referenced this issue Mar 1, 2014

Open

Title/Menu/Etc UI Design #16

@mcflydesign

This comment has been minimized.

Copy link

commented Mar 1, 2014

@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

This comment has been minimized.

Copy link

commented Mar 1, 2014

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

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Mar 1, 2014

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

This comment has been minimized.

Copy link

commented Mar 1, 2014

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

This comment has been minimized.

Copy link

commented Mar 2, 2014

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

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Mar 2, 2014

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

This comment has been minimized.

Copy link

commented Mar 2, 2014

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

This comment has been minimized.

Copy link
Contributor Author

commented Mar 2, 2014

No problems :)

@mcflydesign

This comment has been minimized.

Copy link

commented Mar 2, 2014

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

This comment has been minimized.

Copy link

commented Mar 3, 2014

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 added a commit to Double-Fine-Game-Club/bad-golf-community-edition-assets that referenced this issue Mar 3, 2014

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Mar 3, 2014

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.

@mcflydesign

This comment has been minimized.

Copy link

commented Mar 3, 2014

Hey @Cheeseness are you saying that exposing the extra info isn't right or just making sure we account for it? Yep need some kind of progress indicator for sure :)

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Mar 3, 2014

Oh, I was just noting what we already had access to to make sure that we don't miss anything :)

@mcflydesign

This comment has been minimized.

Copy link

commented Mar 3, 2014

Going forward i guess we'd expose the map name too?

@mcflydesign

This comment has been minimized.

Copy link

commented Mar 3, 2014

Quick layout for join/host a server screen - was thinking you could set your name in the lobby prior to this screen?

badgolfce_lobby_01

I haven't seen what it looks like if you are in the MP lobby after joining someone else's server, but I'm thinking that the other lobby design I did would probably work pretty well for after you choose "host a server" - with a few tweaks?

lobby_online_mock_05

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Mar 3, 2014

Nice work! :D

Going forward i guess we'd expose the map name too?

Yeah, definitely. When we enable spectators, maybe a spectator count too?

Could server status be better represented as an icon, do you think?

@mcflydesign

This comment has been minimized.

Copy link

commented Mar 3, 2014

Cool gonna need to go wider for the server list I think. Yeh icons could be cool - any suggestions? Will have another look tomorrow, gotta be up at 6 for work :)

@mcflydesign

This comment has been minimized.

Copy link

commented Mar 4, 2014

Did a quick local multi mockup over lunch :)
Little different as I was trying out having the progression work like a lot of console games - the game starts/menu progresses once the last active player presses "Ready".

lobby_offline_mock_01

@ghost

This comment has been minimized.

Copy link

commented Mar 5, 2014

Cool, I might start implementing some of this stuff. Just need the go-ahead from @Cheeseness :)

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Mar 6, 2014

@lightsoda Oh, whoops. I'm guessing you weren't around when I said that the pull request I was suggesting you hold off for was merged. Sorry! Go nuts :D

@klamp

This comment has been minimized.

Copy link

commented Mar 12, 2014

fmad3ho

Was finally able to log in again! Anyway, I posted on the forum but I'll update here, too. I've been playing around with more ideas for local multiplayer. I was also told that players have the ability to choose voices for their characters, so I'll need to include that too.

I'm gonna take a pass at the next screen (course select) in this style and see how it goes. I also might do a mockup of some sprite animations for the UI.

@Cheeseness

This comment has been minimized.

Copy link
Contributor Author

commented Mar 12, 2014

Nice work, @klamp! Having several UI concepts like this will hopefully let us better understand what sort of requirements we're likely to want to have with regards to UI theming longer term.

Your ball tee icon/scroller for selecting colour looks great.

@mcflydesign

This comment has been minimized.

Copy link

commented Mar 12, 2014

Nice one mate - still keen to help out even if its more UX wireframing stuff too :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.