學好三角學(函數) — SWIFT和JAVASCRIPT遊戲開發的必備技能 iFIERO.com

不管是使用哪一種平臺進行開發，三角學在遊戲當中都被普遍的使用，所以，小編iFERO認爲，三角學是必須得掌握的技能之一。

先以Javascript爲例

1、角度與弧度

最直觀地說，一個 60度 的角，能夠用 60°來表示，也能夠用 π / 3 （圓周率除以3）來表示；

同理，一個 90度 的角，能夠用 90°來表示，也能夠用 π / 2 （圓周率除以2）來表示；

還有，一個 180度 的角，能夠用 180°來表示，也能夠用 π 來表示。

即【60°= π/3】，【90° = π/2】，【180° = π】，等號的左邊是度數，右邊是弧度。

換句話說，一個角度，能夠用度數來表示，也能夠用弧度來表示。

但由於(重要的事情說三遍)

弧度更加符合計算機的計算模式，

弧度更加符合計算機的計算模式，

弧度更加符合計算機的計算模式，因此，Math 類的 sin(x)、cos(x)、tan(x) 中的 x 參數類型爲弧度。

那麼如何把一個角度數轉換爲弧度值呢？

公式以下：

———————————————-

degrees = radians 180 / Math.PI     // (角度 = 弧度 180  / Math.PI)

radians = degrees Math.PI / 180    // (弧度 = 角度 Math.PI  / 180)

———————————————-

javascript代碼

注意：在開始計算正弦值以前，咱們須要將角度值轉換爲弧度值，而後再進行計算。
正弦值(一個角的正弦表示與該角相對的直角邊與斜邊的比例)

var angle = 65;    //假設角度爲65度
var radian = angle * Math.PI / 180;    //計算出弧度
console.log( Math.sin(radian) );    //輸出sin 65度的值

Math.sin(30 * Math.PI / 180) // ()括號內的做用是將角度值轉換爲弧度值

2、座標系

javascript中座標系統和標準座標系統不同。

在 JavaScript 中，使用反正切函數：

Math.atan2(y, x)  // 該函數接受兩個參數：對邊(y)與鄰邊(x)的長度

能夠計算出弧度的值，它的不一樣之處在於，得出的角度值是從x軸正軸開始以逆時針方向計算的。

在javascript或canvas座標系統中，咱們所關注的三角形D的角度爲 -153.43° 而不是 26.57°

咱們用 Math.atan2(y, x) 計算A、B、C、D 這4個三角形的角度：

A：Math.atan2(-1, 2) = -26.57°

B：Math.atan2(1, 2) = 26.57°

C：Math.atan2(1, -2) = 153.43°

D：Math.atan2(-1, -2) = -153.43°

由此咱們就能夠很方便的分辨出三角形A和C，B和D具體是哪個了！

再看一個實例：

在javascript座標系中經過反正切(Math.atan2)計算一個變化點(mouse.x, mouse.y)對應一個固定點(arrow.x, arrow.y )的角度：

變化點(mouse.x, mouse.y)

固定點(arrow.x, arrow.y )

Math.atan2(y, x) 能正確的計算出對應角度（注意：Math.atan2已爲計算機所表達的弧度了）

var dx = Math.abs(mouse.x - arrow.x)
var dy = Math.abs(mouse.y - arrow.y)
var angle = Math.atan2(dy, dx);
console.log('弧度爲：' + angle );

3、勾股定理

直角三角形中，兩條直角邊的平方和等於斜邊的平方。

A的平方 + B的平方 = C的平方

計算兩點之間的距離

點1：(x1, y1)

點2：(x2, y2)

var dx = Math.abs(x2 - x1)
var dy =Math.abs(y2 - y1)
var dist = Math.sqrt(dx dx + dy dy);
console.log('距離爲：' + dist);

數學纔是最最根本的核心，所以，在用Swift來進行遊戲開發時，無非就是調用XCode的函數來計算角度，三角學的原理仍是不變的。

如咱們要計算飛船的旋轉方向，讓飛船的機頭轉向敵機(圖中右上角)

咱們就能夠應用下列函數來得出要旋轉的方向

let angle = atan2(playerVelocity.dy, playerVelocity.dx)
playerSprite.zRotation = angle //（atan2已得出弧度,但此處飛船的指向敵機的方向是不正確的)

爲何方向(飛船機頭的指向敵機的)會不正確呢？

由於，數學的角度0°度角是X-Axis軸的正方向，而飛船圖片上的機頭是往Y軸正方向，因此要修正一個90度的弧度，用通俗一點的講就是數學壓根兒不知到你的飛船圖片上的機頭方向是朝Y軸仍是朝哪一個見鬼的角度，由於你就是一張圖片，因此要修正。

let degreesToRadians = CGFloat.pi / 180 // 方法 degreesToRedians * 一個角度 就能夠成爲弧度了。 
let radiansToDegrees = 180 / CGFloat.pi

// 注意要把角度(90)轉化爲弧度先90 *degreesToRadians
playerSprite.zRotation = angle - 90 *degreesToRadians // 此處得出機頭正確的旋轉方向

總結：掌握三角學的原理很是重要！若是一遍看不明白，就多看幾遍，多花點時間，功到天然成！但願iFIERO能幫到你 ^_^~

以上文章由下列二篇文章整理而來，感謝他們的分享：
http://www.cnblogs.com/eyeear...
https://baijiahao.baidu.com/s...

更多遊戲教學：http://www.iFIERO.com -- iFIERO爲遊戲開發深感自豪