【咸鱼教程】虚拟摇杆

教程目录
一 实际效果
二 实现原理
三 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下载