Skip to content

Story Outline Presentation with Pokémon‐Style Slideshows

JivalX edited this page Oct 5, 2023 · 3 revisions

Overview

The task of implementing the story outline presentation with Pokémon-style slideshows has been successfully completed. This feature enhances the storytelling experience by incorporating letter-by-letter text animations and sprite images. Players can now enjoy a dynamic and immersive narrative experience.

As the game progresses, the story outline is presented using elegant letter-by-letter text animations, creating an engaging and visually captivating storytelling experience for players.

Screenshot 2023-10-05 at 3 08 10 AM

Description

The Universal Tween Engine has been seamlessly integrated into the game to enable letter by letter text animations. This enhancement allows elements within the story outline presentation to gracefully appear on the screen.

Dynamic letter-by-letter text animations have been meticulously designed and implemented. The story outline is revealed one character at a time, providing an engaging and immersive storytelling effect.

Players and developers now have clear insights into how this feature enhances the storytelling experience.

UML Diagram

image

Code Implementation

Please refer to the InitialSequence package for this, especially InitialScreenDisplay.java class

addUIElements Function

The addUIElements function is responsible for setting up and displaying the initial story sequence on the screen. This function orchestrates the visual elements, such as the background, animated planet, story text, and the "Continue" button.

Background Image: The background image is loaded, which serves as the starfield backdrop for the initial sequence. It dynamically adjusts its size to match the screen's dimensions and is positioned at the top-left corner.

Animated Planet: The planet image is loaded, representing the animated celestial body that moves during the sequence. It is given a fixed size and initially positioned above the screen, taking into account the length of the text animation and the game's frame rate.

Layout and Text: A Table named rootTable is created to manage the layout of UI elements. It is set to fill the entire screen and center-align its content vertically. The initial story text is defined and stored in the story variable.

Story Label: A Label widget named storyLabel is created to display the story text. The label's text is set to an empty string initially, and it is configured to be center-aligned with no text wrapping. Its width is set to match the screen's width.

"Continue" Button: A "Continue" button is created using a TextButton widget. It is added to the rootTable and centered at the bottom of the screen.

Animation and Interaction: The planet image is animated using the Universal Tween Engine to create a perpetual up-and-down movement, adding a dynamic element to the scene.

Text Animation: The printTextLetterByLetter function is called to animate the story text. It progressively reveals the text one character at a time, creating a captivating letter-by-letter effect.

Stage Elements: All visual elements, including the background, planet, rootTable, and their respective contents, are added to the game's stage for rendering.

printTextLetterByLetter Function

The printTextLetterByLetter function is responsible for animating the story text by revealing it letter by letter. This function ensures that the text is presented in a dynamic and engaging manner.

Function Purpose: The function initializes with an empty text label to display the story.

Letter-by-Letter Animation: Inside the function, a timer is scheduled to run at specific intervals. It iterates through each character in the text variable. As the timer runs, it appends each character to the storyLabel, effectively revealing the story text letter by letter.

Animation Speed and Delay: The animation speed and initial delay can be adjusted as needed to control the pacing of the letter-by-letter text animation. Completion Handling:

The animation continues until all characters in the text have been revealed, at which point the timer is canceled.

Conclusion

These two crucial functions, addUIElements and printTextLetterByLetter, work in tandem to create a captivating story presentation within the game. The addUIElements function sets up the visual elements, including the background, animated planet, story text, and interaction button.

Meanwhile, the printTextLetterByLetter function orchestrates the letter-by-letter animation of the story text, ensuring that players experience an engaging and immersive narrative sequence. Together, these functions contribute to a dynamic and visually captivating storytelling experience for players.

Contributors

Clone this wiki locally