Implementing Camera Shake

Objective: Learn how to implement a Camera Shake system in Unity.

So we have our player exploding his enemies, we have audio for our game, but it still feels that something could be done to improve it a little further.
What if when our player gets hit, we give the screen a good old shake, to give a bigger immersion in our game ?

In order to process the movement of our Camera, we are going to create a new Script, called CameraShake, and attach to our Camera, since its related to itself.

[SerializeField] private float _duration = 1f;

This variable as the name suggests, is the duration of the shake.

public IEnumerator CameraShakeRoutine()
{
    Vector3 startPosition = transform.position;

    float elapsedTime = 0f;

    while(elapsedTime < _duration)
    {
        elapsedTime += Time.deltaTime;

        transform.position = startPosition + Random.insideUnitSphere;

        yield return null;
    }

    transform.position = startPosition;
}

This is Coroutine for shaking our camera. First we set our initial position for the camera, so we can later return it to its default position. We create a variable that will handle time for us.

We are going to loop through our duration. First we increment our time-handling variable, and we set the position to our camera to its default position and sum a random point inside or on a sphere with radius 1.0.

Our Yield Return Null is just for us to skip to the next frame.

This will loop as our ElapsedTime is lower than the duration. Once its no longer the case, we simply return the camera to its initial position and end the Coroutine.

So now we need to call this Coroutine from our player. Since we know when our player is damaged, we just need access to our CameraShake script in order to execute its Coroutine.

[SerializeField] private CameraShake _cameraShake;

Now we just need to make sure to attached the script to our variable.

Attaching our CameraShake script to our player.

Now we just need to update our TakeDamage player, so when we are damaged, we call the CameraShakeRoutine.

public void TakeDamage()
{
    if (_shieldStrength > 0)
    {
        _shieldStrength--;
        SetShieldState(_shieldStrength);
        return;
    }

    _playerLives--;
    StartCoroutine(_cameraShake.CameraShakeRoutine());
    ActivateWingsEffect(_playerLives);
    _uiManager.UpdateLivesDisplay(_playerLives);

    if (_playerLives <= 0)
    {
        _spawnManager.StopSpawning();
        Destroy(gameObject);
    }
}

Now when our player is damaged, we have an CameraShake effect.

Our Camera Shake effect.

But as you can see, this is very intense and execisse shaking. How about we make it more subtle ?

In order to achieve this, we will use an AnimationCurve. This lets us define how our animation will play out over a time period.

Now back to our CameraShake script. Lets create a variable for our AnimationCurve.

[SerializeField] private AnimationCurve _animationCurve;

Now we have a new variable in our CameraShake script component.

Our Animation Curve variable.

If you click on the curve, it will open the curve editor. We want to make the curve increase up to 0.20f initially and then taper down to 0.

Now we are going to use our AnimationCurve in our CameraShake script.

public IEnumerator CameraShakeRoutine()
{
    Vector3 startPosition = transform.position;

    float elapsedTime = 0f;

    while(elapsedTime < _duration)
    {
        elapsedTime += Time.deltaTime;

        float strength = _animationCurve.Evaluate(elapsedTime / _duration);

        transform.position = startPosition + Random.insideUnitSphere * strength;

        yield return null;
    }

    transform.position = startPosition;
}

Before using our AnimationCurve, we created a strength variable. This is used to calculate the strength of the effect over the duration of the shake. Afterwards we just strength variable in our calculation.

Improved version of our CameraShake.

Now our game has a Camera Shake effect on player hit. Our visuals are looking good!