Player Eviction Menu Sound and Animation Effect: Code Guideline Sprint4

The Design Guideline：Sprint4: Game Polishing tasks

Contents

1. Add various sound effects related to eviction menu.
2. Various visual effects when using eviction menu.
3. Add transition animation for Npcs and clues window.

Game Polishing

In sprint4, the function of the game has been basically completed, so we choose to polish the game to improve the player's playing experience. A series of sound and visual effect had been added in the game and the related code could be find in NpcEvictionMenuDisplayNew.java.

1.Sound effects for any aspects of eviction menu.

we add four different audio for using evicition menu, open and closed evicition menu,open and closed clues widow. And these sound effects are called through function MusicStuff.playMusic.

    private static final String[] cardNames = {
    MusicStuff.playMusic("sounds/CloseEvictionMenu.wav", false);
                        logger.debug("Exit button clicked");
                        logger.info("exit to previous menu");
                        exitMenu();
    public void changed(ChangeEvent changeEvent, Actor actor) {
            buttons[i].addListener(new ChangeListener() {
                @Override
                public void changed(ChangeEvent changeEvent, Actor actor) {
                    MusicStuff.playMusic("sounds/OpenEvictionMenu.wav", false);
                    logger.debug("button" + index + "clicked");
                    createConfirmDialog(cardNames[index]);
                }
                ...
                if (card.isOver()) {
                    MusicStuff.playMusic("sounds/OpenClueWindow.wav",false);
                    logger.debug("card" + index + "clicked up");
                    createCardInfo(cardNames[index]);
                }
     private void createCardInfo(String card_name) {
        dialog.addListener(new InputListener() {
            @Override
            public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
                MusicStuff.playMusic("sounds/CloseClueWindow.wav",false);
                logger.debug(card_name + " clicked");
                dialog.remove();
                return true;
 }
        });

And there are three sound effects that appear when Wrongprompt box1, Wrongprompt box2 and Rightprompt box are triggered. Also called by function MusicStuff.playMusic.

               
private void createResultDialog(String button_name, NpcResultDialogType type) {
        String backgroundPath, buttonPathDefault, buttonPathHover;

        if (type == NpcResultDialogType.RIGHT_BOX) {
            MusicStuff.playMusic("sounds/RightPromptBox1.wav",false);
            ....";
        } else if (type == NpcResultDialogType.WRONG_BOX1) {
            MusicStuff.playMusic("sounds/WrongPromptBox1.wav",false);
            ...;
        } else {
            MusicStuff.playMusic("sounds/WrongPromptBox2.wav",false);
            backgroundPath = IMAGES_PATH + "wrongBox2.png";
            buttonPathDefault = IMAGES_PATH + "chanceBtn2.png";
            buttonPathHover = IMAGES_PATH + "chanceBtn2_H.png";
}

2.Visual effects when using eviction menu

On the other hand, we also added some visual effects to the menu, like fireworks when the rightprompt box appears and dark smoke for the wrongprompt box.To make these visual effects possible, we need to change some function from stage to window. The functions for visual effect are in createResultDialog, function window.addActor,particleRightActor.remove, particleWrongActor2.remove and etc use to draw the visual effect in different situation, and the function like particleRightActor.setPosition use to determine the location of the visual effect.

    private void createResultDialog(String button_name, NpcResultDialogType type) {


        logger.debug("create Result dialog from name: " + button_name + " type:" + type);
        // if Lose, it will jump to ending screen, no need to create dialog
        if (type == NpcResultDialogType.LOSE) {
            EndingMenuDisplay.setLose();
            entity.getEvents().trigger("ending");
            return;}
        if (type == NpcResultDialogType.WIN) {
            creatWinDialog();return;}

        // set the style of dialog include font color of title; background; size; position
        float dialog_size_x,dialog_size_y;
        String backgroundPath, buttonPathDefault, buttonPathHover;

        if (type == NpcResultDialogType.RIGHT_BOX) {

            MusicStuff.playMusic("sounds/RightPromptBox1.wav",false);
            backgroundPath = IMAGES_PATH + "rightBox.png";
            buttonPathDefault = IMAGES_PATH + "rightBtn.png";
            buttonPathHover = IMAGES_PATH + "rightBtn_H.png";
            particleRightActor.setPosition((float) (bgWidth * (1200.33 / 1600)), (float) (bgHeight * 640.33 / 900));
            particleRightActor.start();
            window.addActor(particleRightActor);
            particleRightActorTwo.setPosition((float) (bgWidth * (400.33 / 1600)), (float) (bgHeight * 640.33 / 900));
            particleRightActorTwo.start();
            window.addActor(particleRightActorTwo);
        } else if (type == NpcResultDialogType.WRONG_BOX1) {
          ....;
        } else {
          ...;

        }
        ....
        okButton.addListener(new ChangeListener() {
            @Override
            public void changed(ChangeEvent changeEvent, Actor actor) {
                logger.info("yes_button from " + button_name + " clicked");
                //when you select ok button
                MusicStuff.playMusic(buttonPath,false);
                dialog.remove();
                particleWrongActor1.remove();
                particleRightActor.remove();
                particleRightActorTwo.remove();
                particleWrongActor2.remove();
                particleSecondWrongActor1.remove();
                particleSecondWrongActor2.remove();
                if (type == NpcResultDialogType.RIGHT_BOX)
                    creatWinDialog();
            }
        });

        showWinLoseContext(dialog, type, button_name, dialog_size_x, dialog_size_y);
        dialog.addActor(okButton);
        window.addActor(dialog);
    }

Additionally, We added a new file to help with our visual implementation. ParticleActor.java In class ParticleActor, the parameter SpriteBatch and time make the role placement for the function like effect.draw, these functions and parameters help us render particle effects, and determine whether our particle effects will have a correct call on our Windowstructure.

package com.deco2800.game.components.npcEvictionMenu;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.g2d.Batch;
import com.badlogic.gdx.graphics.g2d.ParticleEffect;
import com.badlogic.gdx.scenes.scene2d.Actor;


public class ParticleActor extends Actor {
    private ParticleEffect particleEffect;

    public ParticleActor(String path) {
        super();
        particleEffect = new ParticleEffect();
        particleEffect.load(Gdx.files.internal(path), Gdx.files.internal("data/"));
    }

    @Override
    public void setPosition(float x, float y) {
        particleEffect.setPosition(x, y);

    }

    @Override
    public void draw(Batch batch, float parentAlpha) {
        particleEffect.draw(batch);
    }

    @Override
    public void act(float delta) {
        super.act(delta);
        particleEffect.update(delta);

    }

    public void start(){
        particleEffect.start();
    }
}

3. Transition

Add a new window to play the trans animation, bringing players a better game experience. In creatTransDialog, the classes Action/Actions are used to create the animation(for example: MoveToAction(), ParallelAction()). And which animation will be called is determined according to the name of the Npc and the result of the player's choice.

The implementation method of the clue window animation effect is similar to the transition animation. Functions like Actions.fadeOut, Actions.delay, actions.addActionand etc are used to realize the animation of the clues window gradually appearing and fading out.

private void creatTransDialog(String button_name, NpcResultDialogType result) {
        ...
        Image background = new Image(
                resourceService.getAsset(IMAGES_PATH + "transBg.png", Texture.class));

        Image step1 = new Image(resourceService.getAsset(
                IMAGES_PATH + button_name.toLowerCase() + "Trans1.png", Texture.class));
        Image step2 = new Image(resourceService.getAsset(...);
        Image step3 = new Image(resourceService.getAsset(...);
        String resultImg = IMAGES_PATH + "wrongTrans.png";
        if (Objects.equals(button_name, "Ares")) {
            resultImg = IMAGES_PATH + "correctTrans.png";
        }
        Image step4 = new Image(
                resourceService.getAsset(resultImg, Texture.class));
            
        background.setFillParent(true);
        dialog.addActor(background);
        dialog.addActor(step1);
        step1.addAction(Actions.alpha(0));
        window.addActor(dialog);

            
        SequenceAction overallSequence = new SequenceAction();
        overallSequence.addAction(Actions.alpha(0));
        overallSequence.addAction(Actions.fadeIn(1));
        //All animations
        RunnableAction show1 = new RunnableAction();  // Characters appear
        show1.setRunnable(() -> {
            step1.addAction(Actions.fadeIn(1));
        });
        overallSequence.addAction(show1);
        overallSequence.addAction(Actions.delay(1));
        ...
        RunnableAction show3 = new RunnableAction(); // Put down npc and Dragged it out
        show3.setRunnable(() -> {
            step2.remove();
            dialog.addActor(step3);
            SequenceAction actions = new SequenceAction();
            actions.addAction(Actions.delay(1));
            actions.addAction(Actions.moveTo(1000,10, 3));
            actions.addAction(Actions.fadeOut(1));
            step3.addAction(actions);
        ...
        overallSequence.addAction(exit);

               
        background.addAction(overallSequence);
}

Relevent Files

NpcEvictionMenuDisplayNew.java

ParticleActor.java

UML Diagram