资讯专栏INFORMATION COLUMN

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

lingdududu / 3462人阅读

摘要:换句话说,一个角度,可以用度数来表示,也可以用弧度来表示。正弦值一个角的正弦表示与该角相对的直角边与斜边的比例假设角度为度计算出弧度输出度的值括号内的作用是将角度值转换为弧度值二坐标系中坐标系统和标准坐标系统不一样。

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

先以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代码

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

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

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

二、坐标系

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

三、勾股定理

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

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为游戏开发深感自豪

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/58260.html

相关文章

  • Phaser3游戏角学应用--一只跟随屏幕点击位置游动

    摘要:资源图代码中为初始化代码三角函数得出鱼要旋转的角度判断鱼是否需要反转点击的位置和鱼头相同不反转点击的位置和鱼头相同不反转判断鱼是否需要反转点击的位置和鱼头相反反转点击的位置和鱼头相反反转让鱼移动到点击的位置更多游戏教学为游戏开发 showImg(https://segmentfault.com/img/remote/1460000017023462); showImg(https://...

    wangbinke 评论0 收藏0
  • Phaser3游戏角学应用--一只跟随屏幕点击位置游动

    摘要:资源图代码中为初始化代码三角函数得出鱼要旋转的角度判断鱼是否需要反转点击的位置和鱼头相同不反转点击的位置和鱼头相同不反转判断鱼是否需要反转点击的位置和鱼头相反反转点击的位置和鱼头相反反转让鱼移动到点击的位置更多游戏教学为游戏开发 showImg(https://segmentfault.com/img/remote/1460000017023462); showImg(https://...

    CoderDock 评论0 收藏0
  • Phaser3游戏角学应用--一只跟随屏幕点击位置游动

    摘要:资源图代码中为初始化代码三角函数得出鱼要旋转的角度判断鱼是否需要反转点击的位置和鱼头相同不反转点击的位置和鱼头相同不反转判断鱼是否需要反转点击的位置和鱼头相反反转点击的位置和鱼头相反反转让鱼移动到点击的位置更多游戏教学为游戏开发 showImg(https://segmentfault.com/img/remote/1460000017023462); showImg(https://...

    shuibo 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    caspar 评论0 收藏0
  • SegmentFault 技术周刊 Vol.40 - 2018,来学习一门新编程语言吧!

    摘要:入门,第一个这是一门很新的语言,年前后正式公布,算起来是比较年轻的编程语言了,更重要的是它是面向程序员的函数式编程语言,它的代码运行在之上。它通过编辑类工具,带来了先进的编辑体验,增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了,总结过去的 2017,相信小伙们一定有很多收获...

    nihao 评论0 收藏0

发表评论

0条评论

lingdududu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<