「Unity3D」(7)协程使用3种算法实现CameraShake震屏_unity camareshake实现

本文主要讨论CameraShake震屏的实现思路，但不仅限于震屏，震动算法可以震动任意属性，比如Position，Scale，Rotation，Color等等。

思路

震动，就是围绕某个固定点的波动，最后在回归固定点的过程。这个波动的模拟，有千千万万种，这里主要介绍3种，Random(随机)，Periodic(周期函数Sin，Cos)，PerlinNoise(柏林噪声)。

另外，在视觉预期上，震动过程是一个衰减的过程，所以在波动回归的时候需要加入渐进衰减的模拟，这样就会有更好的效果。

实现

同样，震动的实现，也有很多种，这里主要介绍使用协程的方式。我们首先实现一个协程函数。

public static IEnumerator ShakeRoutine
(
    float           magnitude, // 震动幅度
    float           speed,     // 震动速度
    float           duration,  // 震动时间
    Func<float>     OnGetOriginal, // 获取固定点坐标
    Action<float>   OnShake,       // 获取震动数值
    ShakeType       shakeType  = ShakeType.Smooth, // 震动类型
    Action          OnComplete = null // 完成回调
)
{
    // 震动耗时
    var elapsed  = 0.0f;
    // 随机起始点
    var random   = UnityEngine.Random.Range(-1234.5f, 1234.5f);
    // 获得固定点
    var original = OnGetOriginal();

    while (elapsed < duration) 
    {
        elapsed    += Time.deltaTime;          
        var percent = elapsed / duration;   
        // 当前波动
        var rps     = random + percent * speed;

        // 波动映射到[-1, 1]
        float range;

        switch (shakeType)
        {
            case ShakeType.Smooth:
                range = Mathf.Sin(rps) + Mathf.Cos(rps);
                break;

            case ShakeType.PerlinNoise:
                range = Mathf.PerlinNoise(rps, rps);
                break;

            default:
                range = 0.0f;
                break;
        }

        // 震动总时间的50%后开始衰减
        if (percent < 0.5f)
        {
            OnShake(range * magnitude + original);
        }
        else 
        {
            // 计算衰减
            OnShake(range * magnitude * (2.0f * (1.0f - percent)) + original);
        }

        yield return null;
    }

    if (OnComplete != null)
    {
        // 完成回调
        OnComplete();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

为了通用性协程构造比较繁琐，如果只针对Camera的震动可以写的很简洁。下面解读一下实现：

• OnGetOriginal 为了获得震动的固定点，可以返回PositionX，ScaleY，ColorRed，等等。围绕这个固定点进行震动。

• OnShake，每一帧协程计算出震动后数值，用于设置到target对象上。

• 协程每一帧计算一次震动，直到duration耗尽，回调OnComplete。

• range 会根据不同的波动算法，映射到[-1, 1]区间，最后乘以衰减和振幅，就得到了震动后的数值。

Random 波动

代码并没有体现，因为测试发现，random在振幅比较大的时候，效果不太好，但如果振幅很小很小还是不错的。下面给出Random的写法。

// 依然需要映射到[-1, 1]
range = UnityEngine.Random.value * 2.0f - 1.0f;
1
2

Periodic 波动

这里我使用Mathf.Cos + Mathf.Sin的方式，其实使用Mathf.Cos或Mathf.Sin也是可以的，只不过这里叠加会有加速的效果。周期顾名思义，不会像随机那样无序，单个数值会有震荡的效果，二维数值有转圈的效果。

PerlinNoise 波动

Unity内置实现了二维的PerlinNoise算法，其原理是在一个二维纹理上取值，效果会比Random来的平滑，一般应用于地形，水波纹等自然界元素的模拟。这里体现了一种用法，可以使用不同的策略去得到PerlinNoise的坐标。其坐标是类似Repeat模式的UV坐标。

如何使用

首先利用这个协程函数，构建一个协程执行函数。

public static void Shake
(
    float         magnitude, 
    float         speed, 
    float         duration, 
    Func<float>   OnGetOriginal,
    Action<float> OnShake, 
    ShakeType     shakeType = ShakeType.Smooth,
    Action        OnComplete = null
)
{
    CoroutineExecutor.StartCoroutineTask(ShakeRoutine(magnitude, speed, duration, OnGetOriginal, OnShake, shakeType, OnComplete));
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这里我使用了协程管理器，也可以继承MonoBehaviour使用自身的协程启动。然后，在看如何使用。

public static void ShakePositionX
(
    this  Transform     transform, 
    float               magnitude, 
    float               speed, 
    float               duration, 
    ShakeTool.ShakeType shakeType  = ShakeTool.ShakeType.Smooth,
    Action              OnComplete = null
)
{
    ShakeTool.Shake
    (
        magnitude, 
        speed, 
        duration,
        ()  => transform.position.x,
        (x) => transform.SetPositionX(x), 
        shakeType, 
        OnComplete
    );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这里进行了扩展，可以方便的直接使用transform来做ShakePositionX，比如：

transform.ShakePositionX(10.0f, 100f, 1.5f, ShakeTool.ShakeType.Smooth);
1

更多定制

这里Shake只是震动了一个数值，当然也可以同时震动2或3个或更多。ShakePositionX只是扩展了position x，当然也可以扩展为 xy 或 xyz，或是Scale和Rotation。比如，如果震动XY可以这么写：

public static IEnumerator ShakeRoutine
(
    float           magnitude, 
    float           speed,
    float           duration, 
    Func<Vector2>   OnGetOriginal,
    Action<Vector2> OnShake, 
    ShakeType       shakeType  = ShakeType.Smooth,
    Action          OnComplete = null
)
{
    var elapsed  = 0.0f; 
    var random1  = UnityEngine.Random.Range(-RandomRange, RandomRange);
    var random2  = UnityEngine.Random.Range(-RandomRange, RandomRange);
    var original = OnGetOriginal();

    while (elapsed < duration) 
    {
        elapsed    += Time.deltaTime;          
        var percent = elapsed / duration;   
        var ps      = percent   * speed;

        // map to [-1, 1]
        float range1;
        float range2;

        switch (shakeType)
        {
            case ShakeType.Smooth:
                range1 = Mathf.Sin(random1 + ps);
                range2 = Mathf.Cos(random2 + ps);
                break;

            case ShakeType.PerlinNoise:
                range1 = Mathf.PerlinNoise(random1 + ps, 0.0f);
                range2 = Mathf.PerlinNoise(0.0f, random2 + ps);
                break;

            default:
                range1 = 0.0f;
                range2 = 0.0f;
                break;
        }

        // reduce shake start from 50% duration
        if (percent < 0.5f)
        {
            OnShake(new Vector2(range1 * magnitude, range2 * magnitude) + original);
        }
        else
        {
            var magDecay = magnitude * (2.0f * (1.0f - percent));
            OnShake(new Vector2(range1 * magDecay, range2 * magDecay) + original);
        }

        yield return null;
    }

    if (OnComplete != null)
    {
        OnComplete();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

可以看到 OnGetOriginal, OnShake参数由float变成了Vector2，更多参数同理。

public static void ShakePositionXY
(
    this  Transform     transform, 
    float               magnitude, 
    float               speed, 
    float               duration, 
    ShakeTool.ShakeType shakeType  = ShakeTool.ShakeType.Smooth,
    Action              OnComplete = null
)
{
    ShakeTool.ShakeV2
    (
        magnitude, 
        speed, 
        duration, 
        ()   => (Vector2) transform.position,
        (v2) => transform.SetPositionXY(v2),
        shakeType, 
        OnComplete
    );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---

「Shake Shake」