UI Implementation
All UI components were developed using Pixilart, a free online pixelated art drawing tool, by starting off with a canvas size in proportion to standard full-screen resolution (w: 1920px, 1080px). The chosen canvas size was 480px by 270px as Pixilart limited its max canvas size to 700px by 700px. Additionally, starting off with a quarter of the game resolution meant that the UI components maintained their respective sizing in the game and that each component would get exported by 4 times, enforcing the pixelated style of the game. Consequently, they would not require to be manually scaled up as that would result in jeopardising their quality.
Figure 1: Exporting procedure in Pixilart
Following the principle stated in 1.0 The Approach, buttons were designed keeping into consideration the relative scale of the buttons to the screen. Buttons were designed with 1px thick black outline. Shading of the button was also done in a particular way, as detailed in 2.2.2 Button Colours & Shading below.
Three different button sizes (pre-scaled) were chosen in development:
- 15px by 15px - Default/simple button size
- 29px by 15px - Rectangular button size for buttons with critical impact (i.e. exit game button)
- 64px by 20px - Unique to the Main Menu Screen
Figure 2: Button sizes (1-3) shown for comparison to one another
All other buttons were designed to fit this sizing guideline that was produced.
Buttons were designed as either:
- Rounded rectangular (15px by 15px or 29px by 15px) (as in Button Size 1 and 2 in Figure 2, above)
- Circular (15px by 15px) - Implemented for more concise buttons
- Abstract (MAX: 64px by 20px) - For freestyle buttons (i.e. Start Button in Figure 2)
The three different buttons style enforced the pixelated design style of the game in three unique ways but by still maintaining consistency of UI Elements in general. Consistency was primarily maintained with the type of shading implemented (as detailed in 2.2.2 Button Colours & Shading below).
Since the game being developed is a detailed pixelated game, there was no restriction on colours as long as there was enough contract and clarity. For the development of buttons, four steps were taken to ensure consistency:
- Create button outline
- Add base colour
- Add shades and tints
- Create button icon
- Overlay button icon on button frame
Figure 3: Steps taken to ensure consistency in button development through shading
To create the correct shades and tints in Pixilart, the Lighten/Darken (D) tool was utilised. To create the darkest shade, a darkening of strength 0.3 (30% darker) was implemented. Similarly, the second darkest shade with strength 0.1 (10% darker); and the tint with lightening strength 0.2 (20% lighter) was implemented.
The button icon was developed separately and was overlaid on top of the button at the last step.
To ensure enough contrast was present between the button frame and icon, a black icon was added around the icon. This was only implemented in two scenarios:
- The base button colour and primary icon colour had the same brightness or similar hue
- The icon already implemented black in its detailing
In Scenario 2, the presence of black detailing without a black outline would result in an inconsistent button design. An example in shown below in Figure 4.
Figure 4: Shop button with outline (left) and without (right)
To achieve the clicked button effect [NOTE: functionally implemented in Sprint 2], each button was duplicated, with the duplicate buttons rendered slightly differently to achieve the clicked effect. This was achieved simply through using the Lighten/Darken (D) tool in Pixilart. A darken effect of 0.4 (40% darker) was used. This shades all colours, leaving the black outline the same (Refer to Figure 5 below to see the difference)
Figure 5: Button (left) with its associated clicked effect rendered version (right)
Through user feedback, some of buttons underwent revisions as detailed in User Testing One: Simple Button Design.
The background and title were inspired by the concept of Atlantis Sinks with ties to the sunken city, ocean and prized crystal.
The background was developed by creating a canvas scaled down 24 times from full-screen resolution. This ensures that pixelated theme of the game was maintained and that a scale up would enforce the style with defined pixel boundaries. The inspiration was taken from a sunken depiction of The City of Atlantis, showing ruins of temples and the lost city's building rubble of the rocky sea floor.
The background was developed using a base colour of #2DB7B9 and applying a darker shade to depict the sea floor. The underwater terrain was made by creating larger rocks on the sides and adding tints and white where the light would reach. A vague (almost blurry) sunken City of Atlantis was drawn on by creating pillar like structures.
The final artwork was exported and up-scaled by a factor of 24.
Figure 6: Sunken (A Depiction of The City of Atlantis)
The title employed the colour scheme outlined in the design guidelines, namely the HEX codes #2A9D8F, #264653 and #E0B0FF. This was a combination of the crystal and buttons' colour schemes. The title was created using pixel art software on a canvas that is considered a standard full-screen resolution (outlined above). The following are the steps broken down to construct this logo...
- For the text select the 'Newspaper' font found in the built-in text tool and change the text colour code #264653.
- Type the entire word 'Atlantis Sinks'.
- Use the gradient tool and select the colour #2A9D8F to apply the gradient over the text, and have the following gradient settings ticked: transparent secondary and bucket all colours.
- Then use the lasso tool, select 'Sinks' and move this beneath 'Atlantis'.
- Create the crystal by drawing the gem shape and using shades darker than #E0B0FF to create a shadowing effect.
- Repeat the same process in step 3 for the word 'Atlantis' but use the colour code #E0B0FF for the mauve gradient.
- Then lighten and brighten the entire word 'Atlantis Sinks' by 80% using the lighten/darken (D) tool.
The main aspects of implementation, in this case, is adding the background and adding images into the game. The method used below is purely for placeholder purposes and will not be the final implementation for this code. In future an atlas will be used with a JSON file, so skins will just be called.
// Background Colour
Texture colour = new Texture(Gdx.files.internal("images/uiElements/exports/background.png"));
Drawable backgroundColour = new TextureRegionDrawable(colour);
rootTable.setBackground(backgroundColour);
The code above is how we added the background elements, in this case, it is for the settings page, but the same processes was used for the main menu page.
This code makes the PNG file a texture and then makes it a drawable element, this is essential as the .setBackGround() call that was already established in the game only takes drawable textures. In this case, we set the background of the table in the page to the PNG. This works well as there is only one table in the page.
Step one: Inserting an image in as a texture:
Texture achievementsTexture = new Texture(Gdx.files.internal("images/Achievements.png"));
TextureRegionDrawable upAchievements = new TextureRegionDrawable(achievementsTexture);
TextureRegionDrawable downAchievements = new TextureRegionDrawable(achievementsTexture);
ImageButton achievementsButton = new ImageButton(upAchievements, downAchievements);
Step two: Adding PNG placeholder to table, that has been established
leftSideTable.add(achievementsButton).left().bottom().size(100f, 100f);
In this example, there are placement calls for the table element such as .left(), .bottom() and .size() is used to scale down the element.
Step one and two were performed on the MainGameInterface, PlayerStatsDisplay, MainGameExitDisplay and MainGameDisplay.
All images also must be loaded into the game. This is done by adding the file path to MainGameScreen or MainMenuScreen, depending on where you would like to add the image. Below is a section from MainGameScreen, and the Textures that were loaded in.
private static final String[] mainGameTextures = {
"images/uiElements/exports/heart.png",
"images/uiElements/exports/coin.png",
"images/healthBar.png",
"images/uiElements/exports/crystal.png",
"images/uiElements/exports/stone.png",
"atlantisBasicBackground.png"
};
Below is a UML diagram of all UI classes and how they are linked:
Please note that each Screen is inherits a different part of the game but this section was not mapped out.