Introduction

This wiki will outline the design decisions involved with the redesign of the gold and time UI specifically the placement and imagery used to represent these variables.

• 1. Initial Concepts and Planning
• 2. Implementation of the UI

Initial Concepts and Planning

Overview

• Location/placement of the new UI
• Imagery to represent the new UI
• Font of the new UI

Justification

The placement of the new UI would have to be somewhere that is still readable without compromising other gameplay features (e.g. top left and right of the gameplay region which is dedicated to orders). Additionally a box or image can be placed underneath the text to enhance the UI visually but also make each UI component identifiable. Originally these were simply texts that were on the left of the screen that were not displayed in an organised manner. Hence we decided to spend some time trying to make these components look better visually to make the game more enjoyable to play.

Inspiration

Inspiration from Overcooked

Implementation of the UI

Overview

• How the implementation was handled

Image of UI after sprint 4

Implementation

PlayerStatsDisplay - This file was modified by creating a container in a certain area and padding it to fit appropriately within the game area. We followed the same structure as the UI componenets which were originally in the game. We decided to make it more visually apealing by adding some colors and images. We also had to move them (using padding and centering). We initially tried to use a sequence diagram to explain the different functions but realised it was not the right use of diagram. Instead we decided to go for flow charts as showed below. 'Bad diagram':

Timer

Initially for the timer, we attempted to implement a progress bar. However, because the background is an image it was quite hard seeing it decrease over time and we weren't extremely satisfied with the look. We wanted to make something that gets the player's attention more. Hence we thought using the numerical time and adding some element of colour would grab the player's attention more.

A simple if else statement controls the color of the time left before the day ends. The time has a white label at first, but as time passes by it becomes yellow when the time left is less than 150 seconds. Once the timer reaches less than a minute, it turns red.

Flicking timer

A function that flicks timer every 0.5 seconds.

Background of components

"TextureRegionDrawable" is used to set the background of the stats like Day and cash. Below is one of the examples.

TextureRegionDrawable goldBackground = new TextureRegionDrawable(
        new TextureRegion(ServiceLocator.getResourceService().getAsset("images/box_background.png", Texture.class))
    );
    goldLabelContainer.setBackground(goldBackground);

Icons displayed near the stats

We moved the rage meter above the inventory box to create a better looking design for the game. Initially we trialed a first version seen below: However, we decided to use something that aligns with them a bit more. We decided to look online to find other images.

The icons used were taken from the website: https://pngtree.com/freepng/Recently-Download?sce=ma&id=2fd. The icons next to them were also taken from the same website. We initially considered this design, but did not like it and decided to go for the blue png.

The icons/images present near the stats of the player are added to the table as images from the "Image" class. Below is an example.

goldImage = new Image(ServiceLocator.getResourceService().getAsset("images/coin.png", Texture.class));
    goldContentsTable.add(goldImage).size(35).padRight(0).padLeft(10);

Here is the orange box used