Main Menu Display Code Implementation - UQdeco2800/2022-studio-2 GitHub Wiki

Introduction

For sprint 3, our team has decided to remove the original BoxBoy main menu and replace it with a more atlantis themed menu (click here to see more deatils). In terms of the programming side, in order to replace the old menu, my plan was to first look at the orginal MainMenuDisplay.java class, see if I can make changes directly and just swap the background. But later, after playing around with that class, i figured it would be the best to upgrade that class to a more responsive design with clearer logic (in my opinion). The reason why it is upgraded is because the original menu is using table and textButton element, I am not familiar working with table, and textButton is essentially a read-only factor (json file related). That said, with my previous experience working with GameAreaDisplay.java, using ImageButton along with my original transparent texture strategy is the best way of doing in from the top of my head at that time. Stuck with table and textButton was considered to be over-complicated. Therefore, the main class created in relation to the above is called MainMenuDisplayProMax.java.

Replacing Main Menu

As mentioned above, replacing main menu is also done within MainMenuDisplayProMax.java.

mainMenu =
                new Image(
                        ServiceLocator.getResourceService()
                                .getAsset(
                                        "images/Crafting-assets-sprint1/screens/substitute main menu by Rey.png",
                                        Texture.class));
        mainMenu.setWidth(Gdx.graphics.getWidth());
        mainMenu.setHeight(Gdx.graphics.getHeight());
        mainMenu.setPosition(0, 0);
        stage.addActor(mainMenu);

The above code block is to first generate the new main menu asset as an Image object, then using setWidth() and setHeight() to resize the image to fill the whole screen. Lastly, set position to the origin and add the new main menu to the stage.

Buttons Interaction

As mentioned above, the strategy used to make the button interactable is my original transparent texture method. This method uses Texture rather than Button, because only Texture can trigger event in the game engine. Since Texute is harder to position/resize than Image, the plan is to first position a non-transparent asset onto where you want the button to be, in my case I used the "catalogue button" first, see example below:

After the positioning is visually appropriate, swap the Image with Texture, and swap the non-transparent asset to the transparent texture asset, keep the positioning and sizing the same like so:

buttonTexture = new Texture(Gdx.files.internal
                ("images/crafting_assets_sprint2/transparent-texture-buttonClick.png"));
        buttonTextureRegion = new TextureRegion(buttonTexture);
        buttonDrawable = new TextureRegionDrawable(buttonTextureRegion);
        startButton = new ImageButton(buttonDrawable);
        startButton.setSize(290, 170);
        startButton.setPosition(Gdx.graphics.getWidth()/2 - 461,
                Gdx.graphics.getHeight()/2 - 365);

Lastly, to make the button interactable, we need to add ChangeListener to the transparent texture. In my case, I want it to trigger the "load" event when it detects player's mouse click:

startButton.addListener(new ChangeListener() {
            @Override
            public void changed(ChangeEvent event, Actor actor) {
                logger.debug("Game starting...");
                entity.getEvents().trigger("load");
            }
        });
        menuGroup.addActor(startButton);
        stage.addActor(menuGroup);

For the other two buttons, "controls" and "exit", the logic is the same as the above, except for the event to trigger are different.

// for controls button
entity.getEvents().trigger("settings");
// for exit button
entity.getEvents().trigger("exit");

Who to talk to?

Yingzheng Cai (@Rey_cyz#1464 on discord, @Rey-666 on github)