在使用Laya引擎制作自己的小游戲時，需要用到虛擬搖桿來控制人物移動，在百度搜素了許多案例之后，結合自己的情況記錄如下Demo。

先看看效果：

運行效果

1.實現思路

圖1

如上圖“圖1”所示，在數學直角坐標系中，將一個圓平分成8塊，每一塊對應一個方向，即 1->左、2->左上、3->上、4->右上、5->右、6->右下、7->下、8->左下，以x軸正方為起始點，逆時針旋轉，即各個方向對應的角度分別為 1->左->[337.5°~22.5°)、2->左上->[22.5°~67.5°)、3->上->[67.5°~112.5°)、4->右上->[112.5°~157.5°)、5->右->[157.5°~202.5°)、6->右下->[202.5°~247.5°)、7->下->[247.5°~292.5°)、8->左下->[292.5°~337.5°)

那么如何計算出移動的方向呢？這就需要用到反三角函數(acos、asin、atan...)了，如下圖“圖2”所示：

圖2

通過反三角函數計算出α對應的弧度，在將弧度轉換成角度即可。

2.使用LayaAirIDE編輯場景

說明：我是用的是LayaAir_2_01版本以及ActionScript3.0語言

在編輯模式先新建一個場景，在場景中添加虛擬搖桿所需要用到的兩張圖片，并分別為其命名，如下圖“圖3”所示：

圖3

然后發布，我是用 分離模式 發布該資源，該模式會生成一個場景類以及json文件。之后再src下新建一個名為script的文件夾用于放置腳本類文件，在該文件夾下新建一個名為 StartScene 腳本并繼承 TestSceneUI 類，作為場景的 runTime 腳本，如下圖“圖4”、“圖5”所示：

圖4

圖5

然后切回編輯模式，將 StartScene 腳本設置為場景的runTime 腳本。如下圖“圖6”所示：

圖6

3.編寫代碼

接下來就正在進入正題啦，廢話已經說過了，直接先給出代碼，再看后面的說明內容：

package script {

import laya.components.Script;

import ui.TestSceneUI;

import laya.display.Stage;

import laya.display.Sprite;

import laya.events.Event;

import laya.display.Text;

import laya.utils.Tween;

import laya.utils.Ease;

public class StartScene extends TestSceneUI {

// 小圓被拉動的最遠半徑

private const RADIUS:Number = 80;

// 小圓組件

private var smallCircle:Sprite;

// 大圓組件

private var bigCircle:Sprite;

// 用于顯示角度的文本

private var text:Text;

/**

* 構造函數

* 需加載父類的構造函數

*/

public function StartScene():void {

super();

}

override public function onEnable():void {

Laya.init(1000, 800);

Laya.stage.scaleMode = Stage.SCALE_FULL;

// 獲取兩個圓組件

smallCircle = this.getChildByName("smallCircle") as Sprite;

bigCircle = this.getChildByName("bigCircle") as Sprite;

// 用于顯示文字

text = new Text();

text.pos(Laya.stage.width / 2, Laya.stage.height / 2);

text.color = '#ffffff';

text.fontSize = 20;

this.addChild(text);

// 給小圓添加鼠標按下偵聽事件

smallCircle.on(Event.MOUSE_DOWN, this, onSmallClickDown);

// 鼠標抬起時

Laya.stage.on(Event.MOUSE_UP, this, onSmallClickUp);

}

/**

* 鼠標按下小圓偵聽事件

*/

private function onSmallClickDown():void {

// 點擊時為小圓注冊

Laya.stage.on(Event.MOUSE_MOVE, this, onSmallClickMove);

}

/**

* 鼠標抬起偵聽事件

*/

private function onSmallClickUp():void {

// 取消鼠標移動事件

Laya.stage.off(Event.MOUSE_MOVE, this, onSmallClickMove);

// 小圓返回中心位置

Tween.to(smallCircle, {x:bigCircle.x, y:bigCircle.y}, 300, Ease.backIn);

}

private function onSmallClickMove():void {

// 鼠標與大圓中心x、y軸的距離

var xx:Number = Laya.stage.mouseX - bigCircle.x;

var yy:Number = Laya.stage.mouseY - bigCircle.y;

// 勾股定理求斜邊

var obl:Number = Math.sqrt(Math.pow(xx, 2) + Math.pow(yy, 2));

// 求弧度

var rad:Number = getRad(xx, yy, obl);

// 弧度轉角度

var angle:Number = 180 / Math.PI * rad;

// 在文本框中顯示角度

text.text = angle + "度";

// 限制小圓移動范圍

if (obl > RADIUS) {

// 當鼠標與大圓中心超過移動半徑 RADIUS 時，停止小圓繼續往外移動

// 通過三角形邊與邊的比例計算出小圓應該處于的位置

var smallCircleX:Number = (RADIUS * xx) / obl + bigCircle.x;

var smallCircleY:Number = (RADIUS * yy) / obl + bigCircle.y;

smallCircle.pos(smallCircleX, smallCircleY);

} else {

// 小圓處于大圓之中時，與鼠標同一位置

smallCircle.pos(Laya.stage.mouseX, Laya.stage.mouseY);

}

}

/**

* 求弧度函數

* @param xx : x軸距離

* @param yy : y軸距離

* @param obl : 斜邊

*/

private function getRad(xx:Number, yy:Number, obl:Number):Number {

// 方法一：asin()

// var rad:Number = xx > 0 ? ((Math.PI * 3)/2 + Math.asin(-yy/obl)) : (Math.PI / 2 - Math.asin(-yy/obl));

// 方法二：acos()

var rad:Number = yy < 0 ? Math.acos(xx / obl) : (Math.PI * 2- Math.acos(xx / obl));

// 方法三：atan2()

// var rad:Number = yy < 0 ? Math.atan2(-yy, xx) : Math.PI * 2 + Math.atan2(-yy, xx);

return rad;

}

override public function onDisable():void {

}

}

}

注意：

1.在Laya坐標系中，與數學直角坐標系不同的是Laya坐標系y軸向下為正放，數學直角坐標系y軸向上為正方。

2.如果使用方法一，則起始點為y軸的上方，也就是y軸的負方向。

3.當a大于180度時候，a的余弦值等于(360-a)的余弦，其他兩個方法根據三角函數和反三角函數的性質推推導一下即可得出，或是推導不出的話就直接在代碼中打印實時的弧度值，再去理解。

總結

以上是生活随笔為你收集整理的android 游戏摇杆ui,LayaBox实现2D游戏八方向虚拟摇杆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。