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

• 2020 年 4 月 9 日
• 筆記

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

效果預覽

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

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

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

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

v = 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~2  const 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～1  coin.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