Day and Night Cycle Clock UI - UQdeco2800/2022-studio-1 GitHub Wiki
Page Navigation
Jump to a section or return to Day and Night Cycle Summary here!
Summary
The clock is a source of information for the player to keep them on top of the day and night cycle. This was implemented as a UI element, DayNightClockComponent
, attached to the MainGameScreen
UI elements. The clock works similarly to the other UI elements present in the game, but is able to be updated through the EVENT_PART_OF_DAY_PASSED
event listener.
Technical
MainGameScreen
The MainGameScreen has the following command for attaching the DayNightClockComponent
to the screen.
Entity ui = new Entity();
ui.addComponent(new InputDecorator(stage, 10))
.addComponent(new PerformanceDisplay())
.addComponent(new MainGameActions(this.game, MainArea.getInstance().getGameArea().getPlayer()))
.addComponent(new MainGameExitDisplay())
.addComponent(new MainGameInterface())
.addComponent(new MainGameBuildingInterface())
.addComponent(new DayNightClockComponent())
.addComponent(new Terminal())
.addComponent(inputComponent)
.addComponent(new TerminalDisplay());
ServiceLocator.getEntityService().registerNamed("ui", ui);
The MainGameScreen
also loads the sprites for the clock, helping in loading the assets used in the DayNightClockComponent
.
DayNightClockComponent
The clock is added to the game through the addClock()
method, which creates a table in the top right corner for the clock sprites to be loaded into and then adds it to the ResourceService
stage.
private void addClock(){
rightTable = new Table();
rightTable.top().right();
rightTable.setFillParent(true);
rightTable.padTop(60f).padRight(10f);
//adding it on screen
rightTable.add(clockImage).left().bottom().size(200f, 200f);
stage.addActor(rightTable);
}
The clock sprite is updated in the changeSprite()
method, which is called when the EVENT_PART_OF_DAY_PASSED
is triggered. This clears whatever sprite is currently in the sprite table and replaces it with the next sprite in the order.
private void changeSprite(DayNightCycleStatus partOfDay) {
this.currentSprite += 1;
this.clockImage = new Image(ServiceLocator.getResourceService().getAsset(clockTimeOfDaySprites[currentSprite],
Texture.class));
rightTable.clear();
rightTable.add(clockImage).left().bottom().size(200f, 200f);
}
Testing
The easiest way to verify that the clock element was displaying and updating as intended was through visual confirmation. The below video demonstrates the base clock functionality with the clock hand moving at the start of each different phase of the day/night cycle. The duration of each day was reduced for the purpose of testing.
Flashing warning for last two days of footage.