Achievements Screen

Achievements Screen

UI Components

• AchievementRecordsDisplay.java: Responsible for displaying the best achievements unlocked by the user, as well as the ones that are yet to be unlocked. It is also responsible for displaying locked and unlocked chapters of the game story. Clicking on a chapter sends an event to ChapterDisplay.java's Dialog component which pops up and shows the game story and art for that particular chapter. If a chapter is locked, an Image is rendered, and if its unlocked, an ImageButton is rendered to make it clickable.

unlockedChapterImg.addListener(new ChangeListener() {
                @Override
                public void changed(ChangeEvent event, Actor actor) {
                    entity.getEvents().trigger("openChapter", chapter);
                }
});

• ChapterDisplay.java: Receives an event called openChapter and shows the dialog populated with the payload of the said event, which contains the chapter number, and game story. Based on the chapter number, the associated art is loaded from the assets dynamically.

// Dispatch an event to open the in game dialog
entity.getEvents().addListener("openChapter", this::openChapter);

Label story = new Label(chapter.content, new Label.LabelStyle(new BitmapFont(), Color.DARK_GRAY));
story.setFontScale(1.1f);
story.setWrap(true);
story.setAlignment(Align.topLeft);

Label heading = new Label("Chapter " + chapter.id, new Label.LabelStyle(new BitmapFont(), Color.BLACK));
heading.setFontScale(2f);
dialog.getContentTable().add(heading).expandX().row();
dialog.getContentTable().add(chapterArt).height(122).width(240).row();
dialog.getContentTable().add(story).width(600).row();
dialog.getButtonTable().add(renderCloseButton()).size(50, 50).row();

In order to hide the dialog on pressing the close button:

Image crossButtonImg = new Image(new Texture("images/achievements/crossButton.png"));

ImageButton closeButton = new ImageButton(crossButtonImg.getDrawable());

closeButton.addListener(new ChangeListener() {
            @Override
            public void changed(ChangeEvent event, Actor actor) {
                dialog.hide();
            }
});

UML Diagram

The diagram shows how the Achievements Screen and its UI components fit into the scheme of things in the Achievements ecosystem.

Sequence Diagram - Achievement Records Display Flow

Sequence Diagram - Displaying a chapter dialog