Displaying Status Effect UI - UQcsse3200/2024-studio-2 GitHub Wiki
Combat Stats Display
The CombatStatsDisplay
class is responsible for visualizing player and enemy stats during combat, including health, hunger, experience, and status effects.
Key Methods
updateStatusEffectUI
This method is responsible for displaying the status effect bar and label when a player is afflicted with a status effect.
public void updateStatusEffectUI(CombatStatsComponent.StatusEffect statusEffect) {
String statusFilePath = String.format("images/statuses/%s_stat.png", statusEffect.name().toLowerCase());
statusEffectImage = new Image(ServiceLocator.getResourceService().getAsset(statusFilePath, Texture.class));
statusTable = new Table();
statusTable.add(statusEffectImage);
statusTable.top().left();
statusTable.row();
String statusMessage = String.format("You are currently %s", statusEffect.name().toLowerCase());
statusEffectLabel = new Label(statusMessage, skin, "large");
statusTable.add(statusEffectLabel);
statusTable.setFillParent(true);
statusTable.padTop(tableTopPadding).padLeft(tableLeftPadding);
// Add hover listener for status effect description
statusTable.addListener(new InputListener() {
@Override
public boolean mouseMoved(InputEvent event, float x, float y) {
setTextForStatusEffectHint();
return true;
}
@Override
public void exit(InputEvent event, float x, float y, int pointer, Actor fromActor) {
hoverTextTable.setVisible(false);
backgroundImage.setVisible(false);
}
});
stage.addActor(statusTable);
}
removeStatusUI
This method removes the status effect bar and text from the combat screen when the effect wears off.
private void removeStatusUI() {
statusTable.remove();
}
Usage
To use the CombatStatsDisplay
class:
- Create an instance of
CombatStatsDisplay
with player and enemyCombatStatsComponent
objects:
CombatStatsDisplay display = new CombatStatsDisplay(playerStats, enemyStats);
- Call the
create()
method to initialize the display:
display.create();
-
The display will automatically update when changes occur to player or enemy stats, or when status effects are added or removed.
-
To manually update specific parts of the display, you can call the following methods:
display.updateHealthUI(playerStats, enemyStats);
display.updatePlayerExperienceUI(playerStats);
display.updatePlayerHungerUI(playerStats, enemyStats);
- Status effects are automatically displayed when added to the player's
CombatStatsComponent
and removed when they wear off.
Status Effect Images
The following status effect images are used in the game:
- Confusion
source/core/assets/images/confused_stat.png
:
- Shocked
source/core/assets/images/shocked_stat.png
:
- Poisoned
source/core/assets/images/poisoned_stat.png
:
- Bleeding
source/core/assets/images/bleeding_stat.png
:
Class Diagram
classDiagram
class CombatStatsDisplay {
-CombatStatsComponent playerStats
-CombatStatsComponent enemyStats
-Image playerHealthImage
-Image playerHungerImage
-Image enemyHealthImage
-Image xpImage
-Image statusEffectImage
-Label playerHealthLabel
-Label playerHungerLabel
-Label enemyHealthLabel
-Label experienceLabel
-Label statusEffectLabel
+create()
+updateHealthUI(playerStats, enemyStats)
+updatePlayerExperienceUI(playerStats)
+updatePlayerHungerUI(playerStats, enemyStats)
+updateStatusEffectUI(statusEffect)
-removeStatusUI()
-createTextForHints()
-createBackgroundForHints()
-setTextForStatusEffectHint()
}
CombatStatsDisplay --|> UIComponent
Sequence Diagrams
Adding Status Effect UI
sequenceDiagram
participant NPC
participant PlayerEntity
participant CombatStatsComponent
participant CombatStatsDisplay
NPC->>PlayerEntity: Apply status effect
PlayerEntity->>CombatStatsComponent: addStatusEffect(effect)
CombatStatsComponent->>CombatStatsDisplay: trigger("statusEffectAdded", effect)
CombatStatsDisplay->>CombatStatsDisplay: updateStatusEffectUI(effect)
CombatStatsDisplay->>Stage: addActor(statusTable)
Removing Status Effect UI
sequenceDiagram
participant PlayerEntity
participant CombatStatsComponent
participant CombatStatsDisplay
PlayerEntity->>CombatStatsComponent: removeStatusEffect(effect)
CombatStatsComponent->>CombatStatsDisplay: trigger("statusEffectRemoved")
CombatStatsDisplay->>CombatStatsDisplay: removeStatusUI()
CombatStatsDisplay->>Stage: remove(statusTable)
Testing
Due to the nature of UI components, testing for this feature was primarily conducted through visual testing. A detailed testing plan can be found in the Combat Visual Asset Testing Plan. Testing was completed for all three boss encounters, with a focus on the Kanga boss for demonstration purposes.