物體隨機飛濺運動! Cocos Creator!

大量物體以隨機初速度的飛濺運動！文章底部附完整代碼！

效果預覽

像火山噴發、煙花等等運動，都是物體隨機飛濺運動。

這個運動其實是拋物運動。

拋物運動也可以看成是勻加速運動。

假設一個物體的初速度為v_0，加速度為a，某一個時刻t的速度公式如下：

對這個公式作一次積分，正好是位移。

s = v_0 * t + 0.5 * a * t * t + C
常量C，是物體的初始位置。
我們把物體分成x和y兩個方向考慮，用上面的公式可以求出在t時刻的物體的位置。為此寫個通用的組建控制每個物體的位置控制。主要代碼如下。
update(dt) {    this._time += dt;    this.node.x = this._initial_position.x + this.initial_velocity.x * this._time + this.acceleration.x * this._time * this._time / 2;    this.node.y = this._initial_position.y + this.initial_velocity.y * this._time + this.acceleration.y * this._time * this._time / 2;}
再來看看如何隨機初始速度。
當然直接使用Math.random()可以實現。參考代碼如下。
// 0-1 均勻分布const random_a = Math.random();const random_b = Math.random();
// 均勻分布的初速度coin.initial_velocity.x = random_a * (V_X_MAX - V_X_MIN) + V_X_MIN;coin.initial_velocity.y = random_b * (V_Y_MAX - V_Y_MIN) + V_Y_MIN;
生成的結果如下。
這個運行結果可能看起來不太自然。這是為什麼呢？
因為自然界中的初速度不是均勻分布的，而是正態分布。
如何生成正態分布的初速度？這裡用到Box-Muller算法。這個算法是根據均勻分布的隨機數來產生正態分布的隨機數算法。
 將這個標準正態分布產生的數值進行一定的轉化，可以讓飛濺運動的物體的初速度 95% 的概率在我們的速度範圍內。有小概率會超出範圍，這樣效果看起來就更自然了些。
const random_a = Math.random();const random_b = Math.random();
// box-muller 算法  r1 = sqrt(-2 * ln a) * sin(2*PI*b)    r2 = sqrt(-2 * ln a) * cos(2*PI*b)const boxMuller_r = Math.sqrt(-2 * Math.log(random_a));const boxMuller_t = 2 * Math.PI * random_b;// 標準正態分布 N~(0,1)  68% 的概率 -1～1   95% 的概率 -2~2const random_normal_x = boxMuller_r * Math.cos(boxMuller_t);const random_normal_y = boxMuller_r * Math.sin(boxMuller_t);// random_normal ==除以4==> 95% 的概率 -0.5～0.5  ==加0.5==> 95% 的概率 0～1coin.initial_velocity.x = (random_normal_x / 4 + 0.5) * (V_X_MAX - V_X_MIN) + V_X_MIN;coin.initial_velocity.y = (random_normal_y / 4 + 0.5) * (V_Y_MAX - V_Y_MIN) + V_Y_MIN;
以上為白玉無冰使用 Cocos Creator v2.2.2 開發"物體隨機飛濺運動！"的技術分享。歡迎留言交流！如果這篇對你有點幫助，歡迎分享給身邊的朋友。
轉載請保留文末二維碼和完整代碼獲取方式！
完整項目：https://github.com/baiyuwubing/cocos-creator-examples/tree/master/splash


我就知道你「在看」▼