To play cutscenes during gameplay, follow these steps:
- Import your cutscene. Make sure to import the character animation as a separate file.
- Go to the cutscene asset's Import Settings, Animation tab.
- Rename the Default Take animation to Cutscene.
- Create a new Animation Clip, choose the Default Take as the source, and set the Start frame to 0 and the End frame to 1. Call this animation CutsceneIdle and make it loop.
- Place the cutscene game object (in our example this is the Ball game object) and the character in the scene.
- Follow the Using root motion to steer a character recipe from Chapter 4, Character Movement. This way, you will have a moving character you can control.
- Create an Animator Controller for the cutscene.
- Make the CutsceneIdle the default animation.
- Drag and drop the Cutscene animation.
- Create a Trigger parameter and name it Cutscene.
- Make a transition from CutsceneIdle to Cutscene animation using the Cutscene Trigger parameter. Set the Has Exit Time to false and the Transition Duration to 0.1 seconds.
- Assign the Player tag to the character.
- Add the cutscene animation to the character's Animator Controller. In our example, the animation is called SoccerKick.
- Add a Cutscene Trigger parameter to the character's controller.
- Create a transition from Any State to SoccerKick with the Cutscene Trigger as the condition. Has Exit Time should be set to false and Transition Duration set to around 0.5 seconds.
- Add another transition from SoccerKick to Idle, with no conditions, and Has Exit Time set to true. Transition Duration should also be set to around 0.5 seconds.
- Create a new C# script and call it CutsceneTrigger.cs. In this script, we have the void OnTriggerEnter() and void OnTriggerExit() functions. Their main task is to set the bool inTrigger flag. The OnTriggerEnter() function also stores the reference to the player's game object:
void OnTriggerEnter (Collider other) {
if (other.gameObject.CompareTag("Player"))
{
player = other.gameObject;
inTrigger = true;
}
}
void OnTriggerExit(Collider other)
{
if (other.gameObject.CompareTag("Player"))
{
inTrigger = false;
}
}
- We check the inTrigger flag's value in the Update() function. If it is set to true, the player can press the space bar to start the cutscene. This starts a coroutine to match the character's position and rotation with the trigger's position and rotation. This position and rotation is the one our character should have when the cutscene starts. We also enable or disable a hint, the reference to which we store in the public GameObject onScreenInfo variable. When the player starts the cutscene, we turn off the Box Collider component to disable the trigger:
if (inTrigger)
{
onScreenInfo.SetActive(true);
if (Input.GetKeyDown(KeyCode.Space))
{
GetComponent<BoxCollider>().enabled = false;
inTrigger = false;
StartCoroutine("StartCutscene");
}
}
else
{
onScreenInfo.SetActive(false);
}
- In the IEnumerator StartCutscene() coroutine, we first set the Rigidbody component of the character to Kinematic. This way, we turn off the physics simulation. Then we interpolate the player's position and rotation so that it matches the position and rotation of the trigger. If it is close enough, we set the Cutscene Trigger in the player's and cutscene's Animator component to play the animation simultaneously on both objects:
IEnumerator StartCutscene()
{
player.GetComponent<Rigidbody>().isKinematic = true;
bool positionAdjusted = false;
bool rotationAdjusted = false;
while(true)
{
yield return null;
if ((player.transform.position -
transform.position).magnitude <= 0.01f)
{
positionAdjusted = true;
}
else
{
player.transform.position =
Vector3.Lerp(player.transform.position,
transform.position, positionAdjustmentSpeed
* Time.deltaTime);
}
if (Vector3.Angle(player.transform.forward,
transform.forward) <= 1f)
{
rotationAdjusted = true;
}
else
{
player.transform.rotation =
Quaternion.Lerp(player.transform.rotation,
transform.rotation, positionAdjustmentSpeed
* Time.deltaTime);
}
if (positionAdjusted && rotationAdjusted)
{
break;
}
}
player.GetComponent<Animator>
().SetTrigger(animationTrigger);
cutsceneAnimator.SetTrigger(animationTrigger);
}
- Create a new empty game object and name it CutsceneTrigger. Add a Box Collider component to it and set it to Is Trigger.
- Place it in the exact spot at which the character has to be in the cutscene. Rotate it the same way the character needs to be rotated. You may use an empty object in the cutscene (exported from the 3D package) to make it easier.
- Assign the CutsceneTrigger.cs script to the CutsceneTrigger game object.
- Create a hint UI Text and assign it to the On Screen Info field of the Cutscene Trigger component.
- Assign the cutscene game object's Animator component to the CutsceneAnimator field of the Cutscene Trigger component.
- Create another C# script and call it SetKinematic.cs. In this script, we have just one public void NotKinematic() function, in which we set the Rigidbody component to non-kinematic:
public void NotKinematic()
{
GetComponent<Rigidbody>().isKinematic = false;
}
- Attach the script to the character.
- With the character selected, open the Animation View.
- Select the SoccerKick animation.
- Add an Animation Event near the end of the animation and choose NotKinematic(). This will make the character react to physics again.
- Play the game, approach the trigger, and press the space bar to see the effect.