Day and Night Cycle Clock UI
Jump to a section or return to Day and Night Cycle Summary here!
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.
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.
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);
}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.
