惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

MyScale Blog
MyScale Blog
J
Java Code Geeks
Vercel News
Vercel News
A
About on SuperTechFans
G
Google Developers Blog
C
Check Point Blog
腾讯CDC
N
Netflix TechBlog - Medium
博客园 - 司徒正美
S
SegmentFault 最新的问题
D
DataBreaches.Net
博客园_首页
美团技术团队
Stack Overflow Blog
Stack Overflow Blog
博客园 - 聂微东
量子位
雷峰网
雷峰网
IT之家
IT之家
小众软件
小众软件
Blog — PlanetScale
Blog — PlanetScale
博客园 - 三生石上(FineUI控件)
H
Help Net Security
宝玉的分享
宝玉的分享
博客园 - 叶小钗

博客园 - 布袋

Phaser游戏框架与HTML Dom元素之间的通信交互 Phaser Matter Collision Plugin 碰撞插件 -- iFiero技术分享 Phaser3跟随自定义路径移动的赛车 -- iFIERO游戏教程 用EC5/EC6自定义class的区别及用法 -- Phaser3网页游戏框架 Phaser3让超级玛丽实现轻跳、高跳及加上对应的跳跃声音 PHASER3 设置场景SCENE SLEEPING休眠和WAKE唤醒 Phaser3游戏三角学应用--一只跟随屏幕点击位置游动的鱼 Phaser3 对象池随机产生炸弹并销毁 Phaser3 场景Scene之间的传值 -- HTML JAVASCRIPT 网页游戏开发 Phaser3 屏幕适配iPhoneX、iPhoneXs的坑 -- JavaScript Html5 游戏开发 GameplayKit的GKStateMachine用法与实例 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域 Swift使用AVAudioPlayer来调节游戏的背景音乐大小 应用UserDefaults储存游戏分数和最高分 一步一步图文介绍SpriteKit使用TexturePacker导出的纹理集Altas SpriteKit在复制节点时留了一个巨坑给开发者,需要开发者手动把复制节点的isPaused设置为false 运用GamePlayKit的GKEntity及GKComponent 的iOS游戏开发实例 SpriteKit手机游戏摇杆JoyStick的使用 -- by iFIERO游戏开发教程 SpirteKit深度复制SKSpriteNode节点及convert转换其它Scene上的节点到当前场景坐标
学好三角学(函数) — SWIFT和JAVASCRIPT游戏开发的必备技能 iF...
布袋 · 2018-09-06 · via 博客园 - 布袋

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

游戏图片由 摘自 Razeware LLC

游戏图片由 摘自 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

image

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

var angle = 65;    //假设角度为65度
var radian = angle * Math.PI / 180;    

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

二、坐标系

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

image

image

image

image

在 JavaScript 中,使用反正切函数:

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

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

image

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

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

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

trigono_3.png

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

RotationDifferences

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