在 Unity 用途廣泛的數值彈簧 – Numeric Springing

今天來聊聊一個很數學、很物理的東西:彈簧。

做遊戲難免會遇到的優化問題,就是玩家操控腳色的流暢性,一個腳色在玩家的操控下走走停停、跑跑跳跳,光是如何讓物件的 position 可以流暢且自然,就是個大課題。或者在外部操控器的訊號跟物件的移動之間的協調,如何讓物件的移動有著 “起承轉合" 般的真實動感,在 VR 遊戲上會大幅影響玩家的舒適度,以及對遊戲的接受度。

有個方式可以處理上述的議題,就是套用 “數值彈簧" (numeric springing) 在物體的移動上,產生起步的加速、停留的減速,減少物體在移動時讓然覺得卡頓或者突兀的感覺。"數值彈簧" 是個我一直想要理解與實作的東西,如今終於動工了,這篇文章分享的是我的作法,以及 數值彈簧 的廣泛用途。

數值彈簧簡介

數值彈簧 (numeric springing) 本身的概念並不複雜,就只是個在數學上進行模擬的彈簧系統,不過利用彈簧系統的特性,可以使得物件的移動非常接近實際物理(啟動時加速、停止時減速),而且不需要使用複雜的物理引擎,沒有力道、質量、加速度等概念需要去調整,便可以達到相當好的效果。有許多數據及研究指出,使用等速的移動方式來進行移動動畫,會讓觀看者產生輕微的不適感(如 3D 暈),有著真實物理的加減速,能延長觀看者沉浸在數位內容中的時間,這方面 數值彈簧 可以在很高程度上產生需要的效果。

數值彈簧的使用範圍很廣泛,這邊我實作的是 阻尼系統 (damping),用 “拖拉" 的方式來移動物件,讓物件的動畫可以更加自然,同時可以排除掉玩家操作上或操控器訊號中的 “震盪"。用個實際例子來比喻,就是類似用彈簧秤拖著一個砝碼的效果,只是這邊的彈簧秤是數據模擬而不可視的,而且彈簧秤的長度大小為 0,物件 (砝碼) 會確實地被拖動到指定位置。

除了用於腳色或物件的移動動畫上,這個阻尼式的彈簧系統還能用於很多地方。例如:

  • 游標的移動:使用搖桿進行遊戲,如果有使用游標的需要時
  • 旋轉動畫的優化:物件旋轉角度的加減速,也可以讓動畫看起來更自然
  • 放大與縮小:透過彈簧的參數設定,也能產生放大過頭再回縮的效果,讓放大縮小的動畫顯得更 “軟Q"
  • Tweening 的優化:google 的 design guideline 中強調,有著加減速的 UI 特效會優於等速移動的特效

阻尼系統的數學原理

主要的實作部分與參考連結中的內容大同小異,不過我還是用自己的方式研究了一下相關的物理及數學。首先,實作數值彈簧主要依賴的便是彈簧的運動方程式,其中 xt 是彈簧系統的原點:

阻尼方程式1

然後為了在 Unity 中使用,將方程式改寫成這樣,其中 x 相當於物件的目前位置,v 是暫存的移動變化量(速度),xt 是希望移動到的位置,Δt 則是 Update 的間隔時間:

阻尼方程式2

數學部分就點到為止,利用上面兩條式子,先解出 Δv 後便可以得到 Δx,以及下一禎畫面該將物件移動到何處了 (x + Δx)。

除了物件的當前狀況(位置及速度),求出來的下一禎位置還跟兩個參數有關,分別是彈簧頻率 (ω) 以及阻尼係數 (ζ) ,兩者的數值通常會在這個阻尼系統宣告時便設定好,後續會影響物件是用怎樣的移動曲線來到達指定的目標位置。彈簧頻率 與彈簧強度正相關,數值越高則代表物件移動到指定位置的時間越短,但是對於震盪的敏感度也會提高;阻尼係數 是一個避免彈簧來回震動的阻力,通常設為 1 是最通用的,依照需要也可改成其他數值,影響如下列及附圖:

  • 阻尼係數 = 1:最通用的設定,又稱為臨界阻尼,物件可以平穩的移動到指定位置。
  • 阻尼係數 > 1:阻力偏大,物件會花上較多時間移動。
  • 阻尼係數 < 1:阻力偏小,不只會快速移動到指定位置,還會移動過頭而來回震盪,再漸漸停止。
  • 阻尼係數 = 0:無阻力,會變成簡諧運動,不會停止。
阻尼類型
由I, Sandycx,創用CC 姓名標示-相同方式分享 3.0,https://commons.wikimedia.org/w/index.php?curid=2325619

Numeric Spring 程式碼

using UnityEngine;
using System.Collections;
public class NumericSpring3D
{
    private Vector3 m_TargetValue;
    private Vector3 m_CurrentValue;
    private Vector3 m_CurrentChange;

    private float m_fDumpingRatio;
    private float m_fFrequency;
    private float m_fSensitivity;

    public NumericSpring3D (Vector3 oriValue, float fFrequency, float fDumpingRatio = 1.0f, float fSensitivity = 0.01f) {
        m_TargetValue = oriValue;
        m_CurrentValue = oriValue;
        m_CurrentChange = new Vector3();

        m_fFrequency = fFrequency;
        m_fDumpingRatio = fDumpingRatio;
        m_fSensitivity = fSensitivity;
    }


    public void SetTargetValue(Vector3 TargetValue) {
        m_TargetValue = TargetValue;
    }

    public Vector3 DumpingUpdate(float fDeltaTime) {
        float ww = m_fFrequency * m_fFrequency;
        float wwt = ww * fDeltaTime;
        float wwtt = wwt * fDeltaTime;
        float f = 1.0f + 2.0f * fDeltaTime * m_fDumpingRatio * m_fFrequency;
        float detInv = 1.0f / (f + wwtt);

        m_CurrentValue = (m_CurrentValue * f + wwtt * m_TargetValue + fDeltaTime * m_CurrentChange) * detInv;
        m_CurrentChange = (m_CurrentChange + wwt * (m_TargetValue - m_CurrentValue)) * detInv;

        if (Vector3.Magnitude(m_CurrentValue - m_TargetValue) &lt; m_fSensitivity) {
            m_CurrentValue = m_TargetValue;
        }
        return m_CurrentValue;
    }
}
  • Line 13:宣告 NumericSpring3D 這個類別時需要給予 物件的初始位置,並設定 彈簧頻率阻尼係數 及 靈敏度
  • 彈簧頻率 (m_fFrequency) 的值越大,物件移動到目標位置的速度就越快,但也越容易受到震動影響。
  • 阻尼係數 (m_fDumpingRatio) 的值預設為 1,通常不用改變,調整的效果於前段描述過了。
  • 靈敏度 (m_fSensitivity) 用於避免無謂的細微運算,當物件距離目標位置小於靈敏度的時候,便結束阻尼運作。
  • Line 24:設定要移動的目標位置,可以隨時隨地設定目標讓阻尼系統跟上動作,不必等到阻尼系統結束動作。
  • Line 28:通常在 Update() 裡呼叫,取得物件應該顯示的位置,達到平滑移動的效果。

 

Numeric Spring 使用範例

using UnityEngine;
using System.Collections;

public class MoveWithSpring : MonoBehaviour {
	private Vector3 m_TargetPos;
	private NumericSpring3D m_Spring;

	void Start () {
		m_TargetPos = transform.localPosition;
		m_Spring = new NumericSpring3D (m_TargetPos, 15);
	}
	
	void Update () {
		// Do something to change m_TargetPos, such as player input.
		// m_TargetPos = ...

		m_Spring.SetTargetValue(m_TargetPos);
		transform.localPosition = m_Spring.DumpingUpdate(Time.deltaTime);
	}
}
  • Line 9~10:宣告類別,同時設定初始位置以及彈簧頻率,如果發現移動好像慢一拍便可以提高頻率試試。
  • Line 17:設定最新的移動目標,不論彈簧運作到何處,是否已經停止都可以設定新的目標。
  • Line 18:取得計算後的顯示位置,並將物件移至該處,得到彈簧系統的移動效果。

 

後話

  • 在我的專案上,套入數值彈簧後,腳色物件的移動轉瞬間平滑了起來,讓我相當開心沒有看走眼,果然數值彈簧是相當重要的一個部分。不過要在移動速度與震盪之間取得一個良好的平衡,需要反覆測試調整彈簧頻率,甚至要加上其他措施。
  • 未來我應該還會繼續研究數值彈簧在各處上的應用與優化,也會有不同的彈簧系統被實做出來,到時候會有更進一步的分享。
  • Unity 的物理引擎中有個 Spring Joint 的功能,在某些部分與本文範例的目的是相似的,有興趣的人可以自行研究看看。我之所以另外實作一個類別,是因為我想將這個類別運用在各處,不只是移動物件,旋轉或縮放物件都可以使用它。
  • 另外還有 Vector3.SmoothDamp() 這個函式也有類似的功能。

參考

附錄:float 版本的 Numeric Spring

上面的 NumericSpring3D 是使用 Vector3 作為核心,同時也可用於 Vector2 也沒問題,不過要用於單一數值就有點過頭了,所以有了下方的一維版本,以 float 作為核心。

using UnityEngine;
using System.Collections;

public class NumericSpring
{
    private float m_TargetValue;
    private float m_CurrentValue;
    private float m_CurrentChange;

    private float m_fDumpingRatio;
    private float m_fFrequency;
    private float m_fSensitivity;

    public NumericSpring (float oriValue, float fFrequency, float fDumpingRatio = 1.0f, float fSensitivity = 0.01f) {
        m_TargetValue = oriValue;
        m_CurrentValue = oriValue;
        m_CurrentChange = 0;

        m_fFrequency = fFrequency;
        m_fDumpingRatio = fDumpingRatio;
        m_fSensitivity = fSensitivity;
    }


    public void SetTargetValue(float TargetValue) {
        m_TargetValue = TargetValue;
    }

    public float DumpingUpdate(float fDeltaTime) {
        float ww = m_fFrequency * m_fFrequency;
        float wwt = ww * fDeltaTime;
        float wwtt = wwt * fDeltaTime;
        float f = 1.0f + 2.0f * fDeltaTime * m_fDumpingRatio * m_fFrequency;
        float detInv = 1.0f / (f + wwtt);

        m_CurrentValue = (m_CurrentValue * f + wwtt * m_TargetValue + fDeltaTime * m_CurrentChange) * detInv;
        m_CurrentChange = (m_CurrentChange + wwt * (m_TargetValue - m_CurrentValue)) * detInv;

        if (Mathf.Abs(m_CurrentValue - m_TargetValue) &lt; m_fSensitivity) {
            m_CurrentValue = m_TargetValue;
        }
        return m_CurrentValue;
    }
}
廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s