Introduction

So, after the last sprint, I decided it was time to work on some UI updates. The client UI, also known as the pre-login UI, is atrocious and needs work. It currently uses the built-in Unity UI components, with no changes. Its grey, and bland, and needs to go. I’ve already started thinking about this sprint in terms of ‘screens’, so lets take a look at our current screen flow.

old_client_ui

UI Breakdown

So, lets discuss what we already have. We have 4 screens for the pre-login UI. Lets break each one down, and describe what it does.

Login UI

The login UI has input fields for the account name, and password. Once the information is input, the user can click on the login button. If the information is incorrect, the UI has a region of text that will display this information. Additionally, if the user does not have an account, there is an option to create a new account.

Create Account Menu

The create account menu is what we see when the user has click on the create new account button on the Login UI. There are input fields for the new account name, password, and email. There is currently a check button to see if the account name is available. There are also text boxes that will display error texts if any of the following are true:

  • Account name is taken
  • E-Mail is taken
  • Passwords do not match

Character Menu

The character menu displays all of the characters that are part of the account. When a character is selected from the menu, the button for that character becomes inactive. There are delete, and confirm buttons next to each character. When a character is selected, the delete and confirm buttons are enabled. There is also a play button that is always enabled. There are also buttons to create a new character, and to log out of the account.

Character Creation Menu

The character creation menu has input fields for the character’s first and last name. It has a toggle for the gender (M/F). It has a button that says check that checks to see if the characters first and last name are unique. The last name field is optional. There are also interface elements that allow us to select the race, and to select the class. These interface elements use left and right buttons to cycle through the options. There are also buttons to create the character, and to go back. There is also room for error text.

Problems

Now lets cover some of the problems associated with each of the screens/pages, and also in general.

General

  • The UI is currently 500×400 pixels. This means it under-utilizes most of its space.
  • There is currently no logo for the game at the login screen.
  • The connection information at the top is too detailed, and not all of that information needs to be displayed to the user.
  • There is no background outside of the grey void.
  • There is currently no background music.
  • There are currently no animations.
  • There are currently no button sound effects.
  • There is no logo for the game in any of the client UI.
  • Error text is being displayed ‘in-line’, which takes up valuable UI space and makes for a very poor UI experience.
  • There is no tab order in the UI.

Login UI

  • There is no divider the separates the Login aspect from the Create aspect.

Account Creation Menu

  • The e-mail input field should be at the top.
  • Input fields should be centered horizontally.
  • There should be no check button. Checks should happen automatically.

Character Menu

  • The character menu currently (for UI reasons) only supports 6 characters.
  • The buttons to delete and confirm deletion are always visible.
  • The play button is always enabled.
  • The create new character, and logout buttons are pushed to the corners.
  • There is no preview of what the character looks like.
  • There is no information on the selected character (level, class, etc).

Character Creation Menu

  • There should be no check button. Checks should happen automatically.
  • Input fields should be centered horizontally.
  • The code behind the race and class selection is horrendous.

 

Changes

Now lets discuss how were going fix the aforementioned problems.

Error Handling

We need a better way of doing error handling. When an error occurs, lets take all the information, put it into a string, and output to a new window that just has a button that says “Ok” or “Close”. We’ll overlay that window over everything else, and (possibly) blur the background.

Background Music / Animation

Lets add a very simple background that makes the UI feel more alive. We’ll do a simple background (not sure which colors yet), that has kind of a fog animation that slowly moves around. For login music, lets take something very soft and slow like a piano or violin or something. Maybe we’ll add in some nature sounds periodically (not sure about this yet).

Connection Info / Logo

Before we go to displaying the actual client UI, lets have another screen that shows the connection/loading procedure. It goes through some steps to load the prefabs, load the map, connect to the server, and then check to see if the server is open. If all of these things are true, then we move on to the rest of the UI. If at any point something goes wrong, we retreat to this interface again, and show what the issue is. If its a connection issue, you’ll see that everything else is good, but it will show blinking “trying to connect”.

Check Buttons

These will be converted to live checking. That means, as the user is typing the account name, or character name, or whatever, the system will periodically (every half second or second), ask the server if the name is available. It will then update the UI with the result.

 

 

 

Conclusion

This scope of work document has helped me come up with some ideas and solutions for this next sprint. At this point I feel like I’m ready to get started. I have a lot of work to do.