学好三角学(函数) — SWIFT和JAVASCRIPT游戏开发的必备技能 iFIERO.com
不论是使用哪种平台进行开发,三角学在游戏当中都被广泛的使用,因此,小编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/p/5759798.html
https://baijiahao.baidu.com/s?id=1608612160685975801&wfr=spider&for=pc
更多游戏教学:http://www.iFIERO.com -- iFIERO为游戏开发深感自豪
学好三角学(函数) — SWIFT和JAVASCRIPT游戏开发的必备技能 iFIERO.com的更多相关文章
- 【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏(包含源码)
这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的,对游戏里面需要使用到的游戏场景进行了封装,分别实现了Game,Sprite,enemy,player, base,Animati ...
- 【JavaScript游戏开发】JavaScript+HTML5封装的苏拉卡尔塔游戏(包含源码)
/** 苏拉克尔塔游戏 * 思路: * 1.棋盘设置:使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件:当页面被点击时,获取点击的x,y像素点,根据此像素点进行判断,再在合适位置绘制黑红 ...
- 【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
//V1.0 : 实现棋子的布局,画布及游戏场景的初始化 //V2.0 : 实现棋子的颜色改变 //V3.0 :实现所有象棋的走棋规则 //V4.0 : 实现所有棋子的吃子功能 完整的项目源码已经开源 ...
- 测试开发工程必备技能之一:Mock的使用
1. 背景 在实际产品开发过程中,某个服务或前端依赖一个服务接口,该接口可能依赖多个底层服务或模块,或第三方接口,比如说服务 A 依赖服务B,服务B又依赖服务 C,如下图所示: 这种依赖的问题会导致原 ...
- GDB调试:Linux开发人员必备技能
开篇词:Linux C/C++ 开发人员要熟练掌握 GDB 调试 大家好,我是范蠡,目前在某知名互联网旅游公司基础框架业务部技术专家组任开发经理一职. 本系列课程的主题是 Linux 后台开发的 C/ ...
- iOS开发工程师必备技能(持续更新)
Objective-C Objective-C语言基础 library,framework的制作 Runtime 编程 LLVM 原理和调优 操作系统 iOS内存管理和调优 iOS的文件系统和沙盒机制 ...
- Swift游戏开发实战教程(霸内部信息大学)
Swift游戏开发实战教程(大学霸内部资料) 试读下载地址:http://pan.baidu.com/s/1sj7DvQH 介绍:本教程是国内第一本Swift游戏开发专向资料. 本教程具体解说记忆配对 ...
- HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!)
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- 25 个超棒的 HTML5 & JavaScript 游戏引擎开发库
就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议.游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实.吸引人眼球.游戏引擎负责其余的事情.早期,游戏开发者通常从草图做起,花费高昂,且不容易 ...
随机推荐
- Cesium.js学习第三天(模型展示)
var viewer = new Cesium.Viewer('cs'); viewer.scene.primitives.add(Cesium.Model.fromGltf({ url : '/Ce ...
- 报错Caused by: org.hibernate.AnnotationException: No identifier specified for entity:
Caused by: org.hibernate.AnnotationException: No identifier specified for entity:. 原因: 1.没有给实体类ID 解决 ...
- openmax component类的继承关系
向OpenCORE里继承一个新的codec时,需要用到OpenMAX接口规范对该codec进行封装,即要定义一个用于封装的类(wrapper),实现OpenMAX规定的集中核心方法(omx core ...
- linux 学习第八天
一.特殊权限 1.SUID 让命令的执行者临时获取到了所有者权限(rws) 2.SGID 让目录中新的文件的所有组,归属上级目录 3.SBIT 粘滞位 让目录内的文件只能被文件所有者删除 4.修改文件 ...
- Cobbler实现自动化安装(下)--实现过程
实验环境 [root@cobbler ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) [root@cobbler ~] ...
- ethereum(以太坊)(实例)--"简单的公开竞拍"
说真的,刚开始接触这个竞拍案例--“简单的公开竞拍”,我就抱着简单的心态去查看这个实例,但是自我感觉并不简单.应该是我实力不到家的原因吧!!!233333...不过经过大半天的努力,自己理解完之后,觉 ...
- Python支付接口汇总大全(包含微信、支付宝等)
微信接口 wzhifuSDK- 由微信支付SDK 官方PHP Demo移植而来,v3.37下载地址 weixin_pay- 是一个简单的微信支付的接口 weixin_pay- 微信支付接口(V3.3. ...
- springboot+layui实现增删查改
本文描述springboot和layui的结合,采用了springboot内置的jdbc,根据不同需要可以进行修改:分页采用了layui中自带分页格式! ----------------------- ...
- Centos7 Redis3.0 集群搭建备忘
(要让集群正常工作至少需要3个主节点,在这里我们要创建6个redis节点,其中三个为主节点,三个为从节点,对应的redis节点的ip和端口对应关系如下) 127.0.0.1:7000 127.0.0. ...
- pip快速git项目安装
pip install git+https://github.com/xx/xx.git