The SceneAnimator lets you easily create animations for credits. It could theoretically also be used for cinematic sequences, altho it has not been tested for that yet.

The major work you need to do is to create a JSON file that describes everything. The actual code-part is quite small.

Example Credits:

• GDX-Test
• Survival of the Fattest
• Pneumatic-Man

The JSON file structure

This is the basic structure of the JSON file:

{
    "timeFactor": 1.0,
    "textStyles" : {...},
    "paths" : {...},
    "queues": {...}
}

timeFactor can be used to make the whole thing play slower or faster (makes it easier to test things). It is optional.

textStyles, paths and queues are maps that I will explain in the following sections.

textStyles

With this you can put a name on text-styles you want to use. A Text-Style is a combination of a color, a font and an alignment:

"textStyles" : {
	"title": { "color": "F8BB08", "font": "credits-Title-font", "align": "center" },
	"name": { "color": "FFFFFF", "font": "credits-Name-font", "align": "center" }
},

• color is a hex-color value in the form [AA]RRGGBB (i.e. AA for alpha is optional)
• font is the name of a font as set in the UI-Skins JSON file.
• align can be any of left, center or right

You can reference these styles later in the queues section

paths

With this you can define paths, on which your texts, images or animations will move.

"paths" : {
	"left": {
		"type": "linear",
		"destinations": [
			{"x": -1200, "y": 18, "speed": 1500 },
			{"x": 312, "y": 100, "speed": 100 },
			{"x": 780, "y": 568, "speed": 1500 },
			{"x": 810, "y": 868, "speed": 1500 }
		]
	},
	...
},

• type can be currently be linear. catmull_rom (curved paths) is on the todo-list.
• destinations is a list of points an object must pass.
  • x, y start in the lower left corner, as any UI element in LibGDX.
  • speed defines how fast it moves from this point to the next point

queues

This is where everything comes together. Imagine a queue as the director, which puts objects on their paths at specific times and in a specific order.

Again, you can specify multiple queues and give them names:

"queues": {
	"texts": {
		"layer": 0,
		"time": 0,
		"next": "...",
		"finalNext": "...",
		"items" : [...],
		"animations": [...]
	},
	...
}

• layer is a z-index, so you can say which items belong on the foreground and which in the background.
• time is an offset (milliseconds) at which the queue should start playing.
  • Set it to -1 if you want to start the queue when another queue ends.
• next (optional) is a queue name to trigger, when the last item in this queue has been put on its path.
• finalNext (optional) is a queue name to trigger, when the last item in this queue has finished its path.
• items is a list of objects to be spawned (explained in the next section)
• animations is a list of animations/effects that can be triggered on certain items (explained in the section below)

items

Example:

"items" : [
	{ "type": "text", "path" : "text", "group" : "title", "style" : "title_center", "text": "GameDevWeek Codebase", "delay": "0" },
	...
],

Every item can have the following properties:

• type can be any of text, texture, animation
• path (string, optional): The name of the path to follow
• group (string, optional): A group name, which can later be used in the animations section to identify certain items
• opacity (float, optional): An opacity value (0 - 1.0)
• delay (int): How many milliseconds after the last item spawn this item should be spawned
• x, y (int, optional): If you don't want the item to move along a path, but stay fixed at the position, specify these instead of path
• flipX, flipY (boolean, optional): Flip texture/animation on x or y axis.

Text items can additionally have the following properties:

• style (string): The text-style, as defined in the textStyles section
• text (string): The text to be rendered

Texture and animation items can additionally have the following properties:

• resource (string): The name of the animation or texture (as you would use for the assetManager)
• scale (float): A factor to size the item
• angle (float): Rotate the item in degrees
• oriented (bool): set to true if you want the item to always look in the direction of the path

animations

This allows to change items at a specified time:

• Texture and animation items can change their resource.
• Text can do some fancy typing or explosion effects

Example:

"animations": [
	{ "time": 1000, "animation": "type", "animationTime": 80, "group": "btw" },
	...
]  

Every animation can have the following properties:

• time (int): A time offset in milliseconds when to start this animation (i.e. how long an item has been on its path)
• animation (string):
  • a resource name for texture or animation items
  • for text items any of the following:
    • fade_in, fade_out: Fade opacity from 0 to 1 or vice versa
    • type: the text will gain one character at a time until complete.
    • type_instant: the text will be instantly written (in case it was untyped before)
    • untype: the text will remove one character at a time until empty.
    • untype_instant: the text will instantly be empty. (useful to hide text until another animation starts)
    • construct: All characters of the text will move from random positions(as explained below) to their final positions at the same time.
    • construct_type: Same as above, but it will happen one character at a time.
    • pause_path: Stop movement for the given time.
    • sound/<any_sound_name>: Play a sound using its key (from the json file).
• group (string): A group name to specify which item types should be processed by this animation (see the group definition in the items section. Use "*" to process all items.

Text animations can additionally have the following properties:

• animationTime (int): Milliseconds. Depends on the animation type:
  • fade_in, fade_out: The time it takes to fade.
  • type, untype, construct_type: The time it takes to type/untype one character.
  • construct: The time it takes to move all characters into place.
  • pause_path: Stop movement for the given time. If animationTime is negative, it will wait until sceneAnimator.abortPausePaths() is called. This can be used for example to wait for user input to continue.

Text animations that use construct or construct_type can additionally have the following properties:

• minRadius, maxRadius (int)
• minAngle, maxAngle (int): In degrees
• minCurveAngle, maxCurveAngle (int): In degrees
• trailStepTime (int, optional): In Milliseconds
• trailMaxSteps (int, optional)

Explanation: Characters start at a random distance from their final position. The range of this distance can be set with minRadius/maxRadius.

The characters will then be positioned randomly at this random radius using a random angle. I.e. if you want the characters to come from the bottom, you set minAngle and maxAngle to -90. (0 is right, top is 90, left is 180).

Furthermore, to make the characters not move in a straight path, you can specify a random curve angle (minCurveAngle and maxCurveAngle) to create a control point for a quadratic bezier curve.

If you want to, you can create a trail for the characters. i.e. the character will drawn a couple of times. Use trailMaxSteps to specify how many additional characters should be rendered and trailStepTime to specify how long they should be visible.

SceneAnimatorListener

When the animation is completely done (all queues have finished), onSceneEnd of the SceneAnimatorListener will be called. This can be used to reset the animation (for credits) or to continue to the game (for intro animations)