Building UI Implementation - UQdeco2800/2022-studio-1 GitHub Wiki
Description
The Building UI Implementation means that when a building is clicked in the game, a pop-up will appear near the building location. This pop-up contains information about the building such as its name, sell price, upgrade price, and health status. This pop-up should disappear when the building is clicked again. The purpose of this pop-up is so the user can upgrade and sell the building as this feature will not be included in the shop.
Classes
The implementation that occurred in Sprint 2 is in classes MainGameBuildingInterface and StructureServices. By working with the structure team, we were able to implement the structure JSON file to pull the statistics, have an on-click instance that is implemented in the structure class, and have the UI implementation that occurs in the MainGameBuildingInterface class.
Below is a UML diagram on how the Building UI pop-up class and main game interfaces are implemented into the game. Please note that there is a full diagram of all UI elements [here].
(https://github.com/UQdeco2800/2022-studio-1/wiki/UI-Implementation#classes)
Please note this does not go into detail about how the pop-up statistics are called or how the on-click function works as it is not in a UI class. That information can be found in structures.
Pop-Up
To create the pop-up we worked with team 7 to use their already established class handleClickedStructure Class to toggle the visibility of the pop-up. The sequence diagram below was created with the following assumptions, the game is already loaded and the building is already placed on the game map.
To create the pop-up we once again used PNGs that were loaded into the game. All values on the pop-up are dynamic as different buildings have different statistics. These statistics are based on the StructureName which is passed into MainGameBuildingInterface, at the moment some of these statistics are not loaded in as have not been created by the building team but will be implemented in the future. At the moment that counts as the sell price of the building and the upgrade price. Another feature will be the health bar. At the moment it has not been used so to show a visual of health we put the integer value, which will be changed in the future.
The previous pop-up:
Through iterations of work, now the health bar is functional:
Positioning
To make the pop-up appear in the vicinity of the building (above or below), the StructureService's handleClickedStructures method was utilised. It provided a mechanism of passing the coordinates of the click relative to the screen.
buildingUI = ServiceLocator.getEntityService().getNamedEntity("ui").getComponent(MainGameBuildingInterface.class)
.makeUIPopUp(true, screenX, screenY, structureName, structureKey);
toggleUIisVisible();
This snippet of code gets run whenever a Structure is clicked upon, thus causing the Building UI to pop-up with specific positioning arguments provided to in the function call.
One major issue that arose in the development of the UI was that the coordinates of the stored structures was from the top-left, while on the other hand UIComponents are rendered with the origin set at the top-right of the game window. This resulted the makeUIPopUp method making use of:
...
float screenHeight = Gdx.graphics.getHeight();
float screenWidth = Gdx.graphics.getWidth();
...
Obtaining the window screen height and width proved to have two benefits: (1) to recalculate the y coordinate to make rendering the pop-up relative to the top-right corner, and (2) to make the pop-up responsive to the screen (i.e., prevent the pop-up from appear off-screen and to reposition the pop-up after window resize events).
This was achieved through the following:
...
float uiWidth = 650f;
float uiHeight = 200f;
float screenHeight = Gdx.graphics.getHeight();
float screenWidth = Gdx.graphics.getWidth();
...
// To centre the pop-up (DEFAULT)
x = (x - 0.5f * uiWidth);
// To ensure the pop-up is within the bounds of the window and "shift" accordingly
x = Math.max(x, 0f);
x = Math.min(x, screenWidth - uiWidth);
// To make pop-up appear above the clicked structure (DEFAULT)
y = screenHeight - y + 100;
// To ensure the pop-up is not cropped above and place below structure accordingly
if (y + uiHeight > screenHeight) {
y -= uiHeight + 100;
}