Laya 摇杆核心算法

按下松开事件:

按下移动核心代码:

 

 斜率   转弧度  转角度 (或 正余弦值)

公式 

1  斜率 即 点转 弧度  a ,b 两点的弧度    Math.atan2( b.y -a.y , b.x -a.x )

2 弧度转角度      弧度 *180/Π

3 弧度求正余弦值 Math.Sin  Cos( 弧度 )

知识点补充: 

public static double Cos (double d);

返回指定角度的余弦值。

d  Double

以弧度计量的角度。

角度( d )必须为弧度。 乘以 Math.PI /180 将度转换为弧度。

         也就是说 : 求余弦值,要先从角度转到弧度  ( 转换公式: 角度  * Π /180 )

然后 Cos(弧度 ) 得到余弦值 

斜率:

1、Math.atan() 
Math.atan()接受一个参数:用法如下: 
angel=Math.atan(slope) 
angel为一个角度的弧度值,slope为直线的斜率,是一个数字,这个数字可以是负的无穷大到正无穷大之间的任何一个值. 
不过,利用他进行计算比较复杂.因为他的周期性,一个数字的反正切值不止一个.例如atan(-1)的值可能是45度,也可能是225度.这样就是他的周期性,对于正切函数来说,他的周期是180度,所以两个相差180度的角具有相同的正切和斜率: 
tanθ=tan(θ+180) 
然而,Math.atan()只能返回一个角度值,因此确定他的角度非常的复杂,而且,90度和270度的正切是无穷大,因为除数为零,我们也是比较难以处理的~!因此我们更多的会采用第二个函数. 

2、Math.atan2() 
Math.atan2()接受两个参数x和y,方法如下: 
angel=Math.atan2(y,x) 
x 指定点的 x 坐标的数字。 
y 指定点的 y 坐标的数字。 
计算出来的结果angel是一个弧度值,也可以表示相对直角三角形对角的角,其中 x 是临边边长,而 y 是对边边长。 
下面我们来测试一下这两个函数: 
x=Math.atan(1)//计算正切值为1的数字对应的弧度值 
trace(x) //输出一个弧度值0.785398163397448 
x=180*x/Math.PI//转换为角度值 
trace(x) //输出45 
x=Math.atan2(7,7) 
trace(x)//输出0.785398163397448 
x=180*x/Math.PI//转换为角度值 
trace(x)//输出45 
x=Math.atan2(7,-7) 
trace(x)2.35619449019234 
x=180*x/Math.PI//转换为角度值 
trace(x)135 
x=Math.atan2(-7,7) 
trace(x)//输出-0.785398163397448 
x=180*x/Math.PI//转换为角度值 
trace(x)//输出-45 
x=Math.atan2(-7,-7) 
trace(x)//输出-2.35619449019234 
x=180*x/Math.PI//转换为角度值 
trace(x)//输出-135 
//从这些测试可以看出,通过坐标系的自动调整,我们可以很自由的计算出处于不同象限的位置相对应的角度. 

3、计算两点间连线的倾斜角. 
这种方法非常的有用. 
Math.atan2()函数返回点(x,y)和原点(0,0)之间直线的倾斜角.那么如何计算任意两点间直线的倾斜角呢?只需要将两点x,y坐标分别相减得到一个新的点(x2-x1,y2-y1).然后利用他求出角度就可以了.使用下面的一个转换可以实现计算出两点间连线的夹角. 
Math.atan2(y2-y1,x2-x1) 
不过这样我们得到的是一个弧度值,在一般情况下我们需要把它转换为一个角度. 
下面我们用一段代码来测试一下这样的转换. 
//测试,计算点(3,3)和(5,5)构成的连线的夹角 
x=Math.atan2(5-3,5-3) 
trace(x)//输出0.785398163397448 
x=x*180/Math.PI//转换为角度 
trace(x)//输出45。

 

实现2D游戏八方向虚拟摇杆可以借助LayaBox的UI组件来实现。以下是实现步骤: 1. 创建UI组件 在LayaBox的IDE中创建一个UI页面,将需要的UI组件拖拽到页面中,包括摇杆底座、摇杆、指示箭头等。 2. 编写代码 在代码中引用LayaBox的UI组件,并监听摇杆的事件。当摇杆被拖动时,根据摇杆的位置计算出方向,并将方向信息传递给游戏角色进行移动。 以下是实现代码示例: ```javascript // 引用LayaBox的UI组件 var Joystick = Laya.UIConfig.baseDir + "Joystick.png"; var JoyBg = Laya.UIConfig.baseDir + "JoyBg.png"; var JoyArrow = Laya.UIConfig.baseDir + "JoyArrow.png"; Laya.loader.load([JoyBg, Joystick, JoyArrow], Laya.Handler.create(this, onLoaded)); function onLoaded() { // 创建UI组件 var bg = new Laya.Image(JoyBg); bg.pos(100, 100); Laya.stage.addChild(bg); var joystick = new Laya.Image(Joystick); joystick.pos(130, 130); joystick.pivot(joystick.width / 2, joystick.height / 2); Laya.stage.addChild(joystick); var arrow = new Laya.Image(JoyArrow); arrow.pos(130, 130); arrow.pivot(arrow.width / 2, arrow.height / 2); Laya.stage.addChild(arrow); // 监听摇杆事件 joystick.on(Laya.Event.MOUSE_DOWN, this, onJoystickMouseDown); Laya.stage.on(Laya.Event.MOUSE_UP, this, onJoystickMouseUp); } var isMouseDown = false; var joystickPos = new Laya.Point(); var joystickDir = new Laya.Point(); var joystickRadius = 50; function onJoystickMouseDown() { isMouseDown = true; Laya.stage.on(Laya.Event.MOUSE_MOVE, this, onJoystickMouseMove); } function onJoystickMouseUp() { isMouseDown = false; joystickPos.setTo(0, 0); joystickDir.setTo(0, 0); Laya.stage.off(Laya.Event.MOUSE_MOVE, this, onJoystickMouseMove); } function onJoystickMouseMove() { if (!isMouseDown) return; // 计算摇杆位置和方向 joystickPos.setTo(joystick.mouseX, joystick.mouseY); joystickDir = joystickPos.subtract(new Laya.Point(joystick.x, joystick.y)); var len = joystickDir.normalize(); if (len > joystickRadius) { joystickDir.x *= joystickRadius; joystickDir.y *= joystickRadius; } // 更新箭头方向 arrow.rotation = Math.atan2(joystickDir.y, joystickDir.x) * 180 / Math.PI; // 将方向信息传递给游戏角色 // TODO: 根据方向移动游戏角色 } ``` 以上代码实现了一个简单的虚拟摇杆UI,并监听了摇杆的事件,计算出方向信息并传递给游戏角色。需要注意的是,这只是一个示例代码,具体实现还需要根据游戏的需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值