Animation for MainMenu title

The animation title was added to the game to increase the juiciness. This will make the game more unique and fun to play, having multiple surprises for you to find out on your own. When the title is clicked, an image of the virus's head appears in the centre of the screen. The image then enlarges to the size of the screen before being removed.

Implementation

The animation required the creation of a new class called TitleAnimation which extends the Image class. Prior to any translations, the class must set its origin to be centre of the image. This is because TitleAnimation eventually extends Actor, and the default origin is set to the bottom left corner (0,0). As such, enlarging and rotating the image will occur around this origin. Setting the origin to be the centre of the Actor can be achieved by using the setOrigin() function provided in the Actor class.

int width = 100;
int height = 100;
this.setOrigin(width/2, height/2);

To get the image to enlarge, a new 'ScaleByAction' class can be initialised and the scale and duration can be set using setAmount() and setDuration().

/* Scales the image to twice its original dimensions */
float scale = 2f; 

/* Duration of the animation takes 3.5 seconds */
float duration = 3.5f;

ScaleByAction scaleImage = new ScaleByAction();
scaleImage.setAmount(scale);
scaleImage.setDuration(duration);

A similar approach can be done with RotateToAction class to enable the image to rotate, and its corresponding setRotation() function to set the amount of rotation in degrees.

float duration = 3.5f

RotateToAction rotateImage = new RotateToAction();

/* Rotates the images 360 degrees 4 times, in other words, 4 revolutions */
rotateImage.setRotation(360f * 4f);

/* Sets the duration of the animation to be 3.5 seconds */
rotateImage.setDuration(duration);

Lastly, to allow these isolated translations to occur synchronously, a ParallelAction class can be initialised and the actions added to the TitleAnimation class using addAction() function.

ParallelAction imageActions = new ParallelAction(scaleImage, rotateImage);
TitleAnimation.this.addAction(imageActions);

Interacting with the Animation

To allow the animation to occur, an addListener is added to the title logo of the game. The addListener calls the function titlesAnimation(), which initialises the TitleAnimation object. Further, the listener will increase the number of revolutions by 2 up to a maximum of 20 rotations when the title logo is interacted with consecutively.

private void titlesAnimation() {
   /* Remove the title logo */
   runtimeTitle.remove();

   int imageWidth = 100;
   int imageHeight = 100;
   /** This adds the tiny runtime logo */
   moveAnimationImage(imageWidth, imageHeight);
}


runtimeTitle.addListener(
    new ChangeListener() {
        @Override
        public void changed(ChangeEvent changeEvent, Actor actor) {
           Logger.info("Launching title Animation");
               titlesAnimation();
               if (rotationAmountItr < 20) {
                   rotationAmountItr += 2;
               }
         }
    });