User Interface Document
User Interface is incredibly important in a fighting game, it is crucial for players to be able to check their life and the timer, amongst other information, quickly and effectively; keeping it simple and easy to understand.
The UI will be made with pixel art, keeping the cohesion with the original game's art. For a more detailed view on art guidelines, check the Art Bible.
Main Menu
The Main Menu will feature centered buttons for the play oriented actions (play, options and credits) that will bring the user to each new screen on click. A quit button will be placed on the bottom right side of the screen.
Options and Credits Menus
Both the Options and the Credits menus will follow the same structure relaying all of the information in a centered box, with a back button on the bottom right side of the screen, taking the player to the Main menu.
Play Menu
The Play menu will follow on the structure of the Main menu with only two different buttons to choose between 1vs1 or 2vs2 match. A back button will also be present on the right side of the screen, taking the player to the Main menu.
Character Selection Menu
The Character Selection menu will have two versions depending on wether the user chose 1v1 or 2vs2 in the previous screen. Both will still follow the same basic layout, with the different characters available in the center and the players avatar on either side.
Battle UI
The battle interface will follow the aesthetics of most fighting games. The health and super bars on top, both will drain inwards. For 2vs2 combat the top bar will represent the players on the top line and the bottom bar the players on the bottom line, set left or right according to their initial positions. They will be marked with an icon representing their character that will be colored in as the swap cooldown reduces. On top of each players health bar the items acquired will appear with and icon representing them. A timer will be placed on the top center of the screen. The following picture represents the final layout of the screen.
Item Selection
Items will hover in a circle around each player and the selected one will hover on top at a higher size, the player will be able to circle through them before choosing.
