教程目錄
一 實際效果
二 實現原理
三 Demo下載

一 實際效果

在很多游戲中，都會用到虛擬搖桿
?


?

我這里拋磚引玉，做一個簡單的Demo?

?

二 實現原理

搖桿的實現關鍵技術點就是通過Math.atan2函數，用觸摸位置和搖桿的位置來獲取兩者的角度(弧度...)。

角度 = Math.atan2(觸摸點Y - 搖桿Y,??觸摸點X - 搖桿X)

?

再用鉤股定理Math.cos和Math.sin計算得到物體的x，y軸上的分速度

x軸分速度 = Math.cos(角度)*物體移動速度
y軸分速度 = Math.sin(角度)*物體移動速度

?

之后我們根據得到的x，y軸速度，去移動物體就ok了。
物體.x += x軸分速度
物體.y += y軸分速度


虛擬搖桿代碼

[Actionscript3]?純文本查看?復制代碼 ?

001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105

/** ?* 虛擬搖桿 ?* @author chenkai ?* @since 2017/5/4 ?*/ class VirtualJoystick extends eui.Component{ ????????private ball:eui.Image;????????? //圓環 ????????private circle:eui.Image;??????? //小球 ????????private circleRadius:number = 0; //圓環半徑 ????????private ballRadius:number = 0;?? //小球半徑 ????????private centerX:number = 0;????? //中心點坐標 ????????private centerY:number = 0; ????????private touchID:number;????????? //觸摸ID ????????public constructor() { ????????????????super(); ????????????????this.skinName = "VirtualJoystickSkin"; ????????} ????????public childrenCreated(){ ????????????????//獲取圓環和小球半徑 ????????????????this.circleRadius = this.circle.height/2; ????????????????this.ballRadius = this.ball.height/2; ????????????????//獲取中心點 ????????????????this.centerX = this.circleRadius; ????????????????this.centerY = this.circleRadius; ????????????????//設置錨點 ????????????????this.anchorOffsetX = this.circleRadius; ????????????????this.anchorOffsetY = this.circleRadius; ????????????????//設置小球初始位置 ????????????????this.ball.x = this.centerX; ????????????????this.ball.y = this.centerY; ????????} ????????//啟動虛擬搖桿 (監聽事件根據實際情況設置，不然點一下UI上的其他按鈕，也會觸發虛擬搖桿事件。這里只是做demo，就沒那么講究了 - -!) ????????public start(){ ????????????????GameConst.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this); ????????????????GameConst.stage.addEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this); ????????????????GameConst.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this); ????????} ????????//停止虛擬搖桿 ????????public stop(){ ????????????????GameConst.stage.removeEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this); ????????????????GameConst.stage.removeEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this); ????????????????GameConst.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this); ????????} ????????//觸摸開始，顯示虛擬搖桿 ????????private onTouchBegin(e:egret.TouchEvent){ ????????????????if(this.parent){ ????????????????????????return; ????????????????} ????????????????this.touchID = e.touchPointID; ????????????????this.x = e.stageX; ????????????????this.y = e.stageY; ????????????????this.ball.x = this.centerX; ????????????????this.ball.y = this.centerY; ????????????????GameConst.stage.addChild(this); ????????????????this.dispatchEvent(new egret.Event("vj_start")); ????????} ????????//觸摸結束，隱藏虛擬搖桿 ????????private onTouchEnd(e:egret.TouchEvent){ ????????????????if(this.touchID != e.touchPointID){ ????????????????????????return; ????????????????} ????????????????this.hide(); ????????????????this.dispatchEvent(new egret.Event("vj_end")); ????????} ????????//觸摸移動，設置小球的位置 ????????private p1:egret.Point = new egret.Point(); ????????private p2:egret.Point = new egret.Point(); ????????private onTouchMove(e:egret.TouchEvent){ ????????????????if(this.touchID != e.touchPointID){ ????????????????????????return; ????????????????} ????????????????//獲取手指和虛擬搖桿的距離 ????????????????this.p1.x = this.x; ????????????????this.p1.y = this.y; ????????????????this.p2.x = e.stageX; ????????????????this.p2.y = e.stageY; ????????????????var dist = egret.Point.distance(this.p1, this.p2); ????????????????var angle:number = Math.atan2(e.stageY - this.y, e.stageX - this.x); ????????????????//手指距離在圓環范圍內 ????????????????if(dist <= (this.circleRadius - this.ballRadius)){ ????????????????????????this.ball.x = this.centerX + e.stageX - this.x; ????????????????????????this.ball.y = this.centerY + e.stageY - this.y; ????????????????//手指距離在圓環范圍外 ????????????????}else{ ????????????????????????this.ball.x = Math.cos(angle)*(this.circleRadius - this.ballRadius) + this.centerX; ????????????????????????this.ball.y = Math.sin(angle)*(this.circleRadius - this.ballRadius) + this.centerY; ????????????????} ????????????????//派發事件 ????????????????this.dispatchEventWith("vj_move", false, angle); ????????} ????????private hide(){ ????????????????this.parent && this.parent.removeChild(this); ????????} }

在某個場景中使用虛擬搖桿

[Actionscript3]?純文本查看?復制代碼 ?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

/** ?* 主頁場景 ?* @author chenkai ?* @since 2017/5/4 ?*/ class HomeScene extends eui.Component{ ????????private vj:VirtualJoystick = new VirtualJoystick();? //虛擬搖桿 ????????private player:eui.Rect;??? //人物 ????????private speedX = 0;???????? //人物移動速度 ????????private speedY = 0; ????????private speed = 10; ????????public constructor() { ????????????????super(); ????????????????this.skinName = "HomeSceneSkin"; ????????} ????????public childrenCreated(){ ????????????????//開啟虛擬搖桿 ????????????????this.vj.start(); ????????????????this.vj.addEventListener("vj_start",this.onStart, this); ????????????????this.vj.addEventListener("vj_move", this.onChange, this); ????????????????this.vj.addEventListener("vj_end", this.onEnd, this); ????????} ????????//搖桿啟動，人物開始根據搖桿移動 ????????private onStart(){ ????????????????this.addEventListener(egret.Event.ENTER_FRAME, this.onEnterFrame, this); ????????} ????????//觸摸搖桿的角度改變，人物的移動速度方向也隨之改變 ????????private onChange(e:egret.Event){ ????????????????var angle = e.data; ????????????????this.speedX = Math.cos(angle)*this.speed; ????????????????this.speedY = Math.sin(angle)*this.speed; ????????} ????????//停止搖桿，人物停止移動 ????????private onEnd(){ ????????????????this.removeEventListener(egret.Event.ENTER_FRAME, this.onEnterFrame, this); ????????} ????????//每幀更新，人物移動 ????????private onEnterFrame(){ ????????????????this.player.x? += this.speedX; ????????????????this.player.y += this.speedY; ????????} }

三 Demo下載

轉載于:https://www.cnblogs.com/gamedaybyday/p/9219928.html

總結

以上是生活随笔為你收集整理的【咸鱼教程】虚拟摇杆的全部內容，希望文章能夠幫你解決所遇到的問題。

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