UIElementsDisplay

Introduction

UIElementsDisplay is a class that extends the UIComponent and adds important buttons and interactive menus for the user making the game area more appealing and interactive for the user. The main things implemented using this class include the remaining mobs button, wave timer, level progress slider and the interactive tower select screen.

The following page describes how everything is created and added to the main game screen.

Adding 'actors' using addActors()

This method of UIElementsDisplay handles positioning of tables, which are further used to place buttons/labels into the screen. For this implementation, a table named buttonTable is created which contains remainingMobsButton and timerButton.

In order to position the respective buttons, buttonTable is added to the top-right of the stage (which is essentially the display screen) using .top().right().

Towards the end of this method, all the created buttons (remaining mobs button and wave timer button) are added to the button table with appropriate padding. These buttons are further drawn by stage which houses the tables containing buttons.

Updating mob count: updateMobCount()

The updateMobCount() function uses WaveService and updates (rewrites) the text written on the remainingMobsButton. Text on any TextButton can be rewritten using the .setText() method. ServiceLocator.getWaveService().getEnemyCount() returns the mob count at any instance in the game. This button can also be used to skip the buffer period between any two waves. This is achieved by adding a listener which flips the value of skipDelay flag present in the WaveService. The value of this flag determines if a wave is started or not. More about how this works can be found at the Wave Service page.

A listener for an event triggered by button press can be added using the following code:

textButtonX.addListener(
        new ChangeListener() {
            @Override
            public void changed(ChangeEvent event, Actor actor) {
                // stuff that needs to be done when textButtonX is pressed
            }
        }
);

Creating and updating the Timer Button: createTimerButton() and updateTimerButton()

createTimerButton()

As the name suggests the createTimerButton() creates the timer button using ButtonFactory. This button reflects the time remaining till the next wave of mobs starts in a MM:SS format (minutes:seconds).

The skin for the button and the text on the button are loaded in the ButtonFactory. After creating the button, start-up animation is added using .addActions() method. addAction() method provides various forms of animations that can be performed on the buttons whenever desired. For this instance, slide-in animations are added for the timer button. When the timer button is spawned using createTimerButton(), the added slide-in animation will be played. This is achieved by adding a Sequence action moveTo() which moves the desired button to specific coordinates on the game screen. The first 2 arguments of the method specify the final coordinates of the button, followed by time required to reach the final position (perform the animation) and lastly specifying the type of animation required.

Animation for the timerButton is implemented using the following code:

timerButton.setPosition(Gdx.graphics.getWidth(), Gdx.graphics.getHeight() - 300);
timerButton.addAction(new SequenceAction(Actions.moveTo(Gdx.graphics.getWidth() - 435,
Gdx.graphics.getHeight() - 300, 1f, Interpolation.fastSlow)));

updateTimerButton()

This function is responsible for creating and updating the text on the timerButton. First it is checked if the game has been paused using the following condition:

if (!(ServiceLocator.getWaveService().getGamePaused())) {}

If the game is not paused, the difference between the next wave and current time is calculated in milliseconds and further checks are performed. After storing the value of time difference in finalTime variable, it is checked if the buffer period between waves is active using the following code:

if (ServiceLocator.getTimeSource().getTime() < ServiceLocator.getWaveService().getNextWaveTime()) {}

If the condition is true (that is, the game is in buffer period), the timerButton is created and updated with the finalTime value calculated before. Although, before creating the button it is also checked if the button already exists in the table using the custom made findActor() method (more about this method is written below). If the button is not present in the table, it is created and the text is updated. However, if the condition is not true (the game is not in buffer state), any and all buttons named timerButton are removed from the table (buttonTable). After removing, the table is updated and stage is redrawn to update the current state of the table.

findActors(Actor actor)

This method, as the name suggests, returns true if there exists an instance of actor actor in the buttonTable and false otherwise. However, this function can also be updated to check specific actors in specific tables just by adding a new parameter for the table instance and changing the for-each loop to:

for (Actor actors: tableInstace.getChildren()) {
    if (actors == actor) {
        return true;
    }
}

Conclusion

UIElementsDisplay simplifies the process of incorporating various types of UI elements, such as text buttons, labels, or even intricate features like tower placement, with great ease. It offers the flexibility to customize the positioning and scaling of each element on the screen, streamlining the creation of UI components into a straightforward and efficient task.

UML Sequence Diagram

The following diagram describes the logical flow of UI elements timerButton and remainingMobsButton in UIElementsDisplay: