学好三角学(函数) — 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为游戏开发深感自豪

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容