Brainstorming UI

#General Styles

##General Art Style Options

• 8 bit style
• Pixel art
• Digital or Hand drawn
• CGI artworks
• Isometric view (allows more styling in battle)

##General UI Styling (to be confirmed once we have a theme)

• Button styling
• Layout styling
• Border design
• Menu styling
• Loading screen
• Settings page?
• Tips and FAQs page?
• Player portraits?

UI Screens (existing and potential)

• Login screen.

  • Remember me/auto login

• Deck setup page: Card listing page to allow deck building

  • Deck is listed in a portrait grid layout (can also be listed in a list format)
  • Allow multiple deck creation, maybe with a maximum number depending on the requirements
  • Display all cards and allow users to read / look at the card design.

• Deck testing page (allow users to test their deck before a game)

  • Runs a simple deck randomizer on the screen to show the whole pyramid structure of your selected deck. So that you can visualize how it’s gonna look like. Would be really helpful if some cards can only appear in certain rows and/or benefit from being in certain rows.

• Game selection menu (game mode selection)

  • AI mode (single player mode)
  • Online multiplayer mode (VS mode)
  • Could be extended to include different match modes, e.g. different numbers of cards in the pyramid, different rules, etc.

• Joining a game loading screen (searching for players)

  • Simple loading screen with the loading logo and/or some art
  • A count down to a timeout, so if a player can't be found within x seconds the user is sent back to the game selection menu

Match UI

##Card Style Options

• 3D popup fights where characters pop up from the cards (e.g. Might & Magic )
• 2D like hearthstone style with animation for fights

In Game

• Game screen background
• Game screen border
• Button styling
• Font
• General card layout/style
• Pyramid style card at the mid bottom for easy (in hand card) look and feel - can someone clarify this please?
• When placing cards, show an animation and highlight the selected card.
• Attack animation / feedback (animations in general)

UI Controls / User Input

Mouse

• Double clicking
• Dragging
• Flicking
• Mouse over
• Right click

Keyboard

• For account creation, logging in
• Deck naming
• Chat system