Main Game Screen Background - UQcsse3200/2024-studio-3 GitHub Wiki

Overview

The background of the main game screen should reflect some of the world outside the restaurant, and tie in with the outer game story. This background shows the front of Beastly Bistro and the back area / gardens outside.

Development

Original inspiration came from this image:

https://github.com/UQcsse3200/2024-studio-3/wiki/Cutscenes

This gave a rough idea as to the design of the restaurant and mood, so that design would be consistent across the game

First Pass

This was the first attempt at a concept for the game background, incorporating with the plans of the resized map and ticket line as worked on by Team 7 in Sprint 3

Second Pass

Once the map resize had been completed, the background had to be resized to fit the final dimensions. This was decided as the final iteration of the piece.

Background Implementation

The background acts as a UI component, and instead of rendering behind the game area, instead each background image involves a transparent window over where the game area sits and loads on top of it. This ensures that while resizing, the map will always load within the confines of the outside restaurant. The game area will always (within reasonable bounds) render the whole width of the restaurant area, however depending on the ratio of the game window, can render with black bars above and below the game area (between the edge of the game area and the edge of the transparent window). Although not perfect, his was the most effective way of mitigating the visual impact of the different resizing functions used by the background component and the game area itself.

Game window's ratio loads game area perfectly

Game window's ratio loads game area with added white space

Daylight Cycle

Implementation

While the background alone was a major enhancement to the completeness of the game area, main game functionality revolves around the "day-night" cycle which drives much of the story. As such, we wanted the background to reflect this and visually transition the world from day to night - as would happen in a real restaurant.

This involved creating 36 different variations of the background at different stages of the day. Through doing this, implementing the background as a UI component meant:

1. The front wall of the shop loads with the background (rather than the back wall which loads as a part of the game area). This means that colour and shadow changes to the exterior wall could be easily updated as a part of the background

2. As a UI Component (and consequently a Component), the update() function could be overridden to accomodate this change (and didn't need to be exclusively called)

Based on the predetermined 5 minute day length, each image is set as the background for ≈8.3 seconds (300s/36) before updating to the next image in the sequence.

Edit (Sprint 4): Each image is now set as the background for 7.5 seconds (300s/40) before updating. This ensures the final frame is reached earlier and the restaurant is set at "night" for longer

@Override
    public void update() {
        if (!lastFrame) {
            long elapsedTime = TimeUtils.timeSinceMillis(timeSinceLastUpdate);
            long elapsedTimeSecs = elapsedTime/1000;
            //if time to update
            if (elapsedTimeSecs >= this.timePerFrame) {
                this.currentImageIndex++;
                this.currentImage = BACKGROUNDTEXTURES[currentImageIndex];
                this.timeSinceLastUpdate = TimeUtils.millis();
                table.clear(); //clears current background
                setBackground(); //sets background to new image
                System.out.println("Updated background to " + this.currentImage);
                if (currentImageIndex >= 35) {
                    this.lastFrame = true; //stops updating when hits last frame of cycle
                }
            }
        }
    }

All Background Assets

All images used in the day->night effect: