Menu Screens
This is where the design iterations, mock-ups, code implementation and other relevant information for the game's several menu screens will be located.
During the ideation process, our team reached a consensus that the main menu should showcase a celestial garden, with the user's perspective looking out into the cosmic expanse. Once this concept took root, we drew inspiration from a series of space-themed images to craft our initial sketches and bring our final product to life. The very first iteration of the UI for the home screen system was design. These mocks were made so that the team had a rough idea of the final design, and we knew what we were working towards.
During the user testing and feedback process, the design committee expressed concerns about the blend of realistic and pixelated images and strongly advocated for a uniform pixelated aesthetic throughout the game. This input led us to explore the idea of incorporating pixelated asset images, including plants and characters, which were originally intended for in-game use. Thus, the second iteration of the background skin was developed:
The new designs received a positive response from both the design committee and our own team. It was rewarding to see that the pixelated aesthetic resonated so well with everyone.
In the development of our game, we have implemented a main menu using the MainMenuDisplay class. One of the key elements of this main menu is the background image. In this wiki, we will delve into the role and implementation of this background image. The background image in the main menu plays a crucial role in setting the tone and atmosphere of our game. It serves as the first visual impression for players and can significantly impact their initial perception of the game world. In our case, the background image represents the backdrop for our main menu, and it aligns with the theme and narrative of our game, creating a visually appealing and immersive experience. The approach of incorporating the background image through LibGDX provides flexibility for future enhancements. This level of customisation allows us to adapt the main menu's visual style as needed. The background image in the MainMenuDisplay class is a vital component that enhances the overall aesthetic appeal of our main menu. Its implementation, utilising the capabilities of LibGDX, enables us to create an engaging and immersive introduction to our game, "Gardens of the Galaxy."
The background image is added to the MainMenuDisplay class through the use of the LibGDX framework. Here's how it is implemented:
Image title = new Image( ServiceLocator.getResourceService() .getAsset("images/galaxy_home_still.png", Texture.class));
In the code snippet above, we create an Image object named title. We use ServiceLocator.getResourceService() to access game resources, and .getAsset() loads the background image from the specified path ("images/galaxy_home_still.png"). The image's dimensions are set to match the width and height of the game window, ensuring it covers the entire screen.
`title.setWidth(Gdx.graphics.getWidth());
title.setHeight(Gdx.graphics.getHeight());
title.setPosition(0, 0);`
These lines set the dimensions of the title image to match the width and height of the game window, making it fullscreen. The setPosition(0, 0) call ensures that the image is positioned at the centre of the screen.
table.add(title);
Finally, the title image is added to the table layout, which is part of the main menu's UI layout.
Our approach to designing animations was grounded in a philosophy of maintaining a balance between engagement and user-friendliness. The background skins for our main menu, controls, and settings screens were already carefully crafted to be high-contrast and visually appealing. Therefore, we aimed to complement these designs with animations that were subtle yet captivating. For our animations, we decided to incorporate two prominent elements from our game world: a character and a plant. These elements are not only recognisable to players but also provide a connection to the in-game environment. Animating these elements allowed us to infuse life and personality into our user interface. The animations involved simple vertical motion—moving the character and plant up and down at the top of the screen. This motion was synchronised with the title of our game, creating a harmonious visual rhythm. The goal was to make the animations a seamless part of the user interface, evoking a sense of continuity and immersion. User testing and feedback were integral to the animation design process. We conducted usability tests with a diverse group of players to gather insights into their reactions and preferences. The feedback received was overwhelmingly positive, with players expressing appreciation for the subtle animations that added depth to our main menu and screens.
The first frame of the animation:
This subsection of the Wiki discusses the implementation of background animation in the MainMenuScreen and MainMenuDisplay classes of a game. The animation consists of a series of frames that create a dynamic background effect for the main menu. To understand the animation is to understand how these two classes work together.
In the MainMenuScreen class:
private static final int frameCount = 71; private static final String[] transitionTextures = new String[frameCount]; private static final String animationPrefix = "images/menu_animations/menu_animations";
frameCount: This variable represents the total number of frames in the animation. In this case, there are 71 frames. transitionTextures: An array of strings is initialised to store the file paths of each animation frame. animationPrefix: This string represents the common prefix for the file paths of the animation frames.
`private void loadFrames() { ResourceService resourceService = ServiceLocator.getResourceService();
for (int i = 0; i < frameCount; i++) {
transitionTextures[i] = animationPrefix + i + ".png";
}
resourceService.loadTextures(transitionTextures);
ServiceLocator.getResourceService().loadAll();
}`
The loadFrames() method is responsible for dynamically generating the file paths for the animation frames. It constructs the file paths using the animationPrefix and a numeric index. Each frame's file path is added to the transitionTextures array. The loadTextures method from the game's ResourceService is used to load all the animation frames as textures.
In the MainMenuDisplay class:
private static final float Z_INDEX = 2f; public static int frame; private Image transitionFrames; private long lastFrameTime; private int fps = 15; private final long frameDuration = (long)(800 / fps);
frame: This variable keeps track of the current frame of the animation. transitionFrames: An Image instance used to display the animation frame. lastFrameTime: A timestamp representing the time when the last frame change occurred. fps and frameDuration: These variables control the animation speed by specifying frames per second (fps) and frame duration.
@Override public void create() { frame = 1; super.create(); addActors(); }
The create() method is overridden and initialises the frame variable to 1 (assuming that the animation starts from the first frame) and calls addActors() to set up the main menu display.
'private void addActors() { // ... (code for creating the main menu components)
if (frame < MainMenuScreen.frameCount) {
// Load the current animation frame as an Image
transitionFrames = new Image(ServiceLocator.getResourceService()
.getAsset(MainMenuScreen.transitionTextures[frame], Texture.class));
// Set the dimensions and position of the animation frame
transitionFrames.setWidth(Gdx.graphics.getWidth());
transitionFrames.setHeight(Gdx.graphics.getHeight() / 2);
transitionFrames.setPosition(0, Gdx.graphics.getHeight() / 2 + 15);
// Increment the frame counter
frame++;
// Add the animation frame to the stage
stage.addActor(transitionFrames);
// Record the current time
lastFrameTime = System.currentTimeMillis();
} else {
// Reset the frame counter to 1 if we've reached the end of the animation
frame = 1;
}
// ... (code for adding other main menu components)
}'
Within the addActors() method, the current animation frame is loaded as an Image from the resources. The dimensions and position of the animation frame are set to cover the top half of the screen below the static menu. The frame counter is incremented, and the animation frame is added to the stage. A timestamp is recorded to control the frame rate. If the end of the animation is reached, the frame counter is reset to 1, allowing the animation to loop.