不懂物理的前端不是好的游戲開發者（二）—— 物理引擎的學習之路

前言

繼第一篇文章之后已經過去了兩個月，在上一篇文章中介紹了物理引擎是什么，需要掌握什么樣子的基礎知識才能繼續往下進行開發，在這樣的基礎上，我們展開了第二篇，探索物理引擎的學習之路，在我們的日常開發當中，自然是用不到非常復雜的物理系統，大部分游戲都是基于剛體，再在游戲場景下進行一定的適配，最后模擬出物體在我們常規認識中的運動狀態，使我們覺得這些位移，形變看起來都是理所當然，順應規律的，其中最出名的手機游戲莫過于《憤怒的小鳥》了，那么我們如何達到《憤怒的小鳥》中的效果呢？讓我們一步步來探索，

粒子在游戲中的運動

首先我們來看一下這樣的一個場景，在現實中，一個普通子彈的速度大約是 300m/s，接近音速，如果將其放在游戲當中，依然按照正常的速度，那么射出去的子彈只會在一瞬間消失不見，那射擊游戲就成了玩家完全無法觀察到彈道的游戲，橫版過關類的游戲也變成了只看得到槍口火焰，但是看不到彈幕的恐怖游戲，

那作為“子彈”的小鳥也是同理，如果是真的按照在空中飛行的速度去計算，那么我們只能看到一個矯健的身影一閃而過，然后就像子彈一樣打穿建筑飛往遠方了，這顯然不是我們想要的效果，

那么要如何解決這樣的問題呢？顯而易見的，我們應該降低游戲中高速物體的速度，一般來說，根據地圖的大小，可以將速度限定在 5-25m/s，那么速度的問題解決了，但是當一個物體的速度從 300 降低到了 25 的時候，它的能量，碰撞的現象，都會有很大的不同，當一個慢悠悠的小鳥撞到一堵墻的時候，可能只會默默掉下來，而墻表示：“剛才什么東西給我撓了一下癢？”，那如何去解決這樣的問題？

首先我們都知道動能和速度以及質量的關系：$E=\frac{1}{2}mv^2$，那么當速度下降的時候，我們就需要增加質量，兩者的關系為，質量上升的比例等于速度下降的比例，也就是 $\Delta m$ = $\Delta s^2$，那當一個質量為 5g，速度 300m/s 的子彈加速度降低到 25m/s 的時候，質量應該上升 144 倍，變為 720g，這樣我們便解決了速度降低導致能量降低的問題，此時我們的小鳥已經從一個普普通通的小雞仔變成了一個結實有力的肌肉猛鳥，只需要動一動，就能把野豬撞飛，

但是又出現了新的問題，速度降低隨之而來的是拋物線的變形，原本可以飛更遠的，但是由于初速度過小，沒多遠就下墜到地面了，這下我們的肌肉猛鳥又變成了一個大秤砣，那這個問題如何解決呢？那就是將拋物線恢復成原來的樣子，

當一個物體在做斜拋或者平拋運動時，他的初速度決定了拋物線的形狀，其中高度和垂直方向的初速度決定了重力的作用時間，水平方向的初速度決定了水平方向的位移，當速度降低時，重力作用的時間和水平方向上的位移都會隨之變化，導致軌跡和之前大不相同，我們知道水平方向的位移：$x = v_{水平}t$，而垂直方向上的位移: $y = v_{垂直}t - \frac{1}{2}gt^2$，其中把 t 替換掉，就可以得到拋物線方程，$y = \frac{v_{垂直}}{v_{水平}}x - \frac{1}{2}\frac{g}{v_{水平}^2}x2$，其中 $\frac{v_{垂直}}{v_{水平}}$ 是物體發射的角度決定的，是一個固定值，那么影響曲線的就是 $\frac{g}{v_{水平}^2}$, 由此我們可以知道重力加速度的轉換公式為 $g_b = \frac{g_{normal}}{\Delta s^2}$ ，但是事實情況是這樣嗎？并不是，因為我們減少速度的時候，我們的場景其實也在縮小，相同時間下原本300米的距離縮短到了25米，所以 y 和 x 需要有一個同樣的縮放比例才能得到一樣形狀的拋物線，那么我們可以得出結論，其實真正的重力加速度轉換公式應該為$g_b = \frac{g_{normal}}{\Delta s}$（此處略去一些聯立的無聊等式），

游戲中的合力

力累加器

接觸過簡單的力學的都知道，當多個力作用在一個物體上的時候，我們可以通過合力與分力，將復雜的多種力的結合處理為我們方便計算的幾個方向上的力，

首先我們明確一點，合力是多個力在矢量層面的疊加，那么就需要用到矢量的加減法，其中最常用的是平行四邊形法則，而平行四邊形法則在坐標軸里的處理十分的簡單，就是將兩個矢量的坐標相加即可，但是力本身并不一定是恒力，比如說空氣阻力，可能隨著速度的增加而增加；浮力，隨著進入水中體積的增加而增加，所以我們需要時刻計算合力，那么在游戲中，就是在每一幀的時候都進行一次計算，

我們為此可以創建一個類，專門用于合力，稱其為力累加器，累加器的概念在面向物件編程和函式式編程里面使用的比較多，在 js 里面也有對應的運行方法—— Array.reduce，它可以直接將陣列中的元素進行累計，此處的累計不僅僅代表累加，可以是任何操作，那么事情就變得簡單起來，我們只需要將力都匯總在一個陣列中，并且給一個累加的函式即可，我們以二維平面為例來看一下：

class ForceAccum () {
    constructor () { // 初始化力的陣列
        this.forceArray = []
    }

    addForce(force) { // 添加力到陣列中
        this.forceArray.push(force)
    }
    
    clearForceAccum () { // 清除陣列用于下一次計算
        this.forceArray = []
    }
    
    forceReducer (prevForce, currentForce) { // 計算合力
        const x = prevForce.x + currentForce.x
        const y = prevForce.y + currentForce.y
        return {x, y}
    }
    
    getForce () { //獲取合力
        const force = this.forceArray.reduce(forceReducer)
        return force
    }
}

const forceAccum = new ForceAccum() //新建一個力累加器
forrceAccum.addForce(重力) // 增加重力
forrceAccum.addForce(阻力) // 增加阻力
forrceAccum.addForce(推力) // 增加推力
const force = forrceAccum.getForce() //計算合力
forrceAccum.clearForceAccum() // 清除陣列用于下次計算

以上就是最簡單的力累加器和其應用，往系統中增加力，最后獲取合力，獲取到合力之后我們便可以根據牛二定律得到加速度，最后根據加速度積分得到速度，然后根據速度積分得到位置，然后我們每一幀都重復以上操作即可，

而我們在《憤怒的小鳥》里面需要什么力呢？可以看出需要的是一個彈弓的彈力導致的推力以及自身的重力，那么我們只需要將這兩個力加到我們的力累加器中即可計算出我們的肌肉猛鳥受到的力以及在水平和垂直方向上的分力，

而我們在實際的運動中，其實只有一個重力在起作用（不計空氣阻力），推力在彈弓的彈性形變中最后轉換成了飛行的初速度，所以如果為了簡化計算，可以直接將彈簧的推力轉換成初速度，當然也可以通過沖量和動量進行計算了，

那這樣的每個力我們應該如何在代碼中得到然后計算呢？這就需要用到另外一個東西——力發生器，

力發生器

力發生器，顧名思義，創造力的裝置，因為我們在運動中，存在著各種各樣的力，有的力是恒定的，例如質量不變時的重力；有些力是根據場景變化的，例如速度不斷變化時的空氣阻力；而有些力是根據玩家操作來變化的，比如說推力，彈力等，

那么其實我們可以根據這些力的特性，為它們注冊對應的力發生器，這樣可以更好的管理它們，而力發生器的原理非常簡單，我們通過一個類來進行創建，但是各個力的特性不同，所以我們需要針對不同的力進行處理，這里有兩種不同的方法，一種是將所有需要包括的力都寫在一個類中，需要創建力的時候，使用對應的方法；另一種則是將生成力的方法和引數傳入一個類中，最后回傳需要的力，或者直接將力注入到力累加器中，后者的靈活性會使得我們在復雜的力學系統中更好的控制我們的系統，

class ForceRegister () {
    constructor (forceAccum,func, param) {
        this.forceAccum = forceAccum
        this.func = func
        this.param = param
        this.force = null
    }
    
    createForce () { // 回傳需要的力
        this.force = this.func(this.param)
        return this.force
    }
    
    addForce () { // 直接將力注入力累加器
        this.createForce()
        forrceAccum.addForce(this.force)
    }
}

上述代碼中的 func，param 就是我們需要生成的力的方法和引數，例如重力，重力只需要輸入物體質量（或者質量的倒數）和重力加速度，就可以得到對應的力 —— { x:0, y: mg }，阻力也是同理，阻力方程為 $\displaystyle F_{D},=,{\tfrac {1}{2}},\rho ,v^{2},C_{D},A$，其中的引數我們先不去細究，簡化一下可以得到 $F_{D} = av^2$,a 為某個條件下的引數，這樣的話我們阻力生成器的引數就是 a 和 速度 v，然后方向是運動速度的反方向，

有了力生成器和力累加器，我們可以方便地管理游戲中的力學體系，但是在游戲中每幀都需要大量的計算和重繪，對于性能的要求肯定是比較高的，所以便有了各種各樣的優化方式，

比如說我們可以去掉空氣阻力，水流阻力等以節省繁雜的計算，或者只給一個固定值來進行計算，對于比較重要的重力，我們可以通過內建重力的方式，直接將重力加速度存入整個物理體系，而不是將重力納入到每個物體的每次計算當中，

那么其實我們明白了，我們只需要在系統中設定重力加速度，并且根據用戶操作設定好初速度的向量，就可以快速完成一個小鳥的拋物運動了，

總結

通過簡單的力學知識再加上合適的代碼，我們就可以創建出一個符合力學規律的超級簡易版《憤怒的小鳥》世界了，但是這其實是遠遠不夠的，一個游戲中除了力的簡單疊加和位移，還有力矩、碰撞、旋轉、角速度等等，只有加上了這些，我們才能去計算碰撞，得分，去合理的表現物體被撞后的受力、旋轉、移動，這些有趣的內容請期待一下我們物理引擎系列下面的章節～

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：

標籤：其他

上一篇：VuePress 博客之 SEO 優化（二）重定向

下一篇：Node.js基礎入門第三天