Settings Page UI UX

Description

In sprint one, we didn't have enough time or resources to make the settings page look as presentable and functional as we desired. Hence, as a part of sprint two, we prioritised tidying the settings page up. This involved, replacing the numerous bright green (box boy) colours with the brown, yellow, gold, and beige theme of Atlantis Sinks. Hence, the background, title, and various types of buttons (different functionality buttons like checks, input fields, dropdowns, and scales) had to be fixed.

Accomplishment 1: Created & Added the Background

Method:

1. Open Pixilart and set the canvas size to 480x270 (full-screen size).
2. The background was replaced with a Pixilart design that was created in light of the shop team's interface. Used the following colour codes:

• gold lining: rgb(222, 147, 32)
• background: rgb(221, 188, 146)
• brown box: rgb(148, 93, 39)
• black outline: rgb(11, 7, 2)

3. Replicate the shop page boards and produce the design. Helpful tips: align the centre of objects on canvas, use the straight line pen to make the frame, use the lasso tool to select half of the board --> then duplicate it and flip to make an even more even board.
4. Export as PNG x4 scale.

Output:

Code Implementation The following code was implemented on the Settings page Display Java file.

Texture colour = new Texture(Gdx.files.internal("images/uiElements/startscreen/settingsbackgroundsprint2.png")); Drawable backgroundColour = new TextureRegionDrawable(colour); rootTable.setBackground(backgroundColour);

Accomplishment 2: Fixed the Colour Scheme of Buttons

We adjusted the Flat-earth-ui-json file to change the skins, more specifically the settings title font colour and the numerous buttons. It is important to note that; you must divide each RGBA value by 255 to work in libgdx.

Code Implementation

title: { font: title fontColor: black }

color: { r: 1 g: 0.7882352941 b: 0.0549019608 a: 0.3921568627 }

highlight: { r: 0.6392156863 g: 0.615682745 b: 0.1725490196 a: 1 }

Accomplishment 3: Mute/Unmute Button

We have provided sound settings for the music configuration. There are two buttons, one for the music and the other for the FX. Currently, the buttons are just placeholders because no functions and event handlers are linked to them.

Accomplishment 4: Button Designs

The apply button and the back button have been redesigned. The new apply button was created using a text button class that has been provided. As for the back button, we have made it bigger so that users could easily click it.

Output For Accomplishments 3 and 4:

Accomplishment 5: Exit Function Adjustments

The settings button is provided on two screens, the Main Menu page and the Main Game page. The adjustments have several features. For the first one, the back button will take users to their previous screen instead of the Main Menu page. The second one, if the users want to adjust their game settings during their game, they can adjust them without having to lose the progress that they have accomplished. The video could be found here.