GUIs: Timelines

Overview

Just as in Doom 3 timelines can be used to trigger events regularly or at specific times. They can be stopped, started and reset to specific times. There may also be defined multiple timelines for the same window or GUI and they can be given names for referencing.

They are often used to update a window (for example a list) at regular intervals, or call a set of color/window movement transitions for more complex animations.

A timeline may be added to a window by specifying a timeline block:

timeline [optional name] {
	// Properties may be defined for use in a timeline
	properties {
		[properties]
	}
	// One onTime block for every time we want to handle something
	// at a specific time.
	onTime [time after start] {
		[do stuff]
	}
}

If a name is not given the timeline is given the name default.

Timeline

A timeline may have its own properties block. Two properties are always defined for a block:

• float active - True if the timeline is currently active. Can be set to false in the properties to have the timeline start deactivated.
• string name -Read only property, "default" if no name is specified for the timeline.

Properties may be accessed with

timeline.[timeline name].[property name]

The timeline may be started/stopped from any event like this:

timeline.default.active = false; // stops the timeline

It's useful to sometimes reset the timeline to a specific time, often because it's supposed to be looping:

timeline.default.resetTime( [time to reset to] );

Here the foreColor will transition between two values over the course of a second, flashes the "Deploy MCP" text when you are at the goal:

windowDef mcpDeployLabel {
	properties { ... }
	events { ... }
	// Define a timeline for the window.
	timeline /* [optional timeline name] */ {
		// optionally set up a properties block for the timeline
		properties { ... }
		// When the timeline is started, start changing the color
		ontime 0 {
			// Transition the foreColor (the text color in this example)
			foreColor = transition( "1, 1, 1, 1", "0.9,0.8,0.7,0.8", 500 );
		}
		// After 500 milliseconds change the color back to the original value
		ontime 500 {
			// Transition the foreColor back to the original (the text color in this example)
			foreColor = transition( "0.9,0.8,0.7,0.8", "1, 1, 1, 1", 500 );
		}
		// After a second the color is back to where it was a second ago.
		// Set the time back to 0.
		ontime 1000 {
			// the name of the timeline is in this case default,
			// but would be the name of the timeline if it had one.
			timeline.default.resetTime( 0 );
		}
	}		
}