Implementing a Flexible Popup Dialog System for Enhanced User Interaction - UQcsse3200/2024-studio-2 GitHub Wiki

Package: com.csse3200.game.ui.DialogueBox

The PopupDialogBox class is designed to create a flexible popup dialog box within the game. It is primarily used to display additional information when an animal is selected but can be extended for other purposes wherever a popup is required. The dialog box displays a combination of an image, text, and health bars, with a button to confirm the selection or proceed through a sequence of information.

• Fields:

  • titleLabel: A Label displaying the title of the current dialog.
  • contentLabel: A Label displaying the content of the current dialog.
  • nextButton: A TextButton allowing the user to confirm or proceed to the next piece of content.
  • animalImage: An Image representing the animal or entity associated with the dialog.
  • healthBarImage1, healthBarImage2: Image objects representing the health bars of the animal or entity.
  • dialogWidth, dialogHeight: The width and height of the dialog box.
  • titles, content: Arrays containing the titles and content to be displayed sequentially.
  • currentIndex: An integer tracking the current position in the sequence of titles and content.

• Constructor:

  • PopupDialogBox(String[] titles, String[] content, String animalImagePath, Skin skin, float dialogWidth, float dialogHeight): Initializes the dialog box with titles, content, an image path, a skin for styling, and the dimensions of the dialog.

• Methods:

  • addActionListeners(): Attaches the necessary event listeners to the button(s) within the dialog.
  • createDialogLayout(): Configures the layout of the dialog, arranging the image, text, health bars, and buttons.
  • proceedToNext(): Advances to the next title and content in the sequence, hiding the dialog when the sequence is complete.
  • display(Stage stage): Displays the dialog on the specified stage.

Figure 1: UML Diagram for Animal Selection Classes

P.S. - The DialogHelper class was renamed to PopUpHelper.

The PopupDialogBox can be utilized in different scenarios where additional information needs to be displayed about a specific object or entity. Below is an example of how to use this class to create a popup dialog box when an animal is selected.

String[] titles = {"Animal 1", "Animal 2"};
String[] content = {"This is the first animal.", "This is the second animal."};
PopupDialogBox dialogBox = new PopupDialogBox(titles, content, "images/animal.png", skin, 900f, 400f);
dialogBox.display(stage);

Package: com.csse3200.game.ui.DialogueBox

The PopUpHelper class acts as a utility to simplify the creation and display of PopupDialogBox instances. This class abstracts the complexities involved in initializing and showing a dialog box, allowing developers to easily integrate popup dialogs into various parts of the game.

• Fields:

  • skin: A Skin object used for styling the dialog components.
  • stage: A Stage object where the dialog will be displayed.

• Constructor:

  • DialogHelper(Skin skin, Stage stage): Initializes the helper with the specified skin and stage.

• Methods:

  • displayDialog(String title, String content, String animalImagePath, float width, float height): Creates and displays a PopupDialogBox with the specified title, content, image path, and dimensions.

The PopUpHelper class can be used to easily display a popup dialog box within the game, such as when an animal is selected on the screen or if there is an interaction between an NPC and the main player.

PopUpHelper dialogHelper = new DialogHelper(skin, stage);
PopUpHelper.displayDialog("Animal Selected", "You have selected a strong animal.", "images/animal.png", 900f, 400f);

Package: com.csse3200.game.components.animal

In the AnimalSelectionActions class, the DialogHelper and PopupDialogBox classes are used to create a dialog that pops up when an animal is selected by the player. This dialog provides information about the selected animal and includes an option to confirm the selection.

Below is a snippet showing how the dialog box is utilized:

private void showAnimalDialog(int animalIndex, String animalImagePath) {
    String title = "Animal " + (animalIndex + 1);
    String content = "You've selected Animal " + (animalIndex + 1) + ".\n" +
            "This animal has unique characteristics.\n" +
            "It possesses special abilities.";

    dialogHelper.displayDialog(title, content, animalImagePath, 900f, 400f);
}

This code creates a PopupDialogBox displaying the selected animal's information, and the dialog box is shown on the screen using the DialogHelper. The showAnimalDialog method is called when the player clicks on an animal image or button, providing an intuitive user experience.

Figure 2: Dialog Box visual in main game