用JavaScript玩轉遊戲物理(一)運動學類比與粒子系統

系列簡介
也許，三百年前的艾薩克·牛頓爵士(Sir Issac Newton, 1643-1727)並沒幻想過，物理學廣泛地應用在今天許多遊戲、動畫中。為什麼在這些應用中要使用物理學？筆者認為，自我們出生以來，一直感受著物理世界的規律，意識到物體在這世界是如何"正常移動"，例如射球時球為拋物線(自旋的球可能會做成弧線球) 、石子系在一根線的末端會以固定頻率擺動等等。要讓遊戲或動畫中的物體有真實感，其移動方式就要符合我們對"正常移動"的預期。
今天的遊戲動畫應用了多種物理類比技術，例如運動學類比(kinematics simulation)、剛體動力學類比(rigid body dynamics simulation)、繩子/布料類比(string/cloth simulation)、柔體動力學類比(soft body dynamics simulation)、流體動力學類比(fluid dynamics simulation)等等。另外碰撞偵測(collision detection)是許多類比系統裡所需的。
本系列希望能介紹一些這方面最基礎的知識，繼續使用JavaScript做例子，以即時互動方式體驗。
本文簡介
作為系列第一篇，本文介紹最簡單的運動學類比，只有兩條非常簡單的公式。運動學類比可以用來類比很多物體運動(例如馬里奧的跳躍、炮彈等)，本文將會配合粒子系統做出一些視覺特效(粒子系統其實也可以用來做遊戲的玩法，而不單是視覺特效)。
運動學類比
運動學(kinematics)研究物體的移動，和動力學(dynamics)不同之處，在於運動學不考慮物體的品質(mass)/轉動慣量(moment of inertia)，以及不考慮加之於物體的力(force )和力矩(torque)。
我們先回憶牛頓第一運動定律:
當物體不受外力作用，或所受合力為零時，原先靜止者恒靜止，原先運動者恒沿著直線作等速度運動。該定律又稱為「慣性定律」。此定律指出，每個物體除了其位置(position)外，還有一個線性速度(linear velocity)的狀態。然而，只類比不受力影響的物體並不有趣。撇開力的概念，我們可以用線性加速度(linear acceleration)去影響物體的運動。例如，要計算一個自由落體在任意時間t的y軸座標，可以使用以下的分析解(analytical solution):

當中，和分別是t=0時的y軸起始座標和速度，而g則是重力加速度(gravitational acceleration)。
這分析解雖然簡單，但是有一些缺點，例如g是常數，在類比過程中不能改變；另外，當物體遇到障礙物，產生碰撞時，這公式也很難處理這種不連續性(discontinuity) 。
在電腦類比中，通常需要計算連續的物體狀態。用遊戲的用語，就是計算第一幀的狀態、第二幀的狀態等等。設物體在任意時間t的狀態：位置向量為、速度向量為、加速度向量為。我們希望從時間的狀態，計算下一個類比時間的狀態。最簡單的方法，是採用歐拉方法(Euler method)作數值積分(numerical integration):

歐拉方法非常簡單，但有準確度和穩定性問題，本文會先忽略這些問題。本文的例子採用二維空間，我們先實現一個JavaScript二維向量類:

複製代碼 代碼如下:// Vector2.js
Vector2 = function(x, y) { this.x = x; this.y = y; };

Vector2.prototype = {
copy : function() { return new Vector2(this.x, this.y); },
length : function() { return Math.sqrt(this.x * this.x + this.y * this.y); },
sqrLength : function() { return this.x * this.x + this.y * this.y; },
normalize : function() { var inv = 1/this.length(); return new Vector2(this.x * inv, this.y * inv); },
negate : function() { return new Vector2(-this.x, -this.y); },
add : function(v) { return new Vector2(this.x + v.x, this.y + v.y); },
subtract : function(v) { return new Vector2(this.x - v.x, this.y - v.y); },
multiply : function(f) { return new Vector2(this.x * f, this.y * f); },
divide : function(f) { var invf = 1/f; return new Vector2(this.x * invf, this.y * invf); },
dot : function(v) { return this.x * v.x + this.y * v.y; }
};

Vector2.zero = new Vector2(0, 0);

然後，就可以用HTML5 Canvas去描繪類比的過程: 複製代碼 代碼如下:var position = new Vector2(10, 200);
var velocity = new Vector2(50, -50);
var acceleration = new Vector2(0, 10);
var dt = 0.1;
function step() {
position = position.add(velocity.multiply(dt));
velocity = velocity.add(acceleration.multiply(dt));
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(position.x, position.y, 5, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
start("kinematicsCancas", step);

<button onclick="eval(document.getElementById('kinematicsCode').value)" type="button">Run</button>
<button onclick="stop();" type="button">Stop</button>
<button onclick="clearCanvas();" type="button">Clear</button>
<table border="0" style="width: 100%;">
<tbody>
<tr>
<td><canvas id="kinematicsCancas" width="400" height="400"></canvas></td>
<td width="10"> </td>
<td width="100%" valign="top">
<h4>修改代碼試試看</h4>
<li>改變起始位置</li>
<li>改變起始速度(包括方向) </li>
<li>改變加速度</li>

</td>
</tr>
</tbody>
</table>

這程式的核心就是step()函數頭兩行代碼。很簡單吧？
粒子系統
粒子系統(particle system)是圖形裡常用的特效。粒子系統可應用運動學類比來做到很多不同的效果。粒子系統在遊戲和動畫中，常常會用來做雨點、火花、煙、爆炸等等不同的視覺效果。有時候，也會做出一些遊戲性相關的功能，例如敵人被打敗後會發出一些閃光，主角可以把它們吸收。
粒子的定義
粒子系統類比大量的粒子，並通常用某些方法把粒子渲染。粒子通常有以下特性:
<li>粒子是獨立的，粒子之間互不影響(不碰撞、沒有力) </li>
<li>粒子有生命週期，生命結束後會消失</li>
<li>粒子可以理解為空白間的一個點，有時候也可以設定半徑作為球體和環境碰撞</li>
<li>粒子帶有運動狀態，也有其他外觀狀態(例如顏色、影像等) </li>
<li>粒子可以只有線性運動，而不考慮旋轉運動(也有例外) </li>

以下是本文例子裡實現的粒子類: 複製代碼 代碼如下:// Particle.js
Particle = function(position, velocity, life, color, size) {
this.position = position;
this.velocity = velocity;
this.acceleration = Vector2.zero;
this.age = 0;
this.life = life;
this.color = color;
this.size = size;
};

遊戲迴圈
粒子系統通常可分為三個周期:
發射粒子
類比粒子(粒子老化、碰撞、運動學類比等等)
渲染粒子
在遊戲迴圈(game loop)中，需要對每個粒子系統執行以上的三個步驟。
生與死
在本文的例子裡，用一個JavaScript數組particles儲存所有活的粒子。產生一個粒子只是把它加到數組末端。程式碼片段如下: 複製代碼 代碼如下://ParticleSystem.js
function ParticleSystem() {
// Private fields
var that = this;
var particles = new Array();
// Public fields
this.gravity = new Vector2(0, 100);
this.effectors = new Array();
// Public methods
this.emit = function(particle) {
particles.push(particle);
};
// ...
}

粒子在初始化時，年齡(age)設為零，生命(life)則是固定的。年齡和生命的單位都是秒。每個類比步，都會把粒子老化，即是把年齡增加<span class="math">\Delta t</span>，年齡超過生命，就會死亡。程式碼片段如下: 複製代碼 代碼如下:function ParticleSystem() {
// ...
this.simulate = function(dt) {
aging(dt);
applyGravity();
applyEffectors();
kinematics(dt);
};
// ...
// Private methods
function aging(dt) {
for (var i = 0; i < particles.length; ) {
var p = particles[i];
p.age += dt;
if (p.age >= p.life)
kill(i);
else
i++;
}
}
function kill(index) {
if (particles.length > 1)
particles[index] = particles[particles.length - 1];
particles.pop();
}
// ...
}

在函數kill()裡，用了一個技巧。因為粒子在數組裡的次序並不重要，要刪除中間一個粒子，只需要複製最末的粒子到那個元素，並用pop()移除最末的粒子就可以。這通常比直接刪除數組中間的元素快(在C++中使用數組或std::vector亦是)。
運動學類比
把本文最重要的兩句運動學類比代碼套用至所有粒子就可以。另外，每次類比會先把引力加速度寫入粒子的加速度。這樣做是為了將來可以每次改變加速度(續篇會談這方面)。 複製代碼 代碼如下:function ParticleSystem() {
// ...
function applyGravity() {
for (var i in particles)
particles[i].acceleration = that.gravity;
}
function kinematics(dt) {
for (var i in particles) {
var p = particles[i];
p.position = p.position.add(p.velocity.multiply(dt));
p.velocity = p.velocity.add(p.acceleration.multiply(dt));
}
}
// ...
}

渲染
粒子可以用很多不同方式渲染，例如用圓形、線段(當前位置和之前位置)、影像、精靈等等。本文採用圓形，並按年齡生命比來控制圓形的透明度，程式碼片段如下: 複製代碼 代碼如下:function ParticleSystem() {
// ...
this.render = function(ctx) {
for (var i in particles) {
var p = particles[i];
var alpha = 1 - p.age / p.life;
ctx.fillStyle = "rgba("
+ Math.floor(p.color.r * 255) + ","
+ Math.floor(p.color.g * 255) + ","
+ Math.floor(p.color.b * 255) + ","
+ alpha.toFixed(2) + ")";
ctx.beginPath();
ctx.arc(p.position.x, p.position.y, p.size, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
}
// ...
}

基本粒子系統完成
以下的例子裡，每幀會發射一個粒子，其位置在畫布中間(200,200)，發射方向是360度，速率為100，生命為1秒，紅色、半徑為5象素。 複製代碼 代碼如下:var ps = new ParticleSystem();
var dt = 0.01;
function sampleDirection() {
var theta = Math.random() * 2 * Math.PI;
return new Vector2(Math.cos(theta), Math.sin(theta));
}
function step() {
ps.emit(new Particle(new Vector2(200, 200), sampleDirection().multiply(100), 1, Color.red, 5));
ps.simulate(dt);
clearCanvas();
ps.render(ctx);
}
start("basicParticleSystemCanvas", step);

<button onclick="eval(document.getElementById('basicParticleSystemCode').value)" type="button">Run</button>
<button onclick="stop();" type="button">Stop</button>
<table border="0" style="width: 100%;">
<tbody>
<tr>
<td><canvas id="basicParticleSystemCanvas" width="400" height="400"></canvas></td>
<td width="10"> </td>
<td width="100%" valign="top">
<h4>修改代碼試試看</h4>
<li>改變發射位置</li>
<li>向上發射，發射範圍在90度內</li>
<li>改變生命</li>
<li>改變半徑</li>
<li>每幀發射5個粒子</li>

</td>
</tr>
</tbody>
</table>

簡單碰撞
為了說明用數值積分相對於分析解的優點，本文在粒子系統上加簡單的碰撞。我們想加入一個需求，當粒子碰到長方形室(可設為整個Canvas大小)的內壁，就會碰撞反彈，碰撞是完全彈性的(perfectly elastic collision)。
在程式設計上，我把這功能用回調方式進行。 ParticleSystem類有一個effectors數組，在進行運動學類比之前，先執行每個effectors對象的apply()函數:
而長方形室就這樣實現: 複製代碼 代碼如下:// ChamberBox.js
function ChamberBox(x1, y1, x2, y2) {
this.apply = function(particle) {
if (particle.position.x - particle.size < x1 || particle.position.x + particle.size > x2)
particle.velocity.x = -particle.velocity.x;
if (particle.position.y - particle.size < y1 || particle.position.y + particle.size > y2)
particle.velocity.y = -particle.velocity.y;
};
}

這其實就是當偵測到粒子超出內壁的範圍，就反轉該方向的速度分量。
此外，這例子的主迴圈不再每次把整個Canvas清空，而是每幀畫一個半透明的黑色長方形，就可以類比動態模糊(motion blur)的效果。粒子的顏色也是隨機從兩個顏色中取樣。 複製代碼 代碼如下:var ps = new ParticleSystem();
ps.effectors.push(new ChamberBox(0, 0, 400, 400)); // 最重要是多了這語句
var dt = 0.01;
function sampleDirection(angle1, angle2) {
var t = Math.random();
var theta = angle1 * t + angle2 * (1 - t);
return new Vector2(Math.cos(theta), Math.sin(theta));
}
function sampleColor(color1, color2) {
var t = Math.random();
return color1.multiply(t).add(color2.multiply(1 - t));
}
function step() {
ps.emit(new Particle(new Vector2(200, 200), sampleDirection(Math.PI * 1.75, Math.PI * 2).multiply(250), 3, sampleColor(Color.blue, Color.purple), 5));
ps.simulate(dt);
ctx.fillStyle="rgba(0, 0, 0, 0.1)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ps.render(ctx);
}
start("collisionChamberCanvas", step);

<button onclick="eval(document.getElementById('collisionChamberCode').value)" type="button">Run</button>
<button onclick="stop();" type="button">Stop</button>
<canvas id="collisionChamberCanvas" width="400" height="400"></canvas>

互動發射
最後一個例子加入互動功能，在滑鼠位置發射粒子，粒子方向是按滑鼠移動速度再加上一點噪音(noise)。粒子的大小和生命都加入了隨機性。 複製代碼 代碼如下:var ps = new ParticleSystem();
ps.effectors.push(new ChamberBox(0, 0, 400, 400));
var dt = 0.01;
var oldMousePosition = Vector2.zero, newMousePosition = Vector2.zero;
function sampleDirection(angle1, angle2) {
var t = Math.random();
var theta = angle1 * t + angle2 * (1 - t);
return new Vector2(Math.cos(theta), Math.sin(theta));
}
function sampleColor(color1, color2) {
var t = Math.random();
return color1.multiply(t).add(color2.multiply(1 - t));
}
function sampleNumber(value1, value2) {
var t = Math.random();
return value1 * t + value2 * (1 - t);
}
function step() {
var velocity = newMousePosition.subtract(oldMousePosition).multiply(10);
velocity = velocity.add(sampleDirection(0, Math.PI * 2).multiply(20));
var color = sampleColor(Color.red, Color.yellow);
var life = sampleNumber(1, 2);
var size = sampleNumber(2, 4);
ps.emit(new Particle(newMousePosition, velocity, life, color, size));
oldMousePosition = newMousePosition;
ps.simulate(dt);
ctx.fillStyle="rgba(0, 0, 0, 0.1)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ps.render(ctx);
}
start("interactiveEmitCanvas", step);
canvas.onmousemove = function(e) {
if (e.layerX || e.layerX == 0) { // Firefox
e.target.style.position='relative';
newMousePosition = new Vector2(e.layerX, e.layerY);
}
else
newMousePosition = new Vector2(e.offsetX, e.offsetY);
};
<button onclick="eval(document.getElementById('interactiveEmitCode').value)" type="button">Run</button>
<button onclick="stop();" type="button">Stop</button>
<canvas id="interactiveEmitCanvas" width="400" height="400"></canvas>

總結
本文介紹了最簡單的運動學類比，使用歐拉方法作數值積分，並以此法去實現一個有簡單碰撞的粒子系統。本文的精華其實只有兩條簡單公式(只有兩個加數和兩個乘數)，希望讓讀者明白，其實物理類比可以很簡單。雖然本文的例子是在二維空間，但這例子能擴充至三維空間，只須把Vector2換成Vector3。本文完整原始碼可下載。
續篇會談及在此基礎上加入其他物理現象，有機會再加入其他物理類比課題。希望各位支援，並給本人更多意見。