Animation

Description

Create a seamless bird animation that gracefully flies across the main screen, integrating smoothly with the game's UI. The bird should continuously loop, flying from one side of the screen to the other, enhancing the visual appeal of the menu without disrupting the functionality of the UI elements. This will add a dynamic and engaging background effect to the main menu, maintaining an immersive user experience.

This can be done with other animals following the example below.

Sprite Example

Image Size: 384 × 112 pixels

Atlas File Example

In a file called: BirdMain.atlas it contains...

Code Implementation

This is how the bird is initialised:

    private void addBird() {
        //Add bird animation
        birdAniImage = new Image();
        TextureAtlas birdAtlas = new TextureAtlas("spriteSheets/BirdMain.atlas");
        birdTextures = new Array<>(3);
        for (int frameBird = 1; frameBird <= 3; frameBird++) {
            birdTextures.add(birdAtlas.findRegion("fly" + frameBird));
        }
        TextureRegionDrawable drawable = new TextureRegionDrawable(birdTextures.get(0));
        birdAniImage.setDrawable(drawable);
        birdAniImage.setSize(Gdx.graphics.getWidth() / 12f, Gdx.graphics.getHeight() / 10f);
        birdAniImage.setPosition(Gdx.graphics.getWidth() + 200f, Gdx.graphics.getHeight() * 0.6f);
        stage.addActor(birdAniImage);
    }

This function updates the position when called.

    public void updateBirdFly() {
        birdAniImage.setSize(Gdx.graphics.getWidth() / 12f, Gdx.graphics.getHeight() / 10f);
        // animate the bird left to right
        float birdX = birdAniImage.getX();
        if (birdX < -200 && birdDirection) {
            birdDirection = false;
            birdAniImage.setScale(-1, 1);
        } else if (birdX > Gdx.graphics.getWidth() + 200 && !birdDirection) {
            birdDirection = true;
            birdAniImage.setScale(1, 1);
        }

        if (birdDirection) {
            birdX = birdAniImage.getX() + Gdx.graphics.getDeltaTime() * (-Gdx.graphics.getWidth() / 7f);
        } else {
            birdX = birdAniImage.getX() + Gdx.graphics.getDeltaTime() * (Gdx.graphics.getWidth() / 7f);
        }
        birdAniImage.setPosition(birdX, Gdx.graphics.getHeight() * 0.6f);
    }

This is called in the update method in a class inherited by 'UIComponent'. This method is called frequently. Render functions are similar.

    timer += Gdx.graphics.getDeltaTime();
    if (timer >= 0.25) {
            timer = 0;
            TextureRegionDrawable drawable = new TextureRegionDrawable(birdTextures.get(birdCurrentFrame));
            birdCurrentFrame++;
            if (birdCurrentFrame >= 2) {
                birdCurrentFrame = 0;
            }
            birdAniImage.setDrawable(drawable);
    }

To have a texture over another the texture needs to be added to the stage/table before or after another so it's loaded before or after.

Testing

Visual testing was completed and can be seen here: https://github.com/UQcsse3200/2024-studio-2/wiki/Start-Screen-UI