All we have by now is a splash screen that displays an static image. Wouldn’t it be nice to add some fading effect on this image? Things like these improve the user experience a lot, so soon we’ll deal with that. As we build our graphical user interface, we need to handle things like selecting options, cliking on buttons, giving focus to an input widget and so on so forth. Can you imagine doing that with images inside image atlases? You’re lucky today. There is a very cool feature of libgdx called scene2d that basically provides useful abstractions for rendering 2D components. Let’s understand it better!

About scene2d

Scene2d is a module of libgdx that eases the management and rendering of 2D components, which are called Actors. These actors live on a tree structure inside a container called Stage. They keep track of many rendering attributes, such as position relative to the parent, color, visibility, dimensions, scale and rotation factors and more. They are also responsible for hit detection.

Examples of actors would be: buttons, text fields, images, enemy targets, coins, the ship we’ll fly, shots and so on. We’ll use scene2d a lot in our game. Also, it’s possible to apply actions on the actors, like translate, rotate, scale and fade actions. If needed, you can also write your own action, but we’ll get to that later.

I’ll try and summarize the main concepts of scene2d below:

  • Actor – A 2D component that knows how to draw itself.
  • Group – An actor that contains other actors.
  • Stage – An engine that requests the actors to be drawn and handles user interaction by distributing touch events to the actors.
  • Action – A function that modifies the actors’ properties over time.

Using scene2d

The first thing to do is setup a Stage where the actors will act. A nice place for it to live is within a screen (each screen with its own stage). These are the steps for managing the stage in our game:

  1. Create a Stage instance on the constructor of AbstractScreen class
  2. Resize its viewport when the screen is resized
  3. Call the Stage’s act and draw methods within the screen’s render method
  4. Dispose the stage within the screen’s dispose method

This is the animation class. The only thing is that you add this class in your core project and call it accordingly.

How to call

in draw()
stage.act(Gdx.graphics.getDeltaTime());

stage.setCamera(camera);

stage.draw();

in show()

new TestingAnimations(TweenMainMenu.this, region,stage,TestingAnimations.FADEOUT);

where region = the particular region you want to animate

stage = this is stage type variable

copy this class into your core project

Example of Animation possibles in scene2D
*Note there are more type of aniamtion is possible, it is only for your understanding, You should create your own.

package com.creatiosoft.twintest;

import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.math.Interpolation;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.actions.Actions;
import com.badlogic.gdx.scenes.scene2d.ui.Image;

public class TestingAnimations {
	/**
	 * Kind of animations
	 */
	final static int FADEOUT = 1, BOUNCE = 2, ELASTICIN = 3, ELASTICOUT = 4,
			CIRCLE = 5, CIRCLEIN = 6, CIRCLEOUT = 7, SWING = 8, SWINGIN = 9,
			SWINGOUT = 10, ROTATEBY = 11;

	final float fadeoutSpeed = .0001f, fadeinSpeed = 1.5f,
			bounceOutamountX = 0, bounceOutamountY = -100,
			bounceOutDuration = 1f;
	/**
	 * boolean value to check that animation is stopped or not
	 */
	static boolean screenSelector = false;
	/**
	 * Specific region on which animation have to perform
	 */
	Image imageRegion;

	public final float elasticInAmountX = 0;

	public final float elasticInAmountY = 100;

	public final float elasticInDuration = 1f;

	public final float elasticOutAmountX = 0;

	public final float elasticOutAmountY = 200;

	public final float elasticOutDuration = 1f;

	public final float circleAmountX = 50;

	public final float circleAmountY = 100;

	public final float circleDuration = 1f;

	public final float circleInAmountX = 50;

	public final float circleInAmountY = 100;

	public final float circleInDuration = 3f;

	public final float swingAmountX = 0;

	public final float swingAmountY = 100;

	public final float swingDuration = 1f;

	public final float swingInAmountX = 0;

	public final float swingInAmountY = 100;

	public final float swingInDuration = 1f;

	public final float swingOutAmountX = 0;

	public final float swingOutAmountY = 100;

	public final float swingOutDuration = 1f;

	public final float rotationAmount = 100;

	public final float rotationDuration = 2f;

	/**
	 * This method contains various animations
	 * @param stage2
	 * @param splashImage2
	 * @param class1
	 * @param tweenSplash
	 * @param tweenSplash
	 * @param nextclass
	 * @param region
	 * @param stage
	 * @param splashGameObj
	 * @param animationNo
	 */
	public TestingAnimations(Screen tweenSplash, TextureRegion region,
			Stage stage, int animationNo)

	{

		imageRegion = new Image(region);
		switch (animationNo) {
		case 1:
			imageRegion.addAction(Actions.sequence(
					Actions.fadeOut(fadeoutSpeed),Actions.fadeIn(fadeinSpeed),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
			break;
		case 2:
			imageRegion.addAction(Actions.sequence(Actions.moveBy(
					bounceOutamountX, bounceOutamountY, bounceOutDuration,
					Interpolation.bounceOut), Actions
					.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
			break;
		case 3:
			imageRegion.addAction(Actions.sequence(
					Actions.moveTo(elasticInAmountX, elasticInAmountY, elasticInDuration, Interpolation.elasticIn),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
		case 4:
			imageRegion.addAction(Actions.sequence(
					Actions.moveBy(elasticOutAmountX, elasticOutAmountY, elasticOutDuration, Interpolation.elasticOut),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
			break;
		case 5:
			imageRegion.addAction(Actions.sequence(
					Actions.moveTo(circleAmountX, circleAmountY, circleDuration, Interpolation.circle),
					Actions.fadeOut(fadeoutSpeed), Actions.fadeIn(fadeinSpeed),

					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);

			break;
		case 6:
			imageRegion.addAction(Actions.sequence(Actions.moveBy(0,100, 0.7f, Interpolation.circleIn),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);

			break;

		case 7:
			imageRegion.addAction(Actions.sequence(
					Actions.fadeIn(fadeinSpeed, Interpolation.circleOut),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
			break;
		case 8:
			imageRegion.addAction(Actions.sequence(
					Actions.moveTo(swingAmountX, swingAmountY, swingDuration, Interpolation.swing),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
			break;
		case 9:
			imageRegion.addAction(Actions.sequence(
					Actions.moveTo(swingInAmountX, swingInAmountY, swingInDuration, Interpolation.swingIn),
					Actions.moveTo(200, 0, 0.9f, Interpolation.swingOut),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
			break;

		case 10:
			imageRegion.addAction(Actions.sequence(
					Actions.moveTo(swingOutAmountX, swingOutAmountY, swingOutDuration, Interpolation.swingOut),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
			break;
		case 11:

			imageRegion.addAction(Actions.sequence(Actions.rotateBy(rotationAmount, rotationDuration),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
			break;
		 case 13:
//		 imageRegion.addAction(Actions.sequence(Actions.rotateTo(10, .1f, Interpolation.circleIn),
//		 Actions.run(onSplashFinishedRunnable)));
//		 stage.addActor(imageRegion);
		 break;
		default:
			imageRegion.addAction(Actions.sequence(
					Actions.moveTo(elasticInAmountX, elasticInAmountY, elasticInDuration, Interpolation.elasticIn),
					Actions.run(onSplashFinishedRunnable)));
			stage.addActor(imageRegion);
			break;
		}

	}
	Runnable onSplashFinishedRunnable = new Runnable() {

		@Override
		public void run() {
			screenSelector = true;
		}
	};

}

 

Post By:p- Nishant Anindya