GUIs: Transitions

Overview

Transitions are used for smooth window movement and all types of text/material fading, either linear or non-linear change can be used.

Transitions are valid for float based properties like float/vec2/vec3/vec4. Here is the transition function for a vec4:

vec4  transition( [start transition], [end transition], [time for transition] );

For an accelerating transition the function is:

vec4  transition( [start transition], [end transition], [time for transition], [acceleration] );

Here's an example where a transition is used to fade the "Flyer Drone deactivated" in and out. The text will be shown whenever the recharge bar has fully charged while flying to flyer drone:

windowDef flyerhiveDeactivate {
	_huge_text_props
	properties {
		handle localizedText= localize( "game/flyerhive/deactivated" );
		rect rect 			= 0, -16, SCREEN_WIDTH, 16;
		float timeExpired	= player.scoreboardActive == true || player.commandmapstate != 0
					|| player.endGame == true || player.endGameCamera == true 
					|| gui.vehicleWeaponEMPInfo.visible == true
					|| gui.time >= ( 1000 * globals.gameHud.flyerhiveEndTime );
	}
	events {
		onCreate {
			foreColor.a = 0;
		}
		onPropertyChanged "timeExpired" {
			if( timeExpired ) {
				// Time has expired, fade out the text by transitioning
				// the alpha value to 0 over 300 milliseconds.
				foreColor.a = transition( foreColor.a, 0, 300 );
			} else {
				// Pop in the text.
				foreColor.a = 1;
			}
		}
	}
}

Accelerating Transition

The most difficult part to understand in a transition is the optional acceleration parameter. The message box you see with a small yellow rectangle moving back and forth is a good example of an accelerating transition (in guis/mainmenu/components/progress.include):

// Moving the window towards the right
gui.NameParm.offset = transition( 0, gui.NameParm.rect.w - ( gui.NameParm.progressRect.w + 4 ), 2500, "0.2, 0.8" );

and

// Moving the window towards the left.
gui.NameParm.offset = transition( gui.NameParm.offset, 0, 2500, "0.2, 0.8" );

The first acceleration parameter is the percentage of time spent accelerating, the second parameter is the percentage at which it should start decelerating. This means it will accelerate for 20% of the 2500 milliseconds and decelerate for 1 - 0.8 = 20% of the time. 60% ( 1 - ( 0.2 + ( 1 - 0.8 ) ) ) of the time is spent moving at constant speed.

List Transitions

Lists have some additional properties for each item in its list that can be used for making transitions to the forecolor/backcolor or up to 3 additional properties. These are often used for highlighting the text in an item or column header when the mouse moves over it.

Example of transitioning the foreColor for an item on mouse over (in guis/common/stats/achievements.include):

onEnterItem {
	item.x = gui.scriptGetFloatResult();
	item.y = gui.scriptGetFloatResult();
	scratchColor = getItemTransitionVec4Result( LTP_FORECOLOR, foreColor, item.x, item.y );
	transitionItemVec4( LTP_FORECOLOR, scratchColor, "1,1,1,1", ACTIVATE_TRANSITION_TIME, "", item.x, item.y );
	gui.playSound( "boop" );
}

Transition related list functions:

• transitionItemVec4
• getItemTransitionVec4Result
• transitionColumnVec4
• getColumnTransitionVec4Result
• clearTransitions