Skip to content

Sprint1: Design Eviction Menu

LIU-Evelyn edited this page Sep 12, 2022 · 47 revisions

Sprint1: Design Process of the Eviction Menu

Purpose of the eviction menu:

Players in a game where Atlantis is going to drown are tasked with tracking out the traitor who would bring about the continent's sinking via quests and, after verifying the facts, expelling them from the land to save Atlantis. Due to the requirement for an eviction menu, which may also help deepen user participation with the game, players must select whom they believe to be the traitor. After gathering clues, the player may select the character he wishes to expel by clicking the player eviction option in this menu interface. If the choice is correct, the game is over, and the player wins; if not, play continues. This page will document the iterated design process for this menu.

Structure of this menu

  1. The main menu frame ( this part will be used for displaying several character cards)
  2. The single card for displaying the information of each NPC. (this part will contain each character's information and allow players to select)
  3. The button icon for entering this eviction menu.
  4. The confirming box (When players select one specific NPC whom they regard as the traitor, the confirming box will pop up to ensure players' selection)
  5. The information window (When players click on one specific NPC card, this window will pop up to allow players to browse the basic information and clues of the corresponding NPC/character.)

The Design Process for Each Subpart

After summarizing the allocated questionnaires, the basic design idea has been generated, and the next step is to implement and concrete our defined design idea. Most of the responders are satisfied with the menu's multiple-column style and the way each character card is shown in a narrow bar (e.g. the interface of Among us). The eviction menu will thus be created first in a straightforward, multi-row, multi-column layout, with a single character card favoured as a thin strip; the concise interface may be more user-friendly.

Summary of the pre-design user testing questionnaire(Sprint 1) link: https://github.com/UQdeco2800/2022-ext-studio-1/wiki/player-eviction-menu:-User-survey-(Team-7)

Main Menu Appearance Design Process

Fist Stage

Wireframe Draft (version1) Draft (version2)
wireframe Main_Draft1 Main_Draft2
Based on the survey results, a basic menu layout wireframe was created to help with the following design refinements. Our original idea was to add multiple eviction cards to the main menu for players to choose from, with a small set of information about NPCs. Based on this line framework, our team tried to design the appearance and the colour scheme for the first version of this menu. The original idea was that the borders could be slightly irregular to cater to the puzzle game's art style and create a retro style. And adopt the predominant colours of blue and grey to suit the Atlantis theme. However, after finishing the first version, we found that the completely irregular shape of the main menu looks a little weird after adding other elements (maybe the pictures are too cluttered). Therefore, the group also tried the regular style, but it seemed less aesthetic, and the effect was not as expected.

Defined Design Style

Concluding the above two versions, the best way is to combine regular and irregular borders simultaneously appear in the menu interface. Using the irregular patterns of waves and seaweeds in irregular patterns at the bottom to echo the theme of the Atlantean seabed. Besides, the 16: 9 canvas aspect ratio is preferred through the discussions with the other groups. Hence the menu is modified into a corresponding ratio to suit the game. The draft of this design idea is displayed below.

Defind_style1

Improvements of Font Characters

The textual title on the eviction menu has been emphatically modified and improved for a better aesthetic experience. The design process can be shown in the pictures below.

Font Design1 Font Design2 Font Design3
Font1 Font2 Font3
The first version of characters consists of single lines, the font design for this release is inspired by common document fonts. Improved into fill colours inside the border lines with highlights and shadows to make the characters three-dimensional. Redesigned the text of the title to make it more interesting and attractive.Changed font color to better match background color, font shape became fuller

Improvements of the Defined Design Style

Initial Defined Style Refine Several Elements Add Transparent Background
Defind_style1 Defind_style1 Defind_style1
The initial defined design style, In order to quickly determine the art style, we simply use the original idea. Adjust the colour scheme and refine some details. Especially, improve the font design to make it looks interesting. With the design advice from the team, the additional transparent background was added under the previous menu image to better blend in with other maps and game scenes.

The Final Menu Image(with the unified pixel resolution for the whole game)

Later, the team decided on the new pixel resolution, so we re-normalized the main menu interface using the uniform pixel resolution to make this main menu image more compatible with the entire game.

evictionMenu_background

Single Card

The single card for displaying the information of each NPC. The first idea for the single card is to employ sea elements onto the card border to decorate the card and fit the game theme. Hence, our two teammates designed two drafts with sea waves, as shown in the two pictures below.

Style1 Style2
SingleCard1 SingleCard2

However, these two design ideas are a bit redundant since the sea wave element is reused when combined with the design of the main menu interface. Therefore, these two single card styles were not expected and adopted. With the need to exclude the wave elements and to use other sea-related elements appropriately, the single card style's appearance was redesigned. The design idea with jellyfish and bubbles is considered of good aesthetic value and fits the game theme. Hence this design was adopted as the ultimate design. The final design with the jellyfish pattern for the single card can be seen below.

SingleCard3

The select button (To select the traitor.)

Initial Button Version 1 Version 2
Select_button select_button1 selectButton_single
In the first stage, the button is created with an unsuitable pixel grid resolution for the whole menu design style.(too large) After unifying the pixel resolution of the button with the entire menu interface, We redesigned and optimized the details. After we put the button into the game and found that the colors didn't match, so we changed the final color of the button and improve it again.

Entire Menu Interface (with multiple cards appear)

In the initial phase, multiple single cards appear above the image of the main menu interface, forming the overall appearance of the eviction menu, which is shown in the picture below.

EntireMenu

The final entire menu image including select button and eviction cards comes with the uniform pixel resolution.

evictionMenu_all

Menu Icon

It is necessary to design the icon for this menu to allow players to click and enter the menu interface.

In the beginning, several patterns were created as drafts. The design idea is to use figure patterns to let players realize this button relates to multiple characters. Hence, one of these ideas is to employ the textual word "character" in the figure pixel profile pattern with the textual word "character" to let the player understand this button is about to character. The other idea is to put multiple portraits of characters above the scroll paper or an opened book as background.

The drafts of the eviction menu icon are shown in the below image:

Menu_icon1 Menu_icon2 Menu_icon3
Menu_icon1 Menu_icon2 Menu_icon3

Then we decided to adopt the "open book" style, and regular the width of this icon to be 50-pixel grids based on the overall game's pixel resolution (the picture shown below), but it does not seem pretty well because it is slightly vague.

MenuIcon1

Hence, we decided to expand the pixel resolution of the "opened book" part to the width of the book to become 68-pixel grids. And the characters above this book become more detailed with higher pixel resolution. The modified icon image is shown below

MenuIcon2

Eventually, in order to better fit the size of the game background, the icon of the expulsion menu has been refined again. Additionally, the text “eviction menu” is added for that users could better and faster understand the functionality of this icon. Since the background color of the logo is unclear, the text part is set into two colors. The black text version will fit on a light background color, while the white text will suit a darker colored background. The two versions of this menu icon could be seen below

MenuIconBlack MenuIconWhite
MenuIconBlack MenuIconWhite

Confirmation box

In the initial questionnaire survey stage, most of the respondents believed that after selecting the NPC they want to expel, there should be a confirmation box to remind them whether to confirm the choice to prevent accidental clicks.

Therefore we added the task of designing a confirmation box in this sprint, which uses the color of the background title to achieve the effect of echoing each other. In terms of text, the team opted for a more abstract style to remind users to choose carefully.

confirmBox

Display the effect of the confirmation box popping up after selecting NPC to expel

menu_confirm

Table of Contents

Home

Game Design

User survey

Sprint 4

Eviction Menu and Win/lose Logic: Polishing tasks (Team 7)

Button Sounds and Ending Menu improve (Team 3)

Sound effect and Fixing the clue bug (Team 6)

Improvement of Enemy and Attack (Team 1)

Add Features When The Player Get Attacked and Overall UI Improvement (Team 8)

Sprint 1

Achievement System (Team 2)

Player Eviction Menu (Team 7)

Countdown Clock (Team 4)

Music (Team3)

Map (Team6)

Sprint 2

Player Eviction Menu (Team 7)

Character Design & Animation (Team 1)

Music (Team 3)

Inventory System and Consumables Items (Team 8)

Scenario design

Achievement System(team 2)

Storyline (Team 5)

Countdown Clock (Team 4)

Sprint 3

Ending Menu (Team 3)

NPC interaction (Team 2)

Win/lose Condition (Based on Eviction Menu) (Team 7)

Player Profile (Team 4)

Game Logo (Team 8)

Clue storage (Team 6)

Enemy Design and Attack (Team 1)

Scenario design for village(Team5)

Game design
Entities and Components

Service Locator

Loading Resources

Logging

Unit Testing

Debug Terminal

Input Handling

UI

Animations

Audio

AI

Physics

Game Screens and Areas

Terrain

Concurrency & Threading

Settings

Troubleshooting

MacOS Setup Guide

Clone this wiki locally