学好三角学(函数) — SWIFT和JAVASCRIPT游戏开发的必备技能 iFIERO.com

不论是使用哪种平台进行开发，三角学在游戏当中都被广泛的使用，因此，小编iFERO认为，三角学是必须得掌握的技能之一。

游戏图片由 摘自 Razeware LLC

先以Javascript为例

一、角度与弧度

最直观地说，一个 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代码

image

注意：在开始计算正弦值之前，我们需要将角度值转换为弧度值，然后再进行计算。
正弦值(一个角的正弦表示与该角相对的直角边与斜边的比例)

var angle = 65;    //假设角度为65度
var radian = angle * Math.PI / 180;    //计算出弧度
console.log( Math.sin(radian) );    //输出sin 65度的值

Math.sin(30 * Math.PI / 180) // ()括号内的作用是将角度值转换为弧度值

二、坐标系

javascript中坐标系统和标准坐标系统不一样。

image

image

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

Math.atan2(y, x) // 该函数接受两个参数：对边(y)与邻边(x)的长度

可以计算出弧度的值，它的不同之处在于，得出的角度值是从x轴正轴开始以逆时针方向计算的。

image

在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 )

image

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 ); 

三、勾股定理

直角三角形中，两条直角边的平方和等于斜边的平方。

image

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的函数来计算角度，三角学的原理还是不变的。

如我们要计算飞船的旋转方向，让飞船的机头转向敌机(图中右上角)

三角函数

三角函数

我们就可以应用下列函数来得出要旋转的方向

trigono_3.png

let angle = atan2(playerVelocity.dy, playerVelocity.dx)
playerSprite.zRotation = angle //（atan2已得出弧度,但此处飞船的指向敌机的方向是不正确的)

RotationDifferences

为什么方向(飞船机头的指向敌机的)会不正确呢？

因为，数学的角度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/p/5759798.html
https://baijiahao.baidu.com/s?id=1608612160685975801&wfr=spider&for=pc

更多游戏教学：http://www.iFIERO.com -- iFIERO为游戏开发深感自豪