# Introduction

this screen deals with the creation and explanation of the First game screen the cutscene screen where the in-game story is explained

Cutscene Images used

all the respective images have been generated using https://gencraft.com/generate

Images

scene 1

1. Location - images/ui/game screen/1 earth before.png
2. accompanying text - "Over a century ago, a tranquil world basked in an era of serenity. "

this image is the first scene in the game depicting the earth in perfect state

Scene 2

1. Location - images/ui/game screen/1.1 earth before.png
2. accompanying text - "Nature's embrace cradled humanity, and life flourished abundantly. "

another version of earth in perfect state

Scene 3

1. Location - images/ui/game screen/2.0 earth dying.png
2. Acompanying text - "However, this harmony soon succumbed to the relentless grip of human greed. "

earth in destroyed state

Scene 4

1. Location -images/ui/game screen/2.1 earth dying.png
2. acompanying text - "As desires grew insatiable, the delicate balance fractured, and the world's vitality waned"

Earth almost destroyed

Scene 5

1. Location - images/ui/game screen/3. meeting.png
2. acompanying text - "as everything was about to be lost a group of people cam together to save humanity and an idea was born"

a meeting to save humanity

Scene 6

1. Location - images/ui/game screen/3.1 meeting turret.png
2. accompanying text - "to set out towards the stars"

Scene 7

1. Location - images/ui/game screen/4.0 spaceship built.png
2. Accompanying text - "humanity pooled its resources together and made giant ships called ARKs that would carry us onto the stars"

Scene 8

1. Location - images/ui/game screen/4.1 spaceship leaving.png 2, accompanying text - "we set out with our iron will and firm resolve to not fade away "

Scene 9

1. Location - images/ui/game screen/5 arrival.png
2. accompanying text - "we arrived at planets and built outposts that would help us survive this harsh environment "

Scene 10

1. Location - images/ui/game screen/5.1 arrival.png
2. accompanying text - "we terraformed and procured resources that would help the future generations survive "

Scene 11

1. Location - images/ui/game screen/6.0 survey.png
2. Accompanying text - "the brightest and best began researching anf evaluating the newly found planets"

Scene 12

1. Location - images/ui/game screen/6.1 survey.png
2. accompanying text - "all seems perfect until we picked up on a looming threat that maybe we aren't alone......"

Code

Instance variables

These are the instance variables used throughout the code to store data and objects needed for rendering the story, handling UI elements, and managing game state.

private final GdxGame game;
private SpriteBatch batch;
private Texture[] images;
private String[] texts;
private int currentIndex;
private float imageDuration;
private float elapsedTime;
private BitmapFont font;
private BitmapFont boldFont;
private Stage stage;
private TextButton continueButton;
private TextButton skipButton;
private ShapeRenderer shapeRenderer;

Import statements

This section includes import statements that bring in various libraries and classes necessary for the code, such as graphics rendering, UI elements, and input handling.

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.ScreenAdapter;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.GlyphLayout;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.csse3200.game.GdxGame;

new story screen

it provides access to in game functionality

public StoryScreen(GdxGame game) {
        this.game = game;
        this.images = new Texture[IMAGE_PATHS.length];
        this.currentIndex = 0;
        this.imageDuration = 100000.0f; // Time (in seconds) per image

        preferences = Gdx.app.getPreferences("MyPreferences");
        preferences.putInteger("HighestLevelReached", -1);
        preferences.flush();

        this.elapsedTime = 0f;

        for (int i = 0; i < IMAGE_PATHS.length; i++) {
            images[i] = new Texture(IMAGE_PATHS[i]);
        }
        ServiceLocator.registerResourceService(new ResourceService());
        ServiceLocator.getResourceService().loadMusic(bgm);
        ServiceLocator.getResourceService().loadAll();
        music = ServiceLocator.getResourceService().getAsset(bgm[0], Music.class);
    }

Constants

Constants used to define image file paths and associated text for the story. These are used to load images and display text sequentially.

private static final String[] IMAGE_PATHS = {
    "images/ui/game screen/1 earth before.png",
    // ... (more image paths)
};

private static final String[] TEXTS = {
    "Over a century ago, a tranquil world basked in an era of serenity.",
    // ... (more story text)
};

Constructor

The constructor initializes the StoryScreen class with the game instance, sets up arrays for images and text, and loads the images from the provided file paths.

public StoryScreen(GdxGame game) {
    this.game = game;
    this.images = new Texture[IMAGE_PATHS.length];
    this.texts = TEXTS;
    this.currentIndex = 0;
    this.imageDuration = 2.0f;
    this.elapsedTime = 0f;

    for (int i = 0; i < IMAGE_PATHS.length; i++) {
        images[i] = new Texture(IMAGE_PATHS[i]);
    }
}

Show Method

The show method is called when the screen is displayed. It sets up rendering resources, fonts, and UI elements, including buttons for continuing and skipping the story.

 public void show() {
        // Initialize rendering resources
        batch = new SpriteBatch();
        font = new BitmapFont();
        boldFont = new BitmapFont();
        boldFont.getData().setScale(1.5f); // Set the font scale for bold text
        boldFont.setColor(Color.WHITE); // Set the font color to white for bold text
        stage = new Stage(new FitViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()));
        Gdx.input.setInputProcessor(stage);
        shapeRenderer = new ShapeRenderer();
// Initialization of rendering resources, fonts, UI elements, and stage
    // Creation of "Continue" and "Skip" buttons
}

Render method

The render method is called continuously to render the story, including images, text, and UI elements. It also handles button clicks and advances the story when needed.

 public void render(float delta) {
        // Clear the screen
        Gdx.gl.glClearColor(0, 0, 0, 1F);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        // Update elapsed time
        elapsedTime += delta;

        batch.begin();

        if (currentIndex < images.length) {
            // Display the current image
            batch.draw(images[currentIndex], 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

            // Display text if enough time has passed
            if (elapsedTime >= imageDuration) {
                float textX = 100;
                float textY = 100;
                float padding = 10; // Padding around the text
 // Handling button clicks
    // Advancing the story when necessary
}

Next method

The next method is called to advance to the next image/text in the story when the player clicks the "Continue" button. It also transitions to the next screen when the story is completed.

 private void next() {
        currentIndex++;
        if (currentIndex < images.length) {
            elapsedTime = 0;
        } else {
            game.setScreen(GdxGame.ScreenType.LEVEL_SELECT);
        }
    }
 // Advancing to the next image/text in the story
    // Transitioning to the next screen when the story ends
}

Resize method

The resize method is called when the screen is resized, ensuring that the UI elements are displayed correctly and maintaining the aspect ratio.

 public void resize(int width, int height) {
        stage.getViewport().update(width, height, true);
    }
// Handling screen resizing to maintain the aspect ratio
}

Dispose method

The dispose method is called when the screen is no longer needed to release resources, such as textures, fonts, and the UI stage.

 public void dispose() {
        batch.dispose();
        for (Texture texture : images) {
            texture.dispose();
        }
        font.dispose();
        boldFont.dispose();
        stage.dispose();
        shapeRenderer.dispose();
    }
}
  // Releasing resources when the screen is no longer needed
}

Test Plan

Due to the state of UI, it cannot be directly JUNIT/mockito tested. Here is a test plan for the screen.

• when selecting the start button on main menu the first image is displayed
• when the first image is displayed the skip button is displayed on the top right corner of the screen
• when the skip button is clicked it moves on to the next screen that is planet select
• when the first image is displayed the continue button is displayed on the top right corner of the screen next to skip button.
• when the continue button is clicked it displays the next image in line .
• when the first image is displayed the accompanying text is displayed on the bottom of the image without any glitches or bugs.
• when the first image is displayed it has the proper resolution without any texture glitches
• when the cutscene is playing there is no white screen covering the screen
• when the cutscene is playing if the user does not press the continue button after a certain ammount of time the time based failsafe will trigger and skip the cutscene screen and push the user to the planet / level select screen
• after the last image is displayed and either the continue button or skip button is clicked it will take the user to the level select screen

UML