Menu Assets
This is the document detailing the assets added to the game by Team 1, covering the visually style of Runtime's menus and UI assets.
These are the rules Team 1 set out within the Team 1 when designing the assets.
- The assets, whether buttons or backgrounds, must make sense in the thematic style of the game.
- The UI assets should have consistency with each other.
- The navigation should be clear to the user based on simply looking at the menus.
- Application of visual design elements (scale, balance, visual hierarchy, contrast, Gestalt principles)
Several rough sketches for the UI elements were necessary for the early stages of designing. These are important to understand how the interface and general task flow would be seen at various points in the game. Below are the rough sketches for each of the relevant screens:
Main Menu
Level Select Menu
Death Menu
Following the sketches, an overall theme and style was decided on, and mock-ups were further designed and created using Illustrator.
- Note, these are not the final designs.
Below, is the mock-up for the In-Game UI a player would see. A block font type was chosen specifically to compelement the design style which is the 'technology' theme. Hence, blocky fonts as well as neon colour palettes were intergrated into the design. The main background also follows the game concept by integrating elements such as computer towers and circuit board design - this helps to emphasise the technology theme as well as to highlight the environment in which the story of the game takes place, which is the computer world. The main colours are shades of blue with a hint of red to emphasise the story of the game (virus vs. anti-virus).
Below, is the mock-up for general button style a user would interact with throughout the menus in Runtime, as opposed to for a single menu. The buttons adapt a polygonal design to emphasise the blocky and flat design style with highlights of red when hovered to indicate consistency in the color schemes used within the In-Game UI. Additionally, this will help give feedback to the users in terms of the state of the buttons (i.e. default and hovered) as the red highlights around the border of the buttons give contrast to the background. Hence, the buttons are clear and easy for the eyes.
In sprint 3, Team 1 has decided to enhance the UI of the game by developing a new design that adapts consistency with the pre-determined design style. To recall, the design style has to be 2D flat design in polygonal shape with shades of blue that has neon effects. Therefore, new button designs consisting of a default button and a hovered button were created and implemented. Below are the new designs of the button for main menu and levels page.
Default button and Hovered button
Level 1 default button and Level 1 hovered button
Levels page with new level buttons design
Updated Scores page with new interface and new level button design
A few updates to the scores page include the re-design of the score box to emphasise the neon and sci-fi effect design style that helps maintain consistency of the game design.
In sprint 3, team 1 has decided to improve the overal UI of the main menu page. First, the purpose of this was to enhance the look and feel of the game. The main page is crucial in delivering first impression of the overall concept of the game to the users - it helps users to grasp the game concept before they get into the gameplay. Given that, a new and enhanced character design (i.e., the head of the virus) was integrated into the design. Second, new layout design was established to aim for a better navigation. A few changes made on the positioning of RUNTIME title and the menu buttons - this helps emphasise the hierarchy of the menus and accentuate 'flat' navigation which is one of the recommended style for modern navigation.
In the final stage of the game development process, the focus was to make minor changes and polish every element within the UI. To enhance the UI to the extent that it allows for a smooth usability and user experience, removal of unnecessary elements which includes eliminating the excess white space around the button design was done. This process was applied for every button in the main menu and levels page since the previous button had more negative space which affected user navigation when hovering over buttons. Furthermore, an animation of the virus head for the main page was created. This prompted for a design that build up the emphasis on the concept of the game - the virus as the main character. Hence, the virus head design for the animation adapts a more enhanced looking as it helps users encapsulate the feel of the game.
Default and on hover 'Start' button (white space around the button was removed)
Default and on hover 'Start' button (white space around the button was removed)
Virus head (front-facing)
The animation occurs when the 'RUNTIME' title is hovered. The title will disappear and change to the virus head which will then increase gradually to fit the screen. Below is what the UI looks like during the animation.
To add the assets to the game, all assets were added to the source\core\assets\images directory. Images were then added with using of the Gdx ImageButton functionality, allowing the images to be made into textures that could be applied to and positioned on any menu. Although all assets were added as ImageButtons, not all acted as buttons, on a functional level. Some ImageButtons, such as the Virus Head that sits on the Main Menu and the title of 'Runtime' that also sits on the same menu have no function besides displaying the image.
The following variables were added to move and reposition all the ImageButtons added to the Main Menu.
/**
* Creates the button size and position based off
* of the users computer screen dimensions.
*/
int centreWidth1 = Gdx.graphics.getWidth()/2;
int centreHeight1 = Gdx.graphics.getHeight()/2;
int buttonDimensionsWidth = (int) Math.round(centreWidth1*0.35);
int buttonDimensionsHeight = (int) Math.round(centreHeight1*0.31);
int titleHeightDimension = (int) Math.round(centreHeight1*1.3);
int titleWidthDimension = (int) Math.round(centreWidth1*1.3);
int centreWidth = centreWidth1 - buttonDimensionsWidth/2; // Moves middle of button to Centre
int centreHeight = centreWidth1 - buttonDimensionsHeight/2;
int centreTitleWidth = centreWidth1 - titleWidthDimension/2; // Moves middle of button to Centre
int centreTitleHeight = centreHeight1 - titleHeightDimension/2;
int width35Percent = (int) Math.round(centreWidth*0.40);
int titleHeight = (int) Math.round(centreHeight*0.35);
int height50Percent = (int) Math.round(centreHeight*0.38);
int height65Percent = (int) Math.round(centreHeight*0.53);
int height78Percent = (int) Math.round(centreHeight*0.78);
int height90Percent = (int) Math.round(centreHeight*0.83);
int height105Percent = (int) Math.round(centreHeight*0.98);Below, is the Title asset that has been implemented into 'Runtime'.
Below, is the code for the rendering and positioning of the Title Asset that has been implemented in 'Runtime'.
table = new Table();
table.setFillParent(true);
Sprite sprite = new Sprite(new Texture("images/title_screen_clean.png"));
table.setBackground(new SpriteDrawable(sprite)); // Set backgroundBelow, is the Background asset that has been implemented into 'Runtime'.
Below, is the code for the rendering and positioning of the Background Asset that has been implemented in 'Runtime'.
Below, is the Start Button asset, as well as Start Button Hovered Variant that have been implemented into 'Runtime'. Other buttons feature the same two assets to make them up.
Below, is the code for the rendering and positioning of both the Start Button Asset and Start Button Hovered Variant that have been implemented in 'Runtime'. This code includes the ImageButton code that allows the buttons to change Texture when hovered over.
/**
* Creates the button texture for the Start Button.
*/
Texture startTexture = new Texture(Gdx.files.internal("images/button_start.png"));
Texture startHoverTexture = new Texture(Gdx.files.internal("images/button_start_hover.png"));
Drawable startDrawable = new TextureRegionDrawable(new TextureRegion(startTexture));
ImageButton startBtn = new ImageButton(startDrawable);
startBtn.getStyle().imageOver = new TextureRegionDrawable(startHoverTexture);
/**
* Sets the size and position of the button after texture applied.
*/
startBtn.setBounds(centreWidth,centreHeight-height50Percent,
buttonDimensionsWidth, buttonDimensionsHeight);Below, is the Title asset that has been implemented into 'Runtime'.
Below, is the code for the rendering and positioning of the Title Asset that has been implemented in 'Runtime'.